Hi Team,
I want to update the grid's data and structure on button click.
Scenario is as below:
I have created a hierarchical grid using MVC GridModel class (defined columns and features in controller) and in View, I have written: @Html.Infragistics().Grid(Model). This works fine.
Now the requirement is like this:
I have a multi select check box list, where there are a list of columns. I need to pass the selected columns (may be as a comma separated list) and re-create the grid with the selected columns.
Issue 1:
I am able to create and bind the igCombo with multiple selection. But when I try to fetch the selected values, I receive errors:
If I use: var selectedItems = $("#possibleColumnsCheckBox").igCombo("selectedItems") and loop through the selectedItems, and try to fetch the value using:selectedItems[i].value, I get undefined (though it loops the number of items selected).
When I try to use: var selectedItems = $("#possibleColumnsCheckBox").igCombo("values"), I get the error:no such method 'values' for igCombo widget instance
How to select the value of this checkbox list.
Issue 2:
On button click, I manually pass the value using a post request, call a action method, create the grid, pass the column list (should be the one selected above, but for now, I manually create it), fetch data for these columns from database, define features and return the ViewResult and try to render the updated grid.
I keep the AutoGenerateColumns to true here and binds the grid with the updated datasource. But, when I debug, I find that the grid has no columns and the updated grid is not rendered on the view.
Not sure, what is the issue here. Could you please help me resolve these two issues.
-Regards,
Agraj
Hello Agraj,
Thank you for your patience while I was looking into this matter for you.
What I can suggest regarding your first query is getting reference to the data of the selected item and afterwards get the value of particular property. For example, if you are binding the igCombo and set the textKey option to a field called ID and the valueKey option to a field called Name when you would like to get the ID of a particular selected item it should look as following:
//if you would like to get the ID value var selectedItemID = $("#combo").igCombo("selectedItems")[i].data.ID; //if you would like to get the Name value $("#combo").igCombo("selectedItems")[i].data.Name;
//if you would like to get the ID value
var selectedItemID = $("#combo").igCombo("selectedItems")[i].data.ID;
//if you would like to get the Name value
$("#combo").igCombo("selectedItems")[i].data.Name;
By design igHierarachicalGrid could not change its column collection dynamically. What can I suggest in case that you would like to change the columns structure is to destroy the grid and create it again with the new data source. This could be done with the destroy method of igGrid. For example:
$(".selector").igGrid("destroy");
$(
".selector"
).igGrid(
"destroy"
);
I hope you will find my information helpful.
Please let me know if you need any further assistance with this matter.
Dear Vasya,
Thank you for your helpful response.
The first issue is resolved, I was directly using the selectedItems[i].Name instead of selectedItems[i].data.Name.
For the second issue, I pass the above selected list to the controller using a ajax post request, meanwhile I destroy the grid, fetch the required data from database, create the grid again. I want to set AutoGenerateColumns to true (so that I don't have to manually define the columns). I bind the grid to new datasource and pass the updated model to the View, but the grid does not render on the view.
Any idea, why? Please let me know if you need any further details on this.
Thank you for getting back to me.
Your approach seems correct according to me.
I am attaching a small sample illustrating similar scenario for your reference. I have an igHierarchicalGrid and igCombo. Based on the choice of the igCombo different layouts are displayed for the igHierarachicalGrid.
Please test my sample on your side and let me know whether it works correctly. If you have any additional questions afterwards please feel free to contact me and I would be glad to help.
If this is not an accurate demonstration of what you are trying to achieve please feel free to modify my sample it and send it back to me for further investigation along with steps to reproduce. This is going to be highly appreciated and helpful.
Looking forward to hearing from you.