I have a Webix datatable
webix.ui({
view:"datatable", id:"dtable", data:grid_data,
columns:[
{id:"title", adjust:true},
{id:"more", template:"<icon class='webix_icon fa-cog'></icon>"}
]
});
with the attached context menu
webix.ui({
view:"contextmenu",
data:["More info", "Edit", "Delete record"],
click:function(id, context){
webix.message(id+" on row "+this.getContext().id);
}
}).attachTo( $$("dtable") );
Here's my snippet
Wondering is it possible to show the context menu on only on the icon? Any ideas? Thanks.
In the Webix documentation you'll find onBeforeContextMenu event. Using it, you can check the column id and prevent showing of the context menu on other columns:
on:{
onBeforeContextMenu:function(id, e, node){
if (id.column !== "more")
return false;
}
}
In your snippet, the column contains only icons, so this solution can suit your needs. As an addition, I suggest you prevent the browser context on the datatable via
webix.event($$("dtable").$view, "contextmenu", function(e){
webix.html.preventEvent(e);
});
http://webix.com/snippet/509f218d
Related
I'm using Ext Js v6.2, In my application, I have West panel, It can collapsed or expand, But In that I have Pin Tools Button, so if user click the Pin, Panel stay until user click unpin, I'm newbie to Ext js, I've tried using panel expanded or collapsed but It doesn't help, please solve the problem. Thanks in advance.
tools: [{
type: 'pin',
cls: 'leftPanelPin',
tooltip: 'Pin Panel',
handler: function() {
toggleCollapse: function() {
if (this.lockedPanel) {
this[this.collapsed ? 'expand' : 'collapse'](animate);
return this;
}
}
}
}]
You can use the beforecollapse listener to check whether the panel is pinned and return false, which will prevent the collapsing. Fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/2aj8
When I'm trying to paste into the empty area within the webix datatable, nothing happens and onPaste event doesn't occur.
Basically, I want to add a new item through onPaste even when existing data items aren't selected. But whether it's possible?
Something like the 'insert' operation in a list, but in my use-case the datatable can be empty after init (in the following sample I've added an item to make clipboard work). Here it is:
http://webix.com/snippet/9ae6635b
webix.ui({
id:'grid',
view:'datatable',
select:true,
clipboard:'custom',
editable:true,
columns:[
{ id:'id' },
{ id:'name', fillspace:true, editor:"text" },
{ id:'details' }
],
data: [
{ }
],
on:{
onPaste: function(text){
this.add({ id:webix.uid(), name:text })
}
}
});
Any suggestions are appreciated.
I found that 'clipbuffer' has focus only when datatable has the selection. Most probably it is required for data editing, detecting position or whatever. Anyway, the 'clipbuffer' can be focused manually:
var clipEvent = webix.event($$("grid").getNode(), "click", function(){
webix.clipbuffer.focus();
});
Sample: http://webix.com/snippet/aa441e70
Please refer to my test case
https://jsfiddle.net/1c3Lmace/13/
This is my code
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
"fnPreDrawCallback": function( oSettings ) {
alert('pre');
},
"fnDrawCallback" : function() {
alert('+++++');
}
} );
} );
When you go to Show/Hide Columns and click on any column item you will see that each preDrawCallBack and drawCallback event fires twice.
Does anyone having any idea why it happens.
I want to show a loader before data loads and hide it and when data is successfully loaded. Any help is appreciated
Thanks
Indeed the events are fired twice but only when sorted column visibility is being toggled.
I see no point in showing loading indicator for client-side processing, column visibility changes occur very fast. For server-side processing, there is processing option already available.
You can do something like this. But I had to put an alert() because columns are toggled very fast and Processing... message disappears quickly.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
processing: true,
drawCallback : function() {
$('.dataTables_processing', $('#example').DataTable().table().container()).hide();
}
} );
} );
$('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
$('.dataTables_processing', $('#example').DataTable().table().container()).show();
alert('Column visibility is toggled');
} );
See this jsFiddle for code and demonstration.
I'm using this context menu example.
I used the context menu select event like this:
menu = $("#menu").kendoContextMenu({
target: "#listview-context-menu",
filter: ".product",
animation: {
open: { effects: "fadeIn" },
duration: 500
},
select: onSelect
});
function onSelect(e) {
console.log(e);
}
It's working fine, but now I'm getting the current menu object. How can I get selected row data instead?
For example, I have right-clicked on "RE: New version of Telerik Trainer (1st one record)" and then click on reply to sender, so how can I get row object of current row.
You can get the reference to the datarow by using the snippet below
function onSelect(e) {
var lst =$("#listview-context-menu").getKendoListView();
var row = lst.dataItem(e.target);
console.log(row);
}
Please refer the fiddle here for a demo
I have an asp.net web application that has the option to provide pseudo-realtime data about an automation machine. I am using the JQuery Datatables with an ajax datasource. I have an interval that reloads the data source every set amount of time (which updates my datatable asynchronously from the db) and then redraws the table.
I am also using the responsive plug in for the table, so the web app can be accessed well from phone sized devices. I have set this up so that it drops all of the columns but the first(primary) column and adds the other columns a child (detail) record. This is where my app breaks and my phone users loose usability. This is because whenever the table redraws detail records snaps close. Therefore if a phone user is looking at the table and has expanded the detail of a record the record will snap shut as soon as the table is redrawn.
My solution would be to capture the opened detail and then at the time of redraw re-open the detail. I believe I have captured the detail successfully but everything I have found to try to programmatically expand it has not worked.
$(document).ready(function () {
var row;
var tr;
var table = $('#myDataTable').DataTable({
autoWidth: false,
processing: false,
stateSave: true,
sAjaxSource: '#Url.Action("GetDropData", "Drops")',
"columns":
[
{ "width": "10%" },
{ "width": "50%" },
{ "width": "40%" }
]
});
var timer = setInterval(function () {
table.ajax.reload(null, false);
}, 1000);
//flag is used to determine if last click expanded a detail
var flag = false;
//If table is clicked find closest 'tr'
table.on('click', 'tr', function () {
tr = $(this).closest('tr');
row = table.row(tr);
//was click a detail expansion
if (row.child.isShown()) {
flag = true;
}
})
// event fires after ajax call completes (reload and redraw)
$('#myDataTable').on('xhr.dt', function () {
if (flag) {
$(tr).addClass('row_selected');
}
});
});
If you can tell why the detail isn't expanded or a better way solution please let me know. I do have a temporary solution in place that just pauses the interval when the detail button is clicked but this makes my phone users table not update.
If you're using Datatables 1.9 and earlier use fnDrawCallback().
If you're using Datatables 1.10+ use drawCallback().
Both of these callbacks go in your datatables initializer and can take your row detail opening code.
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
//open detail row here
}
} );
} );