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>" }, ],
Hi Maya,
I am getting this error : Uncaught TypeError: undefined is not a function for this line : $("#poaraGrid").igGridHiding("hideColumn", "lkpoaratype");
Regards
Sonia
Unfortunately I couldn't run your example.
Thank you
I will try this and let you know.
Hello Sonia ,
I’ve tried reproducing this on my side based on your code.
On the main page the two partial views are loaded. In the first the drop down is loaded and in the second the grid.
When changing the active value the first column is hidden or shown accordingly.
I’ve noticed that you’re not using a standard drop down list.
This:
(Html.Kendo().DropDownListFor(m => m.cntStatusID)
.BindTo(Model.Q1EditList)
.OptionLabel("Select an option...")
.HtmlAttributes(new { style = "width:830px;" })
.Value(Model.cntStatusID.ToString()))
Appears to be a third party control.
It’s possible that it uses a different “change” event than the standard DropDownList.
I’ve attached the sample with a standard DropDownList. Please refer to it and let me know if you encounter any issue when testing it.
If the sample is not an accurate demonstration of what you’re doing in your application, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
I’m looking forward to your reply.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Thank you for your reply.
I am using Jquery to declare my view where I populate it with a data through $.getJSON("Home/GetAllPOARA", null, function (data) {...}
The ajax call
$.ajax({ url: 'Home/LoadPOA', contentType: 'application/html; charset=utf-8', type: 'GET', dataType: 'html' })
.success(function (result) { $("#AjaxPOARAGrid").html(result);}).error(function (xhr, status) { alert("POA grid" + status);})
that calls the grid is on a separate partial view. It is called on a button click.
Please if you need further details let me know.