Suppressing navigation:
When working with links, we should also provide href attribute and set it to "javascript:void(0);" which will ensure our link does not navigate to another page, yet is a valid html element.
Finally, to provide a button or link which will trigger
ItemSelectCommand we need to set the class attribute to "
selectCommand" like in following example:
<input type="button" value="Select" class="selectCommand" />
Multiple classes:
It is possible to set more than one class on the element, meaning that you can still style your buttons or links, regardless of the command declaration. For example, to style the select command button with a "generalButtons" CSS class, we can declare the button as follows:
<input type="button" value="Select" class="selectCommand generalButtons"/>
Subscribing to the client-side commands
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:
- OnClientItemEditCommand
- OnClientItemDeleteCommand
- OnClientItemSelectCommand
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>
<body xmlns:sys="javascript:Sys"xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">
<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.
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.
Automatic deletion:
Client binders also support automatic deletion, meaning that unless you wish to completely handle this command on your own, generally you do not need to subscribe to ItemDeleteCommand event in order to delete an item.