Forums Ignite UI for jQuery
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
Close
Sonia Meskini
270
Hide and show an iggrid column based on external dropdownlist option
posted

I would like to hide an iggrid column on dropdownlist selection using Jquery. I tried the following but didn't work.

var hideTheColumn = $("#cntStatusID").val(); $("#lifeInsuranceGrid").delegate("iggridhidingcolumnhiding", function (evt, ui) { if (hideTheColumn == 3) { $("#lifeInsuranceGrid").igGridHiding("showColumn", columnsGrid); } else { $("#lifeInsuranceGrid").igGridHiding("hideColumn", columnsGrid); } });

and the definition of my grid is :

... columns: [{ headerText: headerTextValues[0], key: "insuranceID", hidden: true }, { headerText: headerTextValues[1], key: "amount", width: 175, template: "<a href='Home/ManageLifeInsuranceEditor?liId=${insuranceID}&command=edit' class='editLifeDialog'>${amount}</a>" }, { headerText: headerTextValues[2], key: "Benefname", width: 200, template: "<a href='Home/ManageLifeInsuranceEditor?liId=${insuranceID}&command=edit' class='editLifeDialog'>${Benefname}</a>" }, { headerText: headerTextValues[3], key: "Altername", width: 150, template: "<a href='Home/ManageLifeInsuranceEditor?liId=${insuranceID}&command=edit' class='editLifeDialog'>${Altername}</a>" }, { headerText: headerTextValues[4], key: "willMakerTypeDesc", hidden: true, width: 150, template: "<a href='Home/ManageLifeInsuranceEditor?liId=${insuranceID}&command=edit' class='editLifeDialog'>${willMakerTypeDesc}</a>" }, ],
Parents
No Data
Reply
  • 29417
    Offline posted

    Hello Sonia ,

     

    Thank you for posting in our forum.

     

    The following code:

    $("#lifeInsuranceGrid").delegate("iggridhidingcolumnhiding", function (evt, ui) {}

    Will actually add an event handler for the column hiding event of the grid.

    This event will fire when a column is hidden via the column hiding feature by click on the column hiding icon in the column header.
    Due to this the code inside the event handler won't be executed when the selection from a drop down list is changed.

     

    If you would like the columns to be hidden or shown based on the selection change of a dropdownlist the you could hook the change event of the dropdownlist.

    Then based on the value you can hide or show a column using the “hideColumn” or “showColumn” methods.

    Note that you need to pass to them either the index of the column you want to show/hide or the column key.

     

    For example:

    $("#ddp").change(function(){

                                    var value=$("#ddp").val();          

                                    if(value==2)

                                    {                             

                                    //pass the index of the column key of the column

                                    $("#grid").igGridHiding("hideColumn", "Name");

                                    }

                                    else

                                    {

                                    //pass the index of the column key of the column

                                                    $("#grid").igGridHiding("showColumn", 1);

                                    }                             

                                    });

     

    I’ve attached an example for your reference. Let me know if you’re aiming to achieve something similar.

     

    Best Regards,

    Maya Kirova

    Developer Support Engineer II

    Infragistics, Inc.

    http://ko.infragistics.com/support

     

    igGridHide.zip
Children