Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
185
Adding checkbox on IGGrid Header
posted

Hi,

How do I add a checkbox to column header. I don't want to use the multiselect checkbox which is already available, I want a custom checkbox to be displayed on the grid column header(note: may be third column in the grid).

Functionality of this checkbox displayed on the header is something like selecting all the checkboxes in the grid. That is  say I have 3 columns with checkboxes , so on clicking the custom checkbox I want to check all the checkboxes in 3 columns.

Please Suggest.

 

Thanks,

Veena

Parents
  • 17590
    Offline posted

    Hello Veena,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is handling headerRendered event of the igGrid. Since this event is fired after headers have been rendered this is a suitable place to append the checkbox element. This could be achieved by using the append/prepend function which inserts content, specified by parameter as the first child/last child. After the checkboxes are appended their click event could be handled in order to check what is the current state of the checkbox that triggered the event and set the state of all other checkboxes accordingly. For example:

    [code]

    function colHeadersChkbx() {

    $($('#grid').igGrid("headersTable").find("span")[0]).prepend("<input id='Checkbox1' type='checkbox' />");

    $($('#grid').igGrid("headersTable").find("span")[2]).prepend("<input id='Checkbox2' type='checkbox' />");

    $("#Checkbox1").click(function (event) {

    var isChecked = $("#Checkbox1")[0].checked;

    if (isChecked === true) {

    $("#Checkbox2")[0].checked = true;

    }

    else {

    $("#Checkbox2")[0].checked = false;

    }

    });

    $("#Checkbox2").click(function (event) {

    var isChecked = $("#Checkbox2")[0].checked;

    if (isChecked === true) {

    $("#Checkbox1")[0].checked = true;

    }

    else {

    $("#Checkbox1")[0].checked = false;

    }

     

     

    });

    }

    [/code]

    Please keep in mind that when this approach is used sorting behavior of the igGrid should be either canceled or disabled. The reason is that in case it is enabled a click on the grid`s header will cause sorting to occur. 

    I made a small sample project illustrating my suggestion and I am attaching it for your reference.

    Please feel free to contact me if you have any additional questions regarding this matter.

    igGridCustomCheckboxesInHeader.zip
Reply Children