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
Actually in your code it seems that you’re using column templates.
The row templates are set via a property named “rowTemplate”.
The “template” you’ve set on the column is a column template.
I’ve tested your code on my side with a similar data structure and the hiding and showing worked as expected.
I’ve attached the sample for your reference. Let me know if I’m missing anything from your scenario.
Thank you for the explanation and the example.
I applied the same example but for some reason it didn't work. It is even affecting the other "jquery" functions like button clicks...
My dropDownList is from another partial view and based on its value I would like to hide/show the column of my grid which is in another partial view as well.
This shouldn't be a problem but I don't know why I am experiencing this issue.
Hello Sonia,
Could you share a sample that demonstrates the exact scenario in which you’re experiencing this issue?
If that’s not possible could you share the views and how they’re being rendered so that I may try and replicate the issue on my side?
I’m looking forward to your reply.
Sure that will be helpful.
I will prepare that and send it to you
Thanks again for your help.
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
I solved the problem.
I used
$(
".selector"
).igGrid(
"hideColumn"
, 1);
instead of $(".selector").igGridHiding("hideColumn", 1);
Thank you for your help and assistance anyway
Thank you for your answer.
Yes I checked and I have the required JS files loaded. I wanted to try another example and now I got the error of unable to use hideColumn prior initialization, so I changed the code and put it inside an iggriddatabound but nothing happen. The alert message that I created is giving me the right output but the igGridHiding is not doing anything.
Please find below the example :
$("#poaraGrid").on("iggriddatabound", function (event, ui) {
var i, grid = ui.owner, ds = grid.dataSource, data = ds.data(), dataLengthPORA = data.length;
var columnPOA = $("#poaraGrid").igGrid("option", "columns"); var columnPOAKey = columnPOA[1].key;
alert(columnPOAKey );
if (columnPOAKey === "lkpoaratype") {
$("#poaraGrid").igGridHiding("hideColumn", "lkPOARAName"); }
The error could be raised if the igGridHiding scripts are not loaded on the page.
Could you check in the browser’s network whether the all scripts loaded via the igLoader are loaded without any errors on your page?
Specifically check for the : infragistics.ui.grid.hiding.js file.
Also check if the jQuery selector: $("#poaraGrid") is properly returning the correct Dom element.
Thank you for this update. I will run it and let you know
Regarding the error in my previous post. I got that in my main project when I wanted to use the igGridHiding "word". Even with no dropdownlist change event. I just wanted to hide and show the column without using a dropdownlist change event to check if the problem is with my dropdowlist declaration or iggrid and I found that when using this igGridHiding I have that Jquery error.
Thank you
Are you getting this error with the attached sample?
Note in the previous attachement I’ve removed the dlls due to their size.
I’ve attached the sample again with all dlls except the Infragistics.Web.Mvc.
In order to run the sample copy the Infragistics.Web.Mvc assembly to the Bin folder of the project and add a reference to it.
Let me know if you’re able to run it after adding the assembly.