For developers: Delete generic collection binder items
Like all other client binders, GenericCollectionBinder supports two modes of deleting items: automatic and manual deletion. If all you need to do is delete the item you can use automatic approach; if, on the other hand, you need to perform some logic before the item is deleted or you wish to delete item on your own, you can use manual deletion approach.
In this sample, we are going to create a table with two columns and demonstrate both approaches for deleting items.
Performance considerations:
The sample code in this article is to be used only as an educational tool. RadGridBinder generally performs better with tabular representation of data and it is advisable to use it instead of GenericCollectionBinder.
Automatic deletion of items
In case you are not familiar with the GenericCollectionBinder control we suggest you read this article before proceeding.
The complete implementation of the GenericCollectionBinder with automatic deletion looks like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StoresAutomaticDeletion.aspx.cs" Inherits="StoresAutomaticDeletion" %>
<%@ 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>Automatic deletion of Stores with Generic Collection client binder</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>
<table id="storesTable" runat="server">
</table>
<sitefinity:GenericCollectionBinder id="storesBinder" runat="server"
TargetId="storesTable"
ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
BindOnLoad="true"
AllowAutomaticDelete="true"
DataKeyNames="Id"
DataMembers="Name, Id">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer1" runat="server" RenderContainer="false" TemplateHolderTag="table">
<tr>
<td>
{{Name}}
</td>
<td>
<input type="button" value="Delete" class="deleteCommand" />
</td>
</tr>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:GenericCollectionBinder>
</body>
</html>
Similarly to the FormBinder, all we need to do in order to enable the automatic deletion feature is place an HTML element with the class "deleteCommand" inside of the binder container and set theAllowAutomaticDelete of the binder to true. When the user clicks on this element, GenericCollectionBinder will automatically delete the item and rebind the GenericCollection.
<input type="button" value="Delete" class="deleteCommand" />
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.
Manual deletion of items
In situations in which you need to perform some additional processing before deletion or want to take care of deleting on your own, you can take advantage of the manual deletion of items. The whole implementation of this approach looks like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StoresManualDeletion.aspx.cs" Inherits="StoresManualDeletion" %>
<%@ 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>Manual deletion of stores with Generic Collection client binder</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>
<table id="storesTable" runat="server">
</table>
<sitefinity:GenericCollectionBinder id="storesBinder" runat="server"
TargetId="storesTable"
ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
BindOnLoad="true"
OnClientItemDeleteCommand="StoreDeleteCommand"
DataKeyNames="Id"
DataMembers="Name, Id">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer1" runat="server" RenderContainer="false" TemplateHolderTag="table">
<tr>
<td>
{{Name}}
</td>
<td>
<input type="button" value="Delete" class="deleteCommand" />
</td>
</tr>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:GenericCollectionBinder>
<script type="text/javascript">
function StoreDeleteCommand(sender, args) {
if (confirm('Are you sure you want to delete this store?')) {
var key = args.get_key();
sender.DeleteItem(key);
sender.DataBind();
}
}
</script>
</body>
</html>
Notice how in the sample which demonstrates the binding of data with GenericCollectionBinder we have used SELECT element as the target and in this sample we are using TABLE element as the target. It is this flexibility that makes this binder generic.
Just as we have done this with RadGridBinder or FormBinder, we are taking advantage of client binder events. First in the declaration of the binder we are subscribing to the OnClientItemDeleteCommand event and instructing the binder to call StoreDeleteCommand javascript function just before the item is deleted:
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:GenericCollectionBinder id="storesBinder" runat="server"
TargetId="storesTable"
ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
BindOnLoad="true"
OnClientItemDeleteCommand="StoreDeleteCommand"
DataKeyNames="Id"
DataMembers="Name, Id">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer1" runat="server" RenderContainer="false" TemplateHolderTag="table">
<tr>
<td>
{{Name}}
</td>
<td>
<input type="button" value="Delete" class="deleteCommand" />
</td>
</tr>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:GenericCollectionBinder>
Then we proceed to implement the StoreDeleteCommand function as follows:
function StoreDeleteCommand(sender, args) {
if (confirm('Are you sure you want to delete this store?')) {
var key = args.get_key();
sender.DeleteItem(key);
sender.DataBind();
}
}
Then we prompt the user to confirm if she indeed wishes to delete this item. If she confirms, we get the key of the item to be deleted, call the DeleteItem function of the binder and pass it the key of the item to be deleted and finally rebind the GenericCollectionBinder in order to reflect the changes (namely, we have deleted one item).