Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

For developers: Implement batch editing

In this article we will examine how to use RadGridBinder to implement a batch editor for data.

Once we are finished, our batch editor will look like this:

Implementing a batch editor with RadGridBinder

The code for complete implementation looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StoresGrid.aspx.cs" Inherits="StoresGrid" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title>Stores batch editor with RadGrid client binder</title>
</head>
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
    <form id="form1" runat="server">
 
        <asp:ScriptManager ID="scriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/Sitefinity/Scripts/MicrosoftAjax.js" />
                <asp:ScriptReference ScriptMode="Inherit" Path="~/Sitefinity/Scripts/MicrosoftAjaxTemplates.js" />
                <asp:ScriptReference ScriptMode="Inherit" Path="~/Sitefinity/Scripts/MicrosoftAjaxAdoNet.js" />
            </Scripts>
        </asp:ScriptManager>
 
        <input type="button" value="Save changes" onclick="SaveChanges();" />        
        <br />
        <telerik:RadGrid id="storesGrid" runat="server" allowpaging="True" AllowSorting="true" PageSize="10">
            <MasterTableView PageSize="10">
                <Columns>
                    <telerik:GridClientSelectColumn></telerik:GridClientSelectColumn>
                    <telerik:GridTemplateColumn HeaderText="Name" SortExpression="Name" UniqueName="BinderContainer0"></telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Description" SortExpression="Description" UniqueName="BinderContainer1"></telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />
            </ClientSettings>
        </telerik:RadGrid>
 
        <sitefinity:RadGridBinder id="storesBinder" runat="server" 
                    ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
                    BindOnLoad="true"
                    TargetId="storesGrid"
                    OnClientDataBound="StoresGridDataBound"
                    DefaultSortExpression="Name"
                    DataMembers="Id, Name, Description"
                    DataKeyNames="Id">
                <Containers>
                    <sitefinity:BinderContainer runat="server">
                        <input type="text" name="Name" sys:value="{{Name}}" />
                    </sitefinity:BinderContainer>
                    <sitefinity:BinderContainer runat="server">
                        <textarea name="Description">{{Description}}</textarea>
                    </sitefinity:BinderContainer>
                </Containers>
        </sitefinity:RadGridBinder>
 
        <script type="text/javascript">
            function SaveChanges() {
                var storesBinder = $find('<%= storesBinder.ClientID %>');
                storesBinder.SaveChanges();
            }
            function StoresGridDataBound(sender, args) {
                var storesBinder = $find('<%= storesBinder.ClientID %>');
                var keys = storesBinder.get_dataKeys();
            }
        </script>
    </form>
</body>
</html>

The sample above was implemented as a standard stand-alone ASP.NET page.

If you inspect the RadGridBinder declaration you will notice that we have placed the HTML input elements in the containers and set their name attributes to the name of the properties they represent:

Binder setup: If you are developing inside of the Sitefinity CMS admin area, it is not necessary to declare ScriptManager control or add anything to the body element, since all this has been implemented on the base Sitefinity CMS admin page.

<sitefinity:RadGridBinder id="storesBinder" runat="server" 
      ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
      BindOnLoad="true"
      TargetId="storesGrid"
      OnClientDataBound="StoresGridDataBound"
      DefaultSortExpression="Name"
      DataMembers="Id, Name, Description"
      DataKeyNames="Id">
      <Containers>
            <sitefinity:BinderContainer runat="server">
                  <input type="text" name="Name" sys:value="{{Name}}" />
            </sitefinity:BinderContainer>
            <sitefinity:BinderContainer runat="server">
                  <textarea name="Description">{{Description}}</textarea>
            </sitefinity:BinderContainer>
      </Containers>
</sitefinity:RadGridBinder>

To display the existing values, we have also set the value and inner HTML properties to respective values ({{Name}} and {{Description}}). Now, all we need to do is provide a user with a way to trigger the save function. We've done this by placing a button above the grid:

<input type="button" value="Save changes" onclick="SaveChanges();" />

And then implement the SaveChanges javascript function as follows:

function SaveChanges() {
      var storesBinder = $find('<%= storesBinder.ClientID %>');
      storesBinder.SaveChanges();
}

As you can see, the implementation is trivial. All we've done is got the reference to the binder's client side component and called SaveChanges method on it.

Common events: As any other client binder, RadGrid binder exposes OnClientSaving and OnClientSaved events which we can use to perform some custom logic just before item is saved or just after it has been saved.

Back To Top

Next: For developers: Implement batch saving