Grid Client side insert/update/delete

[Manoj Bhatty]

Hi All,

I'm evaluating 3rd party controls for my client's websites and wanted to find out if Telerik offers one particular functionality that is needed :-

We have a templated grid that contains various types of controls in different columns - say DatePicker, DropDownList, Numeric textbox etc. We want to be able to insert/update/delete rows in it entirely on the client side. When the user clicks "add new row", for example, a new row will be added with the DatePickers, DropDownList or whatever else is defined in the template. No changes are saved to the database at this point and once the user is done, he can click a "Save" button that will iterate the grid and save the changes.

So, basically the main problem is keeping the template of the grid while adding/editing rows from the client side (no ajax etc) and then be able to iterate it on server side. Can Telerik grid do this?

Thank You,
Manoj

[Princy]

Hello Manoj,

Check out the following online demo link which illustrates how to insert/ update/delete grid records client-side using an external form and bind the grid on the client and the source for the grid is generated using a web service.
Client-side Insert/Update/Delete
 Finally, on clicking the Save button you can loop through grid rows and save the changes to the database.

Thanks
Princy.

[Manoj Bhatty]

Hi Princy,

Thanks for the answer. The form approach works well but is it also possible to add an empty row inside the grid when user wants to add a new record?

Our goal here is just to provide a more windows like functionality where the user clicks "Add New Record" button and an empty row is added in the grid that user can fill up.

I can also make it work via Ajax postbacks and adding a new row to the datasource (DataTable in this case) and rebinding but I wonder that since we don't want to save the changes till user has added all the rows, it'd be much more responsive to not make any calls to the server at all till he clicks "Save" button.

So, is adding empty rows to the grid entirely on the client possible?

Thank You,
Manoj

[Christopher]

I have been looking for the same thing and need help.
The client insert/update/delete and batch demos insert a record by calling the Web service to update the datasource server-side and rebind.This is not what I'm looking for. I want all client-side operations like insert in an inline row and then do a batch update later.
I got as far as shown below but get a server-side error about not being able to insert when not in insert mode. I don't want the client-side insert call to cause a postback at all.

    <telerik:RadScriptBlock ID="sb1" runat="server">
    <script language="javascript" type="text/javascript">
      function RequestStart(sender, args)
      {
          if (args.get_eventTarget().indexOf("AddNewRecordButton") >= 0)
          {
              args.set_enableAjax(false);
              var grid = $find("<%= EnumDetails.ClientID %>");
              var masterTableView = grid.get_masterTableView();
              masterTableView.insertItem();
          }
          if (args.get_eventArgument().indexOf("PerformInsert") >= 0)
          {
              args.set_enableAjax(false);
          }
      }
    </script>
    </telerik:RadScriptBlock>

<telerik:RadGrid runat="server" ID="EnumDetails" AutoGenerateColumns="False" CellSpacing="0"
    GridLines="None" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True"
    AutoGenerateDeleteColumn="True" OnNeedDataSource="EnumDetails_NeedDataSource">
    <MasterTableView DataKeyNames="FileParameterEnumId" CommandItemDisplay="Top">
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="PushButton" FilterControlAltText="Filter EditCommandColumn column">
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn FilterControlAltText="Filter FileParameterEnumValue column"
                UniqueName="FileParameterEnumValue">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn FilterControlAltText="Filter FileParameterEnumDescription column"
                UniqueName="FileParameterEnumDescription">
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
    </HeaderContextMenu>
</telerik:RadGrid>

[Radoslav]

Hello,

Unfortunately the RadGrid does not support the desired functionality. The RadGrid is a bound control and it shows the data from its data source. Adding rows only on the client-side without a hit on the server and adding the new rows into the grid's data source is kind of html injection and it does not correspond with the RadGrid main functionality. Also the new added rows will not be able to handle the main grid functionalities like editing, sorting, paging, filtering etc.
You can add new record on the client only when the control is bound client side, however the call to the web service is required. This is demonstrated in the following example:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/insertupdatedelete/defaultcs.aspx
However in this case you could add only one record at a time.

I hope this helps.

Kind regards,
Radoslav
the Telerik team