In order to fire these commands you need to place in the BinderContainer a button or link with a command name specified in a class attribute.
To provide a button or link which will trigger ItemEditCommand we need to set the class attribute to "editCommand" like in following example:
If we are to provide a button or a link which triggers ItemDeleteCommand we need to set the class attribute to "deleteCommand" like in the following example:
Finally, to provide a button or link which will trigger ItemSelectCommand we need to set the class attribute to "selectCommand" like in following example:
When we place a button or a link in a BinderContainer with one of the commands, we ensure that the given command event will be fired upon the clicking of that element. However, that is of very little use if we do not handle those events. In order to handle these commands we need to subscribe to them. All client binder server controls provide following properties which allow you to instruct binder which javascript function ought to be called when event is fired:
The following example demonstrates the usage of all three commands with the FormBinder:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Stores.aspx.cs" Inherits="Stores" %>
<%@ 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 with Generic Collection 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>
<select id="storesDropDown" runat="server">
</select>
<input type="button" onclick="OpenStore();" value="Open" />
<sitefinity:GenericCollectionBinder id="storesBinder"runat="server"
TargetId="storesDropDown"
ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
BindOnLoad="true"
DataKeyNames="Id"
DataMembers="Name, Id">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer1"runat="server" RenderContainer="false" TemplateHolderTag="SELECT">
<option value="{{Id}}">{{Name}}</option>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:GenericCollectionBinder>
<div id="storeForm" runat="server">
</div>
<sitefinity:FormBinder ID="storeFormBinder" runat="server"
TargetId="storeForm"
ServiceUrl="~/Sitefinity/Services/Commerce/Stores.svc"
BindOnLoad="false"
OnClientItemEditCommand="OnClientEdit"
OnClientItemDeleteCommand="OnClientDelete"
OnClientItemSelectCommand="OnClientSelect"
DataKeyNames="Id"
DataMembers="Id, Name, Description">
<Containers>
<sitefinity:BinderContainer ID="BinderContainer2"runat="server">
<fieldset>
<legend>Store info:</legend>
<ul>
<li>
Store name: {{Name}}
</li>
<li>
Store description: {{Description}}
</li>
</ul>
</fieldset>
<input type="button" value="Edit"class="editCommand" />
<input type="button" value="Select"class="selectCommand" />
<a sys:href="javascript:void(0);"class="deleteCommand">Delete</a>
</sitefinity:BinderContainer>
</Containers>
</sitefinity:FormBinder>
<script type="text/javascript">
function OpenStore() {
var storeId = $('#' + '<%= storesDropDown.ClientID %>').val();
var storeFormBinder = $find('<%= storeFormBinder.ClientID %>');
storeFormBinder.get_globalDataKeys()["Id"] = storeId;
storeFormBinder.DataBind();
}
function OnClientEdit(sender, commandArgs) {
alert('item edit');
}
function OnClientDelete(sender, commandArgs) {
alert('item delete');
}
function OnClientSelect(sender, commandArgs) {
alert('item select');
}
</script>
</body>
</html>
We can see that the signatures of javascript functions OnClientEdit, OnClientDelete and OnClientSelect have two arguments: sender and commandArgs.
When event is fired, ClientBinder will send you the reference to itself as a first argument ("sender") and an instance of CommandEventArgs class which information about the command ("commandArgs") which you can use to handle the command event.