Populate HTMLChart from RadGrid Row

2 posts, 0 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    167 posts
    Member since:
    Oct 2009

    Posted 13 Jul 2015 Link to this post

    How would I go about populating an HTMLChart with the selected row within my RadGrid?  Upon a user selecting a row, I need the points on the graph mapped accordingly.  Need the dates across the X axis and amounts going up the Y axis.

    This example is what I want but not looking to query the database just use the records already returned.

     Appreciate your help.

     

  2.
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 16 Jul 2015 Link to this post

    Hi Kurt,

    For achieving the desired result you will have to set the EnablePostBackOnRowClick property of the grid to true, handle the server-side OnItemCommand event, retrieve the information from the GridDataItem cells and create custom data source object that could be provided to the RadHtmlChart:
    <telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCommand="RadGrid1_ItemCommand">
        <ClientSettings EnablePostBackOnRowClick="true">
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
    </telerik:RadGrid>
     
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
        <PlotArea>
            <Series>
                <telerik:BarSeries Name="Products" DataFieldY="spentMoney">
                    <TooltipsAppearance Color="White" DataFormatString="${0}"></TooltipsAppearance>
                    <LabelsAppearance Visible="false">
                    </LabelsAppearance>
                </telerik:BarSeries>
            </Series>
            <XAxis DataLabelsField="date">
                <MinorGridLines Visible="false"></MinorGridLines>
                <MajorGridLines Visible="false"></MajorGridLines>
            </XAxis>
            <YAxis>
                <LabelsAppearance DataFormatString="${0}"></LabelsAppearance>
                <MinorGridLines Visible="false"></MinorGridLines>
            </YAxis>
        </PlotArea>
        <Legend>
            <Appearance Visible="false"></Appearance>
        </Legend>
        <ChartTitle Text="Some title"></ChartTitle>
    </telerik:RadHtmlChart>

    And the code-behind:
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        table.Columns.Add("3/31/2009", typeof(decimal));
        table.Columns.Add("6/30/2009", typeof(decimal));
        table.Columns.Add("9/30/2009", typeof(decimal));
        for (int i = 1; i < 5; i++)
        {
            table.Rows.Add(i, 500 + i, 100 + i, 800 + i);
        }
     
        (sender as RadGrid).DataSource = table;
    }
     
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == "RowClick")
        {
            GridDataItem item = e.Item as GridDataItem;
     
            DataTable table = new DataTable();
            table.Columns.Add("date", typeof(string));
            table.Columns.Add("spentMoney", typeof(string));
            foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
            {
                if (column.UniqueName.IndexOf("/") >= 0)
                {
                    table.Rows.Add(column.UniqueName, item[column.UniqueName].Text);
                }
            }
     
            RadHtmlChart1.DataSource = table;
            RadHtmlChart1.DataBind(); 
        }
    }

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top