I do not want to use asp.net databinding to populate the grid. I'd rather use JSON via $.ajax() and do it all client side.
Can anyone help me by helping me find the design pattern to add rows on the client?
Hi,
To answer your question. The ds array should be a collection of JSON objects. Another thing to note is you should use applyClientBinding() without the underscore. That is the internal method used. Without the underscore is the publicly supported one. If you are getting a template, you may be missing some java script files. Have you included the jQuery core and templating plug-in? Check the samples for more information on that.
-Dave
I also made sure I was on "Infragistics4.Web.v11.1". What is the "template" error for?
Getting errors--
function masterGridSelectionChanged(sender, e) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/Controls/TransHdr.aspx/SelectTransLegs", data: "{transid:'3'}", dataType: "json", success: function (msg) { var result = msg.d; var childGrid = $find("<%= ChildGrid.ClientID %>"); childGrid._set_dataSource(result); childGrid._applyClientBinding(); }, error: function (msg) { alert("errror:" + msg.d); } }); }
[System.Web.Services.WebMethod()] public static List<TRANS_LEG_DTL_DTO> SelectTransLegs(string transid) { List<TRANS_LEG_DTL_DTO> _list = new List<TRANS_LEG_DTL_DTO>(); FilterHandler filter = new FilterHandler(); long id = Int64.Parse(transid); filter.Filters.Add(new FilterControl(id, "TRANS_ID", "=", "System.Int64")); string where = filter.GetFilterWhereClause(); object[] values = filter.GetObjectParameters(); if (!string.IsNullOrEmpty(where)) { LSQuery query = new LSQuery(where, values); string _payload = JsonConvert.SerializeObject(query); //LSFunctions.SerializeObject(typeof(LSQuery), query); _list = ClientCommon.FetchSolutionData<TRANS_LEG_DTL_DTO>(ClientCommon.MySession.Current.MySessionHandler.SessionID, "Development", "FetchTRANS_LEG", _payload); if (_list != null && _list.Count > 0) { return _list; } } return _list; }
<ig:WebDataGrid ID="ChildGrid" runat="server" Width="100%" AutoGenerateColumns="False" DefaultColumnWidth="100px" ViewStateMode="Enabled"> <Columns> <ig:BoundDataField Hidden="True" DataFieldName="TRANS_LEG_ID" Key="TRANS_LEG_ID" DataType="System.Int64"> <Header Text="Trans Leg" /> </ig:BoundDataField> <ig:BoundDataField Hidden="True" DataFieldName="TRANS_ID" Key="TRANS_ID" DataType="System.Int64"> <Header Text="Trans" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="START_DTM" Key="START_DTM" DataType="System.DateTime"> <Header Text="Start Date" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="END_DTM" Key="END_DTM" DataType="System.DateTime"> <Header Text="End Date" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="PROD_ID" Key="PROD_ID" DataType="System.Int32"> <Header Text="Prod" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="SOURCE_PNT_ID" Key="SOURCE_PNT_ID" DataType="System.Int32"> <Header Text="Source Pnt" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="SINK_PNT_ID" Key="SINK_PNT_ID" DataType="System.Int32"> <Header Text="Sink Pnt" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="VOL" Key="VOL" DataType="System.Double"> <Header Text="Vol" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="STRAT_ID" Key="STRAT_ID" DataType="System.Int32"> <Header Text="Strat" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="ACTIVE_DTM" Key="ACTIVE_DTM" DataType="System.DateTime"> <Header Text="Active Date" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="EXPIRY_DTM" Key="EXPIRY_DTM" DataType="System.DateTime"> <Header Text="Expiry Date" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="CREATE_DTM" Key="CREATE_DTM" DataType="System.DateTime"> <Header Text="Create Date" /> </ig:BoundDataField> <ig:BoundDataField Hidden="False" DataFieldName="CREATE_BY" Key="CREATE_BY" DataType="System.String"> <Header Text="Create By" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:Activation Enabled="true" /> <ig:ColumnFixing Enabled="false" /> <ig:ColumnMoving Enabled="true" /> <ig:ColumnResizing Enabled="true" /> <ig:Selection RowSelectType="Single" CellClickAction="Row"> <SelectionClientEvents RowSelectionChanged="selectionChanged" /> </ig:Selection> <ig:RowSelectors> </ig:RowSelectors> <ig:EditingCore> <Behaviors> <ig:CellEditing Enabled="True"> <CellEditingClientEvents EnteredEditMode="enteredEdit" ExitedEditMode="exitedEdit" /> <EditModeActions EnableOnKeyPress="True" MouseClick="Double" /> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="PROD_ID" EditorID="ChildGrid_Prod" /> <ig:EditingColumnSetting ColumnKey="SOURCE_PNT_ID" EditorID="ChildGrid_Pnt" /> <ig:EditingColumnSetting ColumnKey="SINK_PNT_ID" EditorID="ChildGrid_Pnt" /> </ColumnSettings> </ig:CellEditing> </Behaviors> </ig:EditingCore> <ig:Sorting> </ig:Sorting> <ig:Paging PageSize="100"> </ig:Paging> </Behaviors> <EditorProviders> <ig:DropDownProvider ID="ChildGrid_Prod"> <EditorControl ID="EditorControl4" DropDownContainerMaxHeight="200px" EnableAnimations="False" EnableDropDownAsChild="False" DataSourceID="ProdDataSource" ValueField="PROD_ID" TextField="SN" DataKeyFields="PROD_ID" runat="server"> <DropDownItemBinding TextField="SN" ValueField="PROD_ID" /> </EditorControl> </ig:DropDownProvider> <ig:DropDownProvider ID="ChildGrid_Pnt"> <EditorControl ID="EditorControl5" DropDownContainerMaxHeight="200px" EnableAnimations="False" EnableDropDownAsChild="False" DataSourceID="PntDataSource" ValueField="PNT_ID" TextField="SN" runat="server"> <DropDownItemBinding TextField="SN" ValueField="PNT_ID" /> </EditorControl> </ig:DropDownProvider> </EditorProviders> </ig:WebDataGrid>
AgentD5
What objects are valid for 'yourDSArray'? JSON Objects?
Hi HartigenAnthony,
I would suggest using the client binding capabilities of the grid available in 11.1. Set EnableClientRendering="true". Now, you'll have to supply an empty source on the server so that we can render the grid. Then on the client, you can use ajax to fetch your source, apply it to the grid, and bind.
var grid = $find('WDG1');
grid.set_dataSource(yourDSArray);
grid.applyClientBinding();
As an aside, if you wanted to add a row completely on the client, you again would have to use client rendering. You would need to add the new object to your source and reapply client binding. If you use grid.get_rows().add(itemArray), the grid will attempt to make its own ajax call to add it to the database and rebind on the server.
regards,
David Young