Accessing Gridview Control From a RadDock using JavaScript

4 posts, 0 answers
  1. Rajiv
    Rajiv avatar
    2 posts
    Member since:
    May 2013

    Posted 08 May 2013 Link to this post

    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
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 10 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rajiv
    Rajiv avatar
    2 posts
    Member since:
    May 2013

    Posted 10 May 2013 Link to this post

    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. 
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 May 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top