Hello, I want to implement such scenario: there are 2 controls on the page - tree and a grid. When user checks node in the tree page calls server via $.ajax(), retrieves node details and that details should be added as a row to the grid. So, grid initially isn't bound to any data.
Grid is defined like this:
@(Html.Infragistics().Grid<NodeDetails>().ID("detailsGrid") .PrimaryKey("ID") .Columns(columns => { columns.For(d => d.ID).DataType("int").HeaderText("ID"); columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed"); columns.For(d => d.ResponseRate).DataType("int").HeaderText("Response Rate"); columns.For(d => d.Name).DataType("string").HeaderText("Name"); columns.For(d => d.TotalInvited).DataType("int").HeaderText("Total Invited"); columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed"); }) .Features(features => { features.Hiding().ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("ID").Hidden(true).AllowHiding(false); }); } ) .ClientDataSourceType(ClientDataSourceType.JSON) .Width("100%") .Height("600px") .Render() )
javascript that gets data is:
$(document).ready(function () { $("#hierarchyTree").bind("igtreenodecheckstatechanged", function (evt, ui) { if (ui.newState == "on") { $.ajax({ type: "POST", url: '@Url.Action("GetNodeDetails")', data: { id: ui.node.data.ID }, success: function (returnData) { if (returnData.ok) { var grid = $('#detailsGrid'); grid.igGridUpdating("addRow", returnData.data); } } }) } }); });
right now data is received but after igGridUpdating("addRow", returnData.data) nothing is happened. I assume this is because grid isn't bound to any data source. How can I get it working?
Hi adogg,
In the code snippet you gave there is no Updating feature enabled. You should add it before using the Updating API.
Your code should look like this:
I've added line #14. Other code is yours.
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Thanks Martin. That worked. But now I have a question regarding row deletion. If I use 'deleteRow' method row becomes grayed out but stays in the grid. Is there any way to remove it completely from the grid?
Add "AutoCommit(true)" to your code.
Thank you!
You are welcome.