This is a migrated thread and some comments may be shown as answers.

Populate HTMLChart from RadGrid Row

1 Answer 76 Views

Grid

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 16 Jul 2015, 12:05 PM

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