[kalki27Participant]

Hi 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,
});
}
});

[Author]

Posts