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>" }, ],
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
$("#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
Hi Maya,
Thank you for this quick helpful response.
I will follow these steps and check the example and let you know.
Thanks again for your help
Regards
Sonia
Please find attached my sample.
I have two files: one for the grid (the first partial view) and the second for the dropdownlist (the second partial view)
Thank you for your help
Could you let me know whether the grid is on the view which you load dynamically:
$.ajax({
url: 'Home/ManageQ1',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
})
If that’s the case the grid will be re-instantiated each time you change the selection from the drop down.
Could you provide some additional information on how the partial views are loaded and in what order they’re loaded?
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.
Thank you
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.
I will try this and let you know.
Unfortunately I couldn't run your example.