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?