jQuery UI Widgets › Forums › Grid › Select All checkbox functionality is not working as expected.
Tagged: appearance, bindingcomplete, cellclassname, check, checkbox, class, cookies, custom, dataBind, evend, filter, grid, Header, jqxGrid ;, page, paging, row, save state, select, select all, selected, selection, selectionmode, sort, sorting, state, styling, Tooltip, updatebounddata
This topic contains 3 replies, has 2 voices, and was last updated by ivanpeevski 11 months, 2 weeks ago.
-
Author
-
Hi All,
below link is the grid snapshot
https://postimg.cc/B8YbV5w8
https://freeimage.host/i/screenshot-2023-11-24-233744.JoMq4uRIn UI it is showing column header checkbox and rows checkbox of the corresponding column. When I check/uncheck column header checkbox it will get check/uncheck row level checkboxes of the particular column.
Issue here is that, when we uncheck any of the random row’s checkbox and then check the other column header checkbox it is affecting for all across the grid, instead of affecting to corresponding column row checkboxes.Please help me to fix the issue.
Below is the code snippet for jqxgrid with select all checkbox:-
let columns = [
{ text: resources[‘FieldNameLabel’], datafield: ‘FixedFieldName’, width: ‘15%’, align: ‘center’, cellsalign: ‘left’, editable: false, filtertype: ‘input’, pinned: true, sortable: true },
{ text: resources[‘VisibleNameLabel’], datafield: ‘VisibleName’, width: ‘15%’, align: ‘center’, cellsalign: ‘left’, editable: false, filtertype: ‘input’, pinned: true },
];
let columngroups = []angular.forEach(uniqueForms, function (object) {
if (object.FormName) {const columnGroupName = object.FormName.replace(/ /g, ”) + object.FormGroup.replace(/ /g, ”);
const visibleDFName = object.FormName.replace(/ /g, ”) + ‘Visible’ + object.FormGroup.replace(/ /g, ”);
const requiredDFName = object.FormName.replace(/ /g, ”) + ‘Required’ + object.FormGroup.replace(/ /g, ”);columns.push({
columngroup: columnGroupName,
text: “V”,
datafield: visibleDFName,
width: “8%”,
align: “center”,
cellsalign: “center”,
editable: true,
filterable: false,
sortable: false,
menu: false,
columntype: “checkbox”,
cellclassname: function(row, column, value, data) {
return visibleDFName + ‘-‘ + data.FixedFieldName;
},
rendered: function ($header) {
$checkbox = $(“<div />”)
.jqxCheckBox({
animationShowDelay: 0,
animationHideDelay: 0,
checked: data.every((f) => f[visibleDFName]),
height: 40,
width: 40,
})
.css(“margin”, “1px 0px 0px 20px”)
.on(“change”, (event) => {
if (!grid || !grid.$grid) {
return;
}const checked = event.args.checked;
$header.jqxCheckBox({ checked });
data.forEach((f) => (f[visibleDFName] = checked));
if (checked == false) {
data.forEach((f) => (f[requiredDFName] = checked));
}grid.$grid.jqxGrid(“updatebounddata”);
});$header.html(
$(“<div />”)
.css(“display”, “flex”)
.css(“margin-left”, “35px”)
.append(“<span>V</span>”)
.append($checkbox)
);
},
});columns.push({
columngroup: columnGroupName,
text: “M”,
datafield: requiredDFName,
width: “8%”,
align: “center”,
cellsalign: “center”,
editable: true,
filterable: false,
sortable: false,
menu: false,
columntype: “checkbox”,
cellclassname: function(row, column, value, data) {
return requiredDFName + ‘-‘ + data.FixedFieldName;
},
rendered: function ($header) {
$checkbox = $(“<div />”)
.jqxCheckBox({
animationShowDelay: 0,
animationHideDelay: 0,
checked: data.every((f) => f[requiredDFName]),
height: 40,
width: 40,
})
.css(“margin”, “1px 0px 0px 20px”)
.on(“change”, (event) => {
if (!grid || !grid.$grid) {
return;
}const checked = event.args.checked;
$header.jqxCheckBox({ checked });
data.forEach((f) => (f[requiredDFName] = checked));
if (checked == true) {
data.forEach((f) => (f[visibleDFName] = checked));
}grid.$grid.jqxGrid(“updatebounddata”);
});$header.html(
$(“<div />”)
.css(“display”, “flex”)
.css(“margin-left”, “35px”)
.append(“<span>M</span>”)
.append($checkbox)
);
},
});columngroups.push({
text: object.FormName,
align: “center”,
name: columnGroupName,
parentgroup: object.FormGroup,
});
}
});Hi kalki27,
I can’t see how you define and use the “data” array, but for updating the grid’s data in general I suggest using the setcellvalue method instead. And since you are changing the value of many cells at once, you can also use beginupdate and endupdate to improve performance:
grid.jqxGrid(‘beginupdate’)
//update all values with ‘setcellvalue’
grid.jqxGrid(‘endupdate’)When you need to get the data you can use ‘getrows’. This will make the value changes more stable and hopefully resolve the issue.
Best Regards,
Ivan Peevski
jQWidgets Support
http://www.jqwidgets.comHi ivanpeevski,
Thanks! for your response.
Below link for ‘data’ array,
https://postimg.cc/ns1d1kJg.Here is the code, that is working fine. Now I want to implement below 2 logic, please help on the same.
1 – When the “V” column header checkbox is unchecked, it should also uncheck the “M” column header checkbox and their respective row checkboxes.
2 – When the “M” column header checkbox is checked, it should check the “V” column header checkbox and their respective row checkboxes.Code :-
angular.forEach(uniqueForms, function (object) {
if (object.FormName) {const columnGroupName = object.FormName.replace(/ /g, ”) + object.FormGroup.replace(/ /g, ”);
const visibleDFName = object.FormName.replace(/ /g, ”) + ‘Visible’ + object.FormGroup.replace(/ /g, ”);
const requiredDFName = object.FormName.replace(/ /g, ”) + ‘Required’ + object.FormGroup.replace(/ /g, ”);columns.push({
columngroup: columnGroupName,
text: “V”,
datafield: visibleDFName,
width: “8%”,
align: “center”,
cellsalign: “center”,
editable: true,
filterable: false,
sortable: false,
menu: false,
columntype: “checkbox”,
rendered: function ($header) {
$checkbox = $(“<div />”)
.jqxCheckBox({
animationShowDelay: 0,
animationHideDelay: 0,
checked: data.every((f) => f[visibleDFName]),
height: 40,
width: 40,
})
.css(“margin”, “1px 0px 0px 20px”)
.on(“change”, (event) => {
if (!grid || !grid.$grid) {
return;
}const checked = event.args.checked;
grid.$grid.jqxGrid(“beginupdate”);
grid.$grid.jqxGrid(“getrows”).forEach((row) => {
grid.$grid.jqxGrid(“setcellvalue”, row.uid, visibleDFName, checked);
if (checked == false) {
grid.$grid.jqxGrid(“setcellvalue”, row.uid, requiredDFName, checked);
}
});
grid.$grid.jqxGrid(“endupdate”);
});$header.html(
$(“<div />”)
.css(“display”, “flex”)
.css(“margin-left”, “35px”)
.append(“<span>V</span>”)
.append($checkbox)
);
},
});columns.push({
columngroup: columnGroupName,
text: “M”,
datafield: requiredDFName,
width: “8%”,
align: “center”,
cellsalign: “center”,
editable: true,
filterable: false,
sortable: false,
menu: false,
columntype: “checkbox”,
rendered: function ($header) {
$checkbox = $(“<div />”)
.jqxCheckBox({
animationShowDelay: 0,
animationHideDelay: 0,
checked: data.every((f) => f[requiredDFName]),
height: 40,
width: 40,
})
.css(“margin”, “1px 0px 0px 20px”)
.on(“change”, (event) => {
if (!grid || !grid.$grid) {
return;
}const checked = event.args.checked;
grid.$grid.jqxGrid(“beginupdate”);
grid.$grid.jqxGrid(“getrows”).forEach((row) => {
grid.$grid.jqxGrid(“setcellvalue”, row.uid, requiredDFName, checked);
if (checked == true) {
grid.$grid.jqxGrid(“setcellvalue”, row.uid, visibleDFName, checked);
}
});
grid.$grid.jqxGrid(“endupdate”);
});$header.html(
$(“<div />”)
.css(“display”, “flex”)
.css(“margin-left”, “35px”)
.append(“<span>M</span>”)
.append($checkbox)
);
},
});columngroups.push({
text: object.FormName,
align: “center”,
name: columnGroupName,
parentgroup: object.FormGroup,
});
}
});Hi kalki27,
To achieve this, you can modify the code where you create the jqxCheckBox and add a unique id or class for each checkbox. You can use the column’s datafield. When you need to update the value of a checkbox, use jquery selector to get the jqxCheckbox by its id/class and call jqxChart(‘check’) or jqxChart(‘uncheck’) depending on your logic.
Best Regards,
Ivan Peevski
jQWidgets Support
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.