This article provides only sample code that demonstrates invoking and handling commands with FormBinder. For detailed explanation please consult Invoking and handling binder item commands article.
<%@ 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(commandArgs.get_itemIndex());
}
function OnClientDelete(sender, commandArgs) {
alert(commandArgs.get_itemIndex());
}
function OnClientSelect(sender, commandArgs) {
alert(commandArgs.get_itemIndex());
}
</script>
</body>
</html>