Filtered Grid Checkboxes removed from DOM

[mdolsParticipant]

I am using v3.4.0 in an MVC.NET 5 application with jQuery 2.1.0 and twitter bootstrap. I have a grid with advanced filtering, a filter row, grouping, and checkbox columns. When a user filters the grid on a text field and clicks on a checkbox in a cell, all of the checkboxes are removed from the DOM for that column. I have trimmed down the code that repeats the issue, and have included it, below.

Thank you,
Mike Dols

var billing = (function () {
var _load = function () {
var billingTabs = $(‘#billingTabs’);
$(‘.panel-header’).css(‘height’, ’25px’);
billingTabs.off(‘created selected’).on(‘created selected’, function (event) {
var index = billingTabs.jqxTabs(‘val’);
var title = billingTabs.jqxTabs(‘getTitleAt’, index);
var billingGrid = $(‘#billingGridEmc’);
var billingUrl = _root + ‘Billing/GetBillings?departmentId=2’;
loadBillingGrid(billingGrid, billingUrl);
});
billingTabs.jqxTabs({ height: ‘99%’, width: ‘auto’, position: ‘top’, selectionTracker: ‘checked’, animationType: ‘fade’, theme: ‘black’ });
};

var loadBillingGrid = function (grid, url) {
var billingSource = {
datatype: “json”,
dataFields: [
{ name: ‘Checked’, type: ‘bool’ },
{ name: ‘Group’, type: ‘string’ },
{ name: ‘TaskTitle’, type: ‘string’ },
{ name: ‘JobLocationCode’, type: ‘string’ },
{ name: ‘BillingLocationCode’, type: ‘string’ },
],
url: url,
filter: function () {
grid.jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function () {
grid.jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
beforeprocessing: function (data) {
billingSource.totalrecords = data.TotalRows;
}
};

var billingDataAdapter = new $.jqx.dataAdapter(billingSource, {
loadError: function (xhr, status, error) {
metAlert(‘Error’, error, ‘black’);
}
});

var groupsrenderer = function (text, group, expanded, data) {
return ‘<div style=”background-color:#333;height:’ + _rowHeight + ‘px;”>’ + text.split(/:(.+)?/)[1] + ‘</div>’;
}

grid.jqxGrid({
width: ‘99.5%’,
height: ‘99%’,
source: billingDataAdapter,
groupable: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
groupsrenderer: groupsrenderer,
groupsexpandedbydefault: true,
showgroupmenuitems: false,
showgroupsheader: false,
filterable: true,
filterMode: ‘advanced’,
showfilterrow: true,
theme: ‘black’,
columns: [
{ text: ”, datafield: ‘Checked’, columntype: ‘checkbox’, width: 30, filterable: false, sortable: false, align: ‘center’, cellsalign: ‘center’ },
{ text: ‘Loc’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’, datafield: ‘JobLocationCode’, width: ’40’, editable: false, cellsalign: ‘center’ },
{ text: ‘RFB’, columntype: ‘checkbox’, filtertype: ‘bool’, filtercondition: ‘equal’, datafield: ‘TaskReferredForBilling’, width: ’30’, cellsalign: ‘left’ },
{ text: ‘OKB’, columntype: ‘checkbox’, filtertype: ‘bool’, filtercondition: ‘equal’, datafield: ‘TaskApprovedForBilling’, width: ’30’, cellsalign: ‘left’ },
{ text: ‘Task’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’, datafield: ‘TaskTitle’, width: ‘auto’, editable: false },
],
groups: [‘Group’]
});

$(‘#billingInformationPanel’).jqxPanel({ sizeMode: ‘fixed’, width: ‘100%’, height: 70, theme: ‘black’ });
};
return {
load: _load
};
}());

[Peter StoevKeymaster]

Hi mdols,

The provided information is not sufficient for testing your scenario. Please, share a jsfiddle.net example which demonstrates your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mdolsParticipant]

For those interested, removing the binding on sort and filter, resolved my issue.
var billingSource = {
datatype: “json”,
dataFields: [
{ name: ‘Checked’, type: ‘bool’ },
{ name: ‘Group’, type: ‘string’ },
{ name: ‘Lab’, type: ‘string’ },
…
{ name: ‘SequenceId’, type: ‘number’ }
],
id: ‘TaskId’,
url: url,
// Causes vanishing checkboxes when grid is filtered and checkbox is clicked with mouse
//////filter: function () {
////// grid.jqxGrid(‘updatebounddata’, ‘filter’);
//////},
//////sort: function () {
////// grid.jqxGrid(‘updatebounddata’, ‘sort’);
//////},
root: ‘Rows’,
beforeprocessing: function (data) {
billingSource.totalrecords = data.TotalRows;
}
};

var billingDataAdapter = new $.jqx.dataAdapter(billingSource, {
loadError: function (xhr, status, error) {
metAlert(‘Error’, error, _theme);
}
});

[Author]

Posts