Telerik RadGraph Inside Telerik radgrid

Telerik RadGraph Inside Telerik radgrid

Step 1:Design Databse

Table 1 Student Table

CREATE TABLE [dbo].[student](

      [id] [int] IDENTITY(1,1) NOT NULL,

      [StudentName] [nvarchar](50) NULL,

      [Class] [nvarchar](50) NULL,

      [year] [nvarchar](50) NULL

) ON [PRIMARY]

Table 2  Marks Table :-

CREATE TABLE [dbo].[marks](

      [id] [int] IDENTITY(1,1) NOT NULL,

      [studentId] [int] NULL,

      [subject] [nvarchar](50) NULL,

      [marks] [nvarchar](50) NULL

) ON [PRIMARY]

Step 2: Design web form .aspx page

<div>

            <asp:ScriptManager ID="s" runat="server"></asp:ScriptManager>

            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" Width="60%"

                OnItemDataBound="RadGrid1_ItemDataBound" AllowPaging="True" PageSize="3" AllowSorting="True">

                <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="ID">

                    <Columns>

                        <telerik:GridBoundColumn DataField="StudentName" HeaderText="StudentName" SortExpression="StudentName"

                            UniqueName="StudentName">

                        </telerik:GridBoundColumn>

                        <telerik:GridBoundColumn DataField="Class" HeaderText="Class" SortExpression="Class"

                            UniqueName="Class">

                        </telerik:GridBoundColumn>

                        <telerik:GridBoundColumn DataField="year" HeaderText="year" SortExpression="year"

                            UniqueName="year">

                        </telerik:GridBoundColumn>

                        <telerik:GridTemplateColumn DataField="ID" UniqueName="ChartColumn" HeaderText="MarksperSubject">

                            <ItemTemplate>

                                <div style="width: 400px; height: 170px;">

                                    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400" Height="170">

                                        <Legend>

                                            <Appearance Visible="false">

                                            </Appearance>

                                        </Legend>

                                        <PlotArea>

                                            <Series>

                                                <telerik:BarSeries DataFieldY="marks">

                                                    <LabelsAppearance Visible="false">

                                                    </LabelsAppearance>

                                                    <TooltipsAppearance />

                                                </telerik:BarSeries>

                                            </Series>

                                            <XAxis DataLabelsField="subject">

                                                <LabelsAppearance>

                                                </LabelsAppearance>

                                                <TitleAppearance Text="Subject">

                                                </TitleAppearance>

                                            </XAxis>

                                            <YAxis>

                                                <TitleAppearance Text="Marks">

                                                </TitleAppearance>

                                            </YAxis>

                                        </PlotArea>

                                    </telerik:RadHtmlChart>

                                </div>

                            </ItemTemplate>

                        </telerik:GridTemplateColumn>

                    </Columns>

                </MasterTableView>

                <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

            </telerik:RadGrid>

            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:kandy %>"

                SelectCommand="SELECT [id], [StudentName], [Class], [year] FROM [student]"></asp:SqlDataSource>

            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:kandy %>"

                SelectCommand="SELECT     marks.subject, marks.marks, marks.studentId FROM         marks INNER JOIN

                           student ON marks.studentId = student.id where marks.studentId=@id">

                <SelectParameters>

                    <asp:Parameter Name="id"></asp:Parameter>

                </SelectParameters>

            </asp:SqlDataSource>

        </div>

Step 3:Logic on .CS page

protected void Page_Load(object sender, EventArgs args)

          {

            

               foreach (GridDataItem item in RadGrid1.MasterTableView.Items)

               {

                    RadHtmlChart chart = item["ChartColumn"].FindControl("RadHtmlChart1") as RadHtmlChart;

                    SqlDataSource2.SelectParameters[0].DefaultValue = item.GetDataKeyValue("ID").ToString();

                    chart.DataSource = SqlDataSource2.Select(DataSourceSelectArguments.Empty);

                    chart.DataBind();

               }

          }

        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

        {

               if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)

               {

                    GridDataItem item = e.Item as GridDataItem;

                    RadHtmlChart chart = item["ChartColumn"].FindControl("RadHtmlChart1") as RadHtmlChart;

                    SqlDataSource2.SelectParameters[0].DefaultValue = item.GetDataKeyValue("ID").ToString();

                    chart.DataSource = SqlDataSource2.Select(DataSourceSelectArguments.Empty);

                    if ((chart.DataSource as DataView).Count > 0)

                    {

                         chart.DataBind();

                    }

                    else

                    {

                         chart.Visible = false;

                         item["ChartColumn"].Controls.Add(new LiteralControl("OK"));

                    }

               }

        }

It will look like :-