[Solved] Accessing Gridview Control From a RadDock using JavaScript

[Rajiv]

I have a gridview im using to populate a chart. I use javascript to access the gridview to provide the data for the chart. The gridview sits in the main content holder for an aspx page.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <asp:Panel ID="Panel3" runat="server"><br>
            <asp:GridView ID="MyGridView" runat="server" CssClass="GridViewStyle" 
GridLines="None" Width="100%" PageSize="100">
 <AlternatingRowStyle CssClass="AltRowStyle" /><br>
                <EditRowStyle CssClass="EditRowStyle" />
 <EmptyDataRowStyle CssClass="EmptyRowStyle" /><br> 
                <HeaderStyle CssClass="HeaderStyle" /><br> 
                <PagerStyle CssClass="PagerStyle" /><br>   
            <RowStyle CssClass="RowStyle" HorizontalAlign="Center" VerticalAlign="Middle" />
         <SelectedRowStyle CssClass="SelectedRowStyle" /><br> 
           </asp:GridView>
</asp:Panel>
</asp:Content>

var rows = $("#MainContent_MyGridView tr:gt(0)");//This is where I reference the gridview now.
var series = {
id: 'series',
name: 'MySeriesName',
data: []
}
 rows.each(function (index) {
 var myFloat = parseFloat($("td:nth-child(2)", this).text());
 var myString = $("td:nth-child(1)", this).text();
series.data.push([myString, myFloat]);
});

I looked into using the raddock control and having the chart and gridview both display within a dock but when I have the gridview Inside the dock I cannot access it from within my .js file to get the data.

<telerik:RadDockZone Runat="server">
        <telerik:RadDock ID="RadDock1" runat="server">                   
        <ContentTemplate>             
    <div id="ChartRendersHere" style="min-width: 400px; height: 400px; margin: 0 auto"></div>             
        <asp:Panel ID="Panel2" runat="server">
            <asp:GridView ID="MyGridView" runat="server" CssClass="GridViewStyle" 
                GridLines="None" Width="100%" PageSize="100">
                <AlternatingRowStyle CssClass="AltRowStyle" />
                <EditRowStyle CssClass="EditRowStyle" />
                <EmptyDataRowStyle CssClass="EmptyRowStyle" />
                <HeaderStyle CssClass="HeaderStyle" />
                <PagerStyle CssClass="PagerStyle" />
                <RowStyle CssClass="RowStyle" HorizontalAlign="Center" VerticalAlign="Middle" />
                <SelectedRowStyle CssClass="SelectedRowStyle" />
            </asp:GridView> <asp:Panel ID="Panel1" runat="server">            
            </asp:Panel>           
        </asp:Panel>  
        </ContentTemplate>
         </telerik:RadDock>
        </telerik:RadDockZone>


Could someone suggest a way to reference this control if possible?

Thanks

[Dobromir]

Hi Rajiv,

RadDock is a NamingContainer and the ClientID's for its child controls are altered to respond correctly, thus in order to access a control nested inside RadDock with JavaScript you need to use its ClientId, e.g.:

var rows = $("#"+<%=ParentControl.FindControl('MyGridView').ClientID%> + " tr:gt(0)");

Kind regards,
Dobromir
the Telerik team

[Rajiv]

Thanks for the input. I have also tried accessing the control in that manner. 

var rows = $("#"+ <%=RadDock1.FindControl('MyGridView').ClientID%> + " tr:gt(0)");

Still no success though. Is there something missing above? I do receive warning about missing expression or incorrect syntax when using that line of code. At the less/greater than signs It shows the warning. 

[Slav]

Hello Rajiv,

In your first post you mentioned that you are referencing the grid view in a separate JavaScript file. This means that you will not be able to use the approach from your last response, because it relies on server-side code and can be used only on an ASPX page.

You can try the following approach in order to access the inner grid view in an external JavaScript file:
1. Set a handler for the client-side event OnClientInitialize of the dock that contains the grid view:

<telerik:RadDock ID="RadDock1" runat="server" OnClientInitialize="OnClientInitialize">
    <ContentTemplate>
        <div id="ChartRendersHere" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
        <asp:Panel ID="Panel2" runat="server">
            <asp:GridView ID="MyGridView" runat="server" CssClass="GridViewStyle"
                GridLines="None" Width="100%" PageSize="100">
                <AlternatingRowStyle CssClass="AltRowStyle" />
                <EditRowStyle CssClass="EditRowStyle" />
                <EmptyDataRowStyle CssClass="EmptyRowStyle" />
                <HeaderStyle CssClass="HeaderStyle" />
                <PagerStyle CssClass="PagerStyle" />
                <RowStyle CssClass="RowStyle" HorizontalAlign="Center" VerticalAlign="Middle" />
                <SelectedRowStyle CssClass="SelectedRowStyle" />
            </asp:GridView>
            <asp:Panel ID="Panel1" runat="server">
            </asp:Panel>
        </asp:Panel>
    </ContentTemplate>
</telerik:RadDock>

2. Handle the event in the JavaScript file:

function OnClientInitialize(sender, args) {
    var gridView = sender.get_contentContainer().getElementsByTagName("table")[0];
}

The function get_contentContainer returns the content container of the dock and getElementsByTagName retrieves the table element of the grid view inside.
 
All the best,
Slav
the Telerik team