Implementing 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" %>
<head runat="server">
<title>Stores batch editor with RadGrid client binder</title>
</head>
<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:
 Tip |
| Binder setup: If you are developing inside of the Sitefinity 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 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.
| Tip |
| 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. |