jQuery UI Widgets Forums Grid Select All checkbox functionality is not working as expected.

This topic contains 3 replies, has 2 voices, and was last updated by  ivanpeevski 7 months, 4 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • kalki27
    Participant

    Hi All,

    below link is the grid snapshot
    https://postimg.cc/B8YbV5w8
    https://freeimage.host/i/screenshot-2023-11-24-233744.JoMq4uR

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


    ivanpeevski
    Participant

    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.com


    kalki27
    Participant

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

    • This reply was modified 8 months ago by  kalki27.
    • This reply was modified 8 months ago by  kalki27.

    ivanpeevski
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.