[Solved] jqChart inside nastedview

[Bartłomiej]

Hi,
I have a problem to implement jqChart in my project. Here is the code where i place jqChart:


01.
<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="False" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="False" CellSpacing="0" CssClass="grid_with_column_lines grid_with_narrow_columns" EnableEmbeddedSkins="False" GridLines="None" OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource" OnPageIndexChanged="RadGrid1_PageIndexChanged" OnPageSizeChanged="RadGrid1_PageSizeChanged" OnPreRender="RadGrid1_PreRender" PageSize="30" Skin="SkinISP" Visible="False" PagerStyle-Visible="false" AlternatingItemStyle-Wrap="false" ItemStyle-Wrap="false" OnSortCommand="RadGrid1_SortCommand" >                               

02.         <ClientSettings AllowColumnsReorder="false" Resizing-AllowColumnResize="true" Resizing-AllowResizeToFit="true" Resizing-ResizeGridOnColumnResize="true" Resizing-EnableRealTimeResize="true">

03.            <Scrolling UseStaticHeaders="true" AllowScroll="true" ScrollHeight="650" />                                  

04.        </ClientSettings>

05.       <MasterTableView DataKeyNames="Result_id" ExpandCollapseColumn-Display="false" HierarchyLoadMode="ServerOnDemand" >

06.         <NestedViewTemplate>

07.              <asp:Panel ID="InnerPanel" runat="server" CssClass="innerPanel">

08.                    <asp:Panel ID="PanelXml" runat="server" Visible="false">

09.                        <telerik:RadTabStrip ID="TabStrip1" runat="server" MultiPageID="Multipage1" SelectedIndex="0" ShowBaseLine="true">

10.                            <Tabs>

11.                                <telerik:RadTab runat="server" meta:resourcekey="RadTabXml" PageViewID="PageView1" Text="XML">

12.                                </telerik:RadTab>

13.                                <telerik:RadTab runat="server" meta:resourcekey="RadTabChart" PageViewID="PageView2" Text="Chart">

14.                                </telerik:RadTab>

15.                                <telerik:RadTab runat="server" meta:resourcekey="RadTabChartMW" PageViewID="PageView3"  Text="Chart M(W)">

16.                                </telerik:RadTab>

17.                            </Tabs>

18.                        </telerik:RadTabStrip>

19.                        <telerik:RadMultiPage ID="Multipage1" runat="server" CssClass="multiPage_with_border SelectedIndex="0">

20.                            <telerik:RadPageView ID="PageView1" runat="server">

21.                                <asp:Button ID="btnSaveXmlAsFile" runat="server" CommandName="DownloadXml" CssClass="multiPage_content" meta:resourcekey="btnSaveXmlAsFile" Text="Save"></asp:Button>

22.                               <asp:Label ID="hfXmlText" runat="server" Visible="false" />

23.                               <asp:Xml ID="Xml1" runat="server" TransformSource="~/DisplayXml.xsl"></asp:Xml>

24.                           </telerik:RadPageView>

25.                           <telerik:RadPageView ID="PageView2" runat="server">

26.                          <br />

27.  

28.                          <div id="jqChartSingle"  style="width: 800px; height: 300px; display: block">

29.                          </div> 

30.                          </telerik:RadPageView>

31.                             <telerik:RadPageView ID="PageView3" runat="server">

32.                                 <br />

33.                                <div id="jqChartMW"  style="width:500px; height: 300px; display: block">

34.                                </div>

35.                             </telerik:RadPageView>

36.                         </telerik:RadMultiPage>

37.                     </asp:Panel>

38.                 </asp:Panel>

39.            </NestedViewTemplate>

40.            <Columns>

41.            ...

42.            </Columns>

43.      </MasterTableView>

44.</telerik:RadGrid>

I have to refer to jqChart div this way in JS:

01.$('#jqChartSingle').jqChart({

02.   jqChart data like title, series etc.


35.   });

but if I use only this code it finds only the first div from all expended row.

I found on forum that you can get specific row data from columns but I can't figure out a way for JS to find jqChart div inside specific row.

1.var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
2.masterTable.get_nestedViews()[row].??????

Thanks,
Bartłomiej

[Eyup]

Hi Bartłomiej,

First, you will need to get a reference to the nested view elements:
http://www.telerik.com/help/aspnet-ajax/grid-traversing-detail-tables-items-in-grid.html

Once you have the container element, you can use the $telerik.findElement method to access the chart as demonstrated in the last part of the following post:
http://www.telerik.com/forums/javascript-on-each-item#FpwQalBeNkGNGYJoZBJYhg

Hope this helps. Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik