RadToolBar as Command Item
This example demonstrates how to use RadToolBaras a custom RadGridCommand item container. The buttons in the toolbar have CommandName values set which are internally 'recognized' by the grid when its event bubbling mechanism is triggered (after pressing a button from the command item toolbar). Thus the respective command is executed without any extra coding.
Below is a code extraction from the relevant online demo in the RadGrid:
function onToolBarClientButtonClicking(sender, args) {
var button = args.get_item();
if (button.get_commandName() == "DeleteSelected") {
args.set_cancel(!confirm('Delete all selected customers?'));
}
}
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"
DataSourceID="SqlDataSource1" Width="97%" AllowSorting="True" AutoGenerateColumns="true"
AllowPaging="True" GridLines="None" runat="server" ShowFooter="True" AllowMultiRowSelection="True"
PageSize="7" AllowMultiRowEdit="True" HorizontalAlign="NotSet" OnItemDeleted="RadGrid1_ItemDeleted">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView Width="100%" GridLines="None" CommandItemDisplay="Top" DataSourceID="SqlDataSource1"
EditMode="InPlace" HorizontalAlign="NotSet" DataKeyNames="CustomerID" AllowAutomaticInserts="True">
<CommandItemTemplate>
<telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" OnClientButtonClicking="onToolBarClientButtonClicking">
<Items>
<telerik:RadToolBarButton Text="Edit selected" CommandName="EditSelected" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Edit.gif"
Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Update" CommandName="UpdateEdited" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Update.gif"
Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Cancel editing" CommandName="CancelAll" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Cancel.gif"
Visible='<%# RadGrid1.EditIndexes.Count > 0 || RadGrid1.MasterTableView.IsItemInserted %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Add new" CommandName="InitInsert" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/AddRecord.gif"
Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Add this Customer" CommandName="PerformInsert" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Insert.gif"
Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Delete selected customers" CommandName="DeleteSelected"
ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Delete.gif">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="Refresh customer list" CommandName="RebindGrid" ImageUrl="~/ToolBar/Examples/ApplicationScenarios/GridCommandItem/Images/Refresh.gif">
</telerik:RadToolBarButton>
</Items>
</telerik:RadToolBar>
</CommandItemTemplate>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="True" EnableDragToSelectRows="True" />
</ClientSettings>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle] FROM [Customers]" runat="server"
DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = ?" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle]) VALUES (?, ?, ?, ?)"
UpdateCommand="UPDATE [Customers] SET [CompanyName] = ?, [ContactName] = ?, [ContactTitle] = ? WHERE [CustomerID] = ? AND [CompanyName] = ? AND [ContactName] = ? AND [ContactTitle] = ?">
<UpdateParameters>
<asp:Parameter Name="CompanyName" Type="String" />
<asp:Parameter Name="ContactName" Type="String" />
<asp:Parameter Name="ContactTitle" Type="String" />
<asp:Parameter Name="original_CustomerID" Type="String" />
<asp:Parameter Name="original_CompanyName" Type="String" />
<asp:Parameter Name="original_ContactName" Type="String" />
<asp:Parameter Name="original_ContactTitle" Type="String" />
</UpdateParameters>
<DeleteParameters>
<asp:Parameter Name="original_CustomerID" Type="String" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="CustomerID" Type="String" />
<asp:Parameter Name="CompanyName" Type="String" />
<asp:Parameter Name="ContactName" Type="String" />
<asp:Parameter Name="ContactTitle" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
protected void RadGrid1_ItemDeleted(object source, GridDeletedEventArgs e)
{
e.ExceptionHandled = true;
}
Protected Sub RadGrid1_ItemDeleted(ByVal source As Object, ByVal e As GridDeletedEventArgs)
e.ExceptionHandled = True
End Sub
Additional information about the event bubbling mechanism of RadGrid for ASP.NET AJAX can be found here: Command reference