in my table I show/hide columns based on their class attribute. Everything works fine except that that the animation of the "columnToggle"-Button does not change. Therefor it is hard to see which groups have been selected.
Here is a test case on Datatables live with the same behavior : DataTables Live Example
What am I missing? Thanks for your help.
sanJo
It is a bug in the current version of Datatables. The "active" argument is not set properly. My workaround was to toggle the "active" argument with jquery toggleClass function.
Related
I created a table with DataTable library (that is using foundation-zurb 5.5.3), Per the below image I'm seeing both in Chrome as in IE 11 that the most right column header does not align with the other rows when you first open up the page. The actual webpage is http://iprobesolutions.com/learn/wireless-conference-system-comparison. However if I open devtools to try and inspect the code the issue dissappears! When I refresh with CTRL+ F5 it however reappears.
The issue does not appear when I create this fiddle: http://jsfiddle.net/setbon/x75o53ck/
Below is just a small part of the code pasted. I'd really appreciate if you could look at the webpage since this is where the issue is displayed...perhaps a bug in IE and Chrome ?
<table id="example" class="display nowrap table1 compact">
I see you are loading the Datatables FixedHeader code. I don't see how or if you are using it but its not compatible with scrollX and scrollY:
https://datatables.net/extensions/fixedheader/
Try removing either FixHeader or the scrolling options.
Usually these type of issues occur when table is hidden when initialized and then becomes visible in a tab, modal dialog, etc.
In most cases the solution is to call
columns.adjust() to recalculate column widths once table becomes visible.
table.columns.adjust();
When I ran the code above after your table is initialized, the issue disappears.
I cannot explain why this issue occurs with your table. I'm not familiar with Foundation framework, but I don't think you have to call foundation() when initializing the table.
See jQuery DataTables: Column width issues with Bootstrap tabs for more information, examples and details.
I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?
Just discovered the KendoGrid and was trying to change the style of an individual column(cell) after changing another cellvalue. For example I have a grid with a shipname and shipcity column. Suppose I have a business rule that says :
'Make shipcity cell value disabled when the shipname on the same row has the same value'
I found this sample which uses the blur event which I probably use, what would be a good way of implementing this rule?
Also nice to know your opinion in relation to asp.net mvc integration.
jsfiddle link:http://jsfiddle.net/dingen2010/begjT/1/
Updated the link:
You can try the updated fiddle example here
Basically conditional editor templates are not supported out of the box. You have two options.
Either use the edit event of the Grid find the editor inside e.containder and disable it the way it needs to be (if using Kendo widget use the enable(false) method, or add the readonly attribute if regular input).
The other options is to define custom editor like demonstrated in this JsBin example.
I am using Dojo enhancedGrid (1.6) with indirectSelection plugin to generate checkboxes. I am having an issue with row selection and sorting.
Here is how to recreate the problem:
Check the checkboxes of the first 2 rows
Sort the grid by clicking on a column
The sort order of the rows changes, but the first 2 rows are still checked, the checkmark doesn't move with the rows.
This issue is present in both dataGrid and enhancedGrid, even on the Dojo example page.
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
http://dojotoolkit.org/reference-guide/dojox/grid/EnhancedGrid.html
Is this a bug or is there a way to make the checkbox move with the row when sorting?
Yes,it really is.
I'm using dojo 1.7.1 release , and it still has this problem
what's more , when use
grid.rowSelectCell.setDisabled(0, true)，
and then use
dijit.byId("dataGrid").rowSelectCell.toggleAllSelection(true);
the disabled checkboxes will still be selected.
badly, use
gridDomNode.selection.getSelected();
will still select the rows with disabled checkboxes
Hope this still helps.
I had the same issue, and found out it is already solved and patched... (at least from dojo version 1.6)
In short, the only thig you need to do is this.
[in your EnhancedGrid] set 'keepSelection' attribute to true,
e.g.
<div dojoType="dojox.grid.EnhancedGrid" keepSelection = true .../>
also, note that there is a precondition: Identifier(id) is required for store, as id is used for differentiating row items
thats it! now any sorting, filtering or pagination actions in the grid will preserve the selections!
More info here:
http://bugs.dojotoolkit.org/ticket/10855
Note: I'm using dojo version 1.6 and the patch mentioned in there is ALREADY applied to the dojo files, so you DO NOT NEED to apply such patch, just add the attribute to the grid, (and ensure your store is identified by the id.)
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});