Kurt Kluth
Top achievements
Rank 1
Rank 1
Kurt Kluth
asked on 13 Jul 2015, 07:14 PM
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.
1 Answer, 1 is accepted
0
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:
And the code-behind:
Hope this helps.
Regards,
Konstantin Dikov
Telerik
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