Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
300
Someone please post an example of adding a row using CSOM
posted

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?

Parents
  • 33839
    posted

    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

Reply Children
  • 300
    posted in reply to Anthony

    Getting errors--

    $(this.tableTemplate).render is not a function



    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>