Accessing Radgrid and Toolbar in nestedviews

[Ryan]

Hello all,

I have a RadGrid (RadGrid1) with a nestedviewtemplate. In the template, I have a RadToolbar (RadToolBar1) and another RadGrid (RadGrid2). I have set up the data sources and the grid works fine and shows the appropriate child items in the second RadGrid.

My problem is referencing the RadToolbar and the two RadGrids clientside using javascript. When a user selects an option from the RadToolbar1, I need to get row number of RadGrid1 and a reference to RadToolbar1 and RadGrid2 which is inside the nestedviewte,plate.

I have look at many many forum articles and demos and cannot seem to get the correct clientside code. I have included my code below.

Any help would be greatly appreciated.

Thanks
Ryan

<%

@ Page Language="VB" AutoEventWireup="false" CodeFile="gridtest.aspx.vb" Inherits="parkingdashboard" %>

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

head runat="server">

 

 

<title></title>

 

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

 

</

 

head>

 

<

 

body>

 

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

 

<script type="text/javascript">

 

 

function OnClickToolBar(sender, args) {

 

 

var nGrid = $find("<%= RadGrid1.ClientID %>");

 

 

var nMasterTable = nGrid.get_masterTableView();

 

 

var nNested = nMasterTable.get_dataItems()[0].get_nestedViews();

 

 

alert(nNested[0].get_id());

 

 

if (args.get_item().get_value() == 'showcustomerid') {

 

alert(

"Toolbar Select: CustomerID");

 

}

 

else if (args.get_item().get_value() == 'showorderid') {

 

alert(

"Toolbar Select: OrderID");

 

}

 

else if (args.get_item().get_value() == 'showlinkid') {

 

alert(

"Toolbar Select: LinkID");

 

}

 

else {

 

alert(

"Toolbar Select: UnknownID");

 

}

}

 

</script>

 

 

</telerik:RadCodeBlock>

 

 

<form id="form1" runat="server">

 

 

<table align="left" cellpadding="5" cellspacing="0">

 

 

<tr>

 

 

<td>

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"

 

 

Skin="Windows7" AllowSorting="True">

 

<

 

MasterTableView AutoGenerateColumns="False" DataKeyNames="customerid"

 

 

DataSourceID="SqlDataSource1" Width="98%">

 

 

<NestedViewTemplate>

 

 

<table align="left" cellpadding="5" cellspacing="0">

 

 

<tr>

 

 

<td>

 

 

<asp:Label ID="Label1" runat="server" Visible="false" Text='<%# Eval("customerid") %>'></asp:Label>

 

 

 

<asp:SqlDataSource ID="SqlDataSource2"

 

 

ConnectionString="<%$ ConnectionStrings:usmasondataConnectionString %>" SelectCommand="SELECT * FROM [aaOrder] WHERE ([customer_id] = @customer_id)"

 

 

runat="server">

 

 

<SelectParameters>

 

 

<asp:ControlParameter ControlID="Label1" DefaultValue="0" Name="customer_id"

 

 

PropertyName="Text" Type="Int32" />

 

 

</SelectParameters>

 

 

</asp:SqlDataSource>

 

 

<telerik:RadToolBar ID="RadToolBar1" Runat="server"

 

 

onclientbuttonclicked="OnClickToolBar" Skin="Office2007" Width="100%">

 

 

<Items>

 

 

<telerik:RadToolBarDropDown runat="server" Text="Show">

 

 

<Buttons>

 

 

<telerik:RadToolBarButton runat="server" Text="Show OrderID"

 

 

Value="showorderid">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Show CustomerID"

 

 

Value="showcustomerid">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Show LinkID" Value="showlinkid">

 

 

</telerik:RadToolBarButton>

 

 

</Buttons>

 

 

</telerik:RadToolBarDropDown>

 

 

</Items>

 

 

</telerik:RadToolBar>

 

 

<telerik:RadGrid ID="RadGrid2" runat="server" AllowPaging="True"

 

 

DataSourceID="SqlDataSource2" GridLines="None" Skin="Office2007">

 

 

<MasterTableView AutoGenerateColumns="False" DataKeyNames="id"

 

 

DataSourceID="SqlDataSource2">

 

 

<CommandItemSettings ExportToPdfText="Export to Pdf" />

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="id" DataType="System.Int32" HeaderText="id"

 

 

ReadOnly="True" SortExpression="id" UniqueName="id">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="customer_id" DataType="System.Int32"

 

 

HeaderText="customer_id" SortExpression="customer_id" UniqueName="customer_id">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="location" HeaderText="location"

 

 

SortExpression="location" UniqueName="location">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="purchasedate" DataType="System.DateTime"

 

 

HeaderText="purchasedate" SortExpression="purchasedate"

 

 

UniqueName="purchasedate">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="link_id" DataType="System.Int32"

 

 

HeaderText="link_id" SortExpression="link_id" UniqueName="link_id">

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

</MasterTableView>

 

 

<ClientSettings>

 

 

<Selecting AllowRowSelect="True" />

 

 

</ClientSettings>

 

 

</telerik:RadGrid>

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</NestedViewTemplate>

 

<

 

CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

 

<

 

RowIndicatorColumn>

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

RowIndicatorColumn>

 

<

 

ExpandCollapseColumn Visible="True">

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="customerid" DataType="System.Int32"

 

 

HeaderText="CustID" ReadOnly="True" SortExpression="customerid"

 

 

UniqueName="customerid">

 

 

<ItemStyle Width="80px" Wrap="False" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="customername" HeaderText="Name"

 

 

SortExpression="customername" UniqueName="customername">

 

 

<ItemStyle Width="200px" Wrap="False" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="customercity" HeaderText="City"

 

 

SortExpression="customercity" UniqueName="customercity">

 

 

<ItemStyle Width="200px" Wrap="False" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="customerstate" HeaderText="State"

 

 

SortExpression="customerstate" UniqueName="customerstate">

 

 

<ItemStyle Width="80px" Wrap="False" />

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

</

 

MasterTableView>

 

 

<ClientSettings EnableAlternatingItems="False" EnableRowHoverStyle="True">

 

 

<Selecting AllowRowSelect="True" />

 

 

</ClientSettings>

 

 

</telerik:RadGrid>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<asp:SqlDataSource ID="SqlDataSource1"

 

 

ConnectionString="<%$ ConnectionStrings:usmasondataConnectionString %>" SelectCommand="SELECT * FROM [vaaCustomer]"

 

 

runat="server">

 

 

</asp:SqlDataSource>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

</telerik:RadScriptManager>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

 

 

</telerik:RadAjaxManager>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td>

 

 

&nbsp;</td>

 

 

</tr>

 

 

</table>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

[Iana Tsolova]

Hi Ryan,

Try the sample below and see if it works for you:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function RadToolBarButtonClick(sender, eventArgs) {
            var toolBar = sender;
            var grid = $find(sender.get_id().replace("RadToolBar1", "RadGrid2"));
            alert(grid);
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView HierarchyDefaultExpanded="true">
        <NestedViewTemplate>
            <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicked="RadToolBarButtonClick">
                <Items>
                    <telerik:RadToolBarButton Text="Select">
                    </telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
            <telerik:RadGrid ID="RadGrid2" runat="server" OnNeedDataSource="RadGrid_NeedDataSource">
            </telerik:RadGrid>
        </NestedViewTemplate>
    </MasterTableView>
</telerik:RadGrid>

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = new object[] { 1, 2, 3 };
}

Regards,
Iana
the Telerik team