Sorting Issue on headers when checking/unchecking checkboxes

pixelfx

Hi All,

I have used DataTables plugin and developed a datagrid which has fixed colummns. I have checkboxes on some of the column headers. When i check/uncheck a checkbox the sorting is happening which should not happen ideally. How can i avoid that..?

I have this script, but not sure how to implement this....

$('input[type=checkbox]').click(function(event){event.stopPropagation()});

Here is the Demo of that. http://jsfiddle.net/MpzXU/1/

robertbrower

If what you want is to be able to select or deselect all rows using a checkbox in the header of the table then try something like this:

$("#uncheckAllApplicationsButton").click(function (event) {
var value = $(this).attr('checked') == true ? 'checked' : '';
var aData = oDataTable.fnGetData();
var newData;
var lastRow;
for (var i = 0; i < aData.length; i++) {
if (aData[i][0] != value) {
newData = aData[i];
newData[0] = value;
oDataTable.fnUpdate(newData, i, null, false, false); // pass false, false to not rebuild or redraw.
lastRow = i;
}
}
// update last updated row again passing true, true to rebuild and redraw.
oDataTable.fnUpdate(newData, lastRow, null, true, true);
$(this).attr('checked', value).attr('title', value == 'checked' ? 'Click to deselect all' : 'Click to select all');
event.stopPropagation();
});

pixelfx

Hi Robert,

Thats not what i am looking for actually. I have checkboxes in couple of header columns. So when click on the checkbox the column is getting sorted which is not expected. So, i have fixed this issue by using following script in the initialization script.

demo: http://jsfiddle.net/MpzXU/12/

[code] $(function(){
var oTable = $('#example').dataTable( {
"bPaginate": false,
"bScrollCollapse": true,
"sScrollY": "450px",
"sScrollX": "100%",
"bFilter": false,
"bAutoWidth": false,
"bInfo": false,
"aaSorting": [[1, 'desc']]

});
$('input[type=checkbox]').click(function(event){event.stopPropagation()});

new FixedColumns(oTable);
});[/code]

robertbrower

What do your checkboxes do? I guess event.stopPropagation() is what solves your problem. I had the same problem because i was calling event.preventDefault(). Your post helped me out. Thanks.

pixelfx

The checkboxes has to do the following functionality which i have posted here. If you can help me, it would be of great help for me Robert. I happen to pull my head from past few weeks.

http://datatables.net/forums/comments.php?DiscussionID=4502&page=1

robertbrower

So does event.stopPropagation() solve your problem with the sorting that happens when you click a checkbox? I guess you would use define aoColumnDefs and fnRender so that when the cells are rendered they can check to see if the row or column checkboxes are checked.

pixelfx

The sorting problem is resolved by using event.stopPropagation(). I will try these aoColumnDefs and fnRender. Can you help me in the implementation..?