This is a migrated thread and some comments may be shown as answers.

[Solved] RadGrid Client Side Add/Update/Delete

2 Answers 260 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Neeta asked on 28 Aug 2009, 10:37 PM

Hi,

I have a Radgrid with add/update/delete custom buttons on top of the grid. I can invoke the clientside edit of a row using this script on rowclick or rowdblclick.

editedRow = eventArgs.get_itemIndexHierarchical();
$find("<%= RadGrid1.MasterTableView.ClientID %>").editItem(editedRow);

However, I am unable to persist the changes to the server when I use

$find("<%= RadGrid1.MasterTableView.ClientID %>").updateItem(editedRow);

Can anyone explain what exactly happens when updateItem is called. Does the UpdateCommand get fired on the server?

Here is my code

The Script BLOCK :

<telerik:RadScriptManager ID="ScriptManager" runat="server" />
         <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

                <script type="text/javascript">

                    var hasChanges = false;
                    var editedRow;
                    var editedRowId;
                    var editButton;



                    function RowClick(sender, eventArgs)
                    {

                        editedRow = eventArgs.get_itemIndexHierarchical();
                        var grid = $find("<%= RadGrid1.ClientID %>");
                        var masterTable = grid.get_masterTableView();
                        if (editedRow && hasChanges) {
                            if (confirm("Update changes?")) {
                                hasChanges = false;
                                 $find("<%= RadGrid1.MasterTableView.ClientID %>").updateItem(editedRow);
                                editButton.set_enabled(true);

                            }
                            else {
                                hasChanges = true;
                            }
                        }

                  }

                  function onToolButtonClick(sender, args) {
                      editButton = args.get_item();
                      var commandName = editButton.get_commandName();
                      var grid = $find("<%= RadGrid1.ClientID %>");
                      alert("Selected Item Count: " + grid.get_selectedItems().length);
                      switch (commandName)
                      {
                      case "AddSelectedItem":

                              grid.get_masterTableView().insertItem();
                              break;
                          case "EditSelectedItem":
                              editButton.set_enabled(false);
                              grid.get_masterTableView().editItem(editedRow);
                              editedRowId = editedRow;
                              hasChanges = true;
                              break;
                      case "DeleteSelectedItem":
                          editButton.set_enabled(!confirm('Delete selected item?'));
                          break;
                      }
                  }


                </script>

            </telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            DefaultLoadingPanelID="RadAjaxLoadingPanel1">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="RadGrid1">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="Label1" />
                       <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>

       <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >
            <img alt="Loading..." src="Images/Toolbar/anibusy.gif" />
       </telerik:RadAjaxLoadingPanel>


ToolBar Control For Single Select:

         <br /><br />
            <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicked="onToolButtonClick" AutoPostBack="false">
                <Items>
                     <telerik:RadToolBarButton runat="server" Text="Create Provider Audit Chart" CommandName="AddSelectedItem" PostBack=false ImageUrl="~/Images/Toolbar/select.gif" >
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton runat="server" Text="Edit" PostBack="False" CommandName="EditSelectedItem" ImageUrl="~/Images/Toolbar/edit.gif" >
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton runat="server" Text="Delete" CommandName="DeleteSelectedItem" ImageUrl="~/Images/Toolbar/delete.gif">
                    </telerik:RadToolBarButton>

                </Items>
            </telerik:RadToolBar>
         <br /><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br /><br />
         Single Select Grid:
         <br /><br />
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" OnItemUpdated="RadGrid1_ItemUpdated" >
                <MasterTableView CommandItemDisplay="Top" CommandItemStyle-CssClass="RadGrid_MonarchSkin" ClientDataKeyNames="CustomerID" EditMode="InPlace" ShowHeader=true >
                <Columns>
                        <telerik:GridBoundColumn UniqueName="CustomerID" DataField="CustomerID" HeaderText="Customer ID" Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="CompanyName" ColumnEditorID="GridTextBoxColumnEditor1" DataField="CompanyName" HeaderText="CompanyName" >
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="ContactName" ColumnEditorID="GridTextBoxColumnEditor2" DataField="ContactName" HeaderText="ContactName" >
                        </telerik:GridBoundColumn>

                    </Columns>

                </MasterTableView>
                <ClientSettings >
                    <ClientEvents OnRowClick ="RowClick" />
                </ClientSettings>

            </telerik:RadGrid>

[Solved] RadGrid Client Side Add/Update/Delete

2 Answers, 1 is accepted