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
>
<
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
>
<
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
>