For developers: Delete RadGrid binder items
RadGridBinder control provides two simple ways of deleting grid items: automatic and manual. When all that is needed is to delete an item, automatic mode should be used. If additional processing before the actual delete should be performed, it is possible to hook up in the OnClientDeleting event and cancel the default behavior of the RadGridBinder and implement custom logic.
Regardless of the implementation path you take, the deleting is always triggered by the ButtonColumn in the Telerik RadGrid which has the command name set to Delete.
Deleting items automatically
Since all Sitefinity CMS WCF RESTful services follow the same pattern, client binder controls are capable to perform all the logic for you. Let us first consider the example of automatically deleting items.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StoresGridAutomaticDelete.aspx.cs" Inherits="StoresGridAutomaticDelete" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<head id="Head1" runat="server">
<title>RadGrid client binder - automatic delete</title>
</head>
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*" xmlns:code="http://schemas.microsoft.com/aspnet/code>">
<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>
<telerik:RadGrid id="storesGrid" runat="server" allowpaging="True" AllowSorting="true" PageSize="10">
<MasterTableView PageSize="10">
<Columns>
<telerik:GridButtonColumn ButtonType="PushButton" CommandName="Delete" Text="Delete">
</telerik:GridButtonColumn>
<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"
DefaultSortExpression="Name"
DataMembers="Id, Name, Description"
DataKeyNames="Id">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer1" runat="server">
<strong>{{Name}}</strong>
</sitefinity:BinderContainer>
<sitefinity:BinderContainer ID="BinderContainer2" runat="server">
<strong>{{Description}}</strong>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:RadGridBinder>
</form>
</body>
</html>
The sample above was implemented as a standard stand-alone ASP.NET page.
In order to provide the automatic deleting feature, the only thing we need to do is add the following column to the RadGrid:
<telerik:GridButtonColumn ButtonType="PushButton" CommandName="Delete" Text="Delete">
</telerik:GridButtonColumn>
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.
Note that we have set the CommandName to "Delete" and thus instructed the RadGridBinder to delete the item associated with that row of the grid when the above button is clicked.
Performing manual deletion
Occasionally, you will need more control over how the items are deleted or you will need to perform certain tasks before the items are deleted. In the example below, we are going to prompt the user for the confirmation before we actually delete the item.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StoresGridManualDelete.aspx.cs" Inherits="StoresGridManualDelete" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<head id="Head1" runat="server">
<title>RadGrid client binder - automatic delete</title>
</head>
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*" xmlns:code="http://schemas.microsoft.com/aspnet/code">
<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>
<telerik:RadGrid id="storesGrid" runat="server" allowpaging="True" AllowSorting="true" PageSize="10">
<MasterTableView PageSize="10">
<Columns>
<telerik:GridButtonColumn ButtonType="PushButton" CommandName="Delete" Text="Delete">
</telerik:GridButtonColumn>
<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"
DefaultSortExpression="Name"
OnClientDeleting="StoresBinderDeleting"
DataMembers="Id, Name, Description"
DataKeyNames="Id">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer1" runat="server">
<strong>{{Name}}</strong>
</sitefinity:BinderContainer>
<sitefinity:BinderContainer ID="BinderContainer2" runat="server">
<strong>{{Description}}</strong>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:RadGridBinder>
<script type="text/javascript">
function StoresBinderDeleting(sender, args) {
// cancel the automatic delete
args.set_cancel(true);
// prompt for confirmation
if (confirm('Are you sure you want to delete this store?')) {
var key = args.get_key();
sender.DeleteItem(key);
sender.DataBind();
}
}
</script>
</form>
</body>
</html>
The sample above was implemented as a standard stand-alone ASP.NET page.
Again, we have set the GridButtonColumn with the command name set to "Delete".
<telerik:GridButtonColumn ButtonType="PushButton" CommandName="Delete" Text="Delete">
</telerik:GridButtonColumn>
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.
However, this time, in addition to setting the column, we have subscribed to the OnClientDeleting event of the RadGridBinder:
<sitefinity:RadGridBinder id="storesBinder" runat="server"
ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
BindOnLoad="true"
TargetId="storesGrid"
DefaultSortExpression="Name"
OnClientDeleting="StoresBinderDeleting"
DataMembers="Id, Name, Description"
DataKeyNames="Id">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer1" runat="server">
<strong>{{Name}}</strong>
</sitefinity:BinderContainer>
<sitefinity:BinderContainer ID="BinderContainer2" runat="server">
<strong>{{Description}}</strong>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:RadGridBinder>
And set the "StoresBinderDeleting" function as the function that will be fired before the item is actually deleted. Then, we have implemented a simple java script function as follows (to handle the OnClientDeleting event):
function StoresBinderDeleting(sender, args) {
// cancel the automatic delete
args.set_cancel(true);
// prompt for confirmation
if (confirm('Are you sure you want to delete this store?')) {
var key = args.get_key();
sender.DeleteItem(key);
sender.DataBind();
}
}
RadGridBinder will send us in this event the reference to itself (sender) and some arguments that we can use to handle this event (args).
To stop the execution of the automatic deletion, first we are going to set the cancel property to true. After that we will ask the user to confirm the action, and if the action is confirmed, we will get the key (identity) of the item being deleted. Finally, we will call the DeleteItem function of the binder and pass it the key and rebind the item.