I've got a RadWindow contentTemplate with a RadGrid and RadHtmlChart in it and I'm having trouble loading the chart data. I need to grab some values from the page before the window loads. If I rebind the grid via ajax I can load the chart via a button on the window, but it won't work using the OnClientShow event of the RadWindow. If I don't load the RadGrid via ajax I can't refresh the chart at all with values from the page. Reading the documentation on the RadHtmlChart method loadData, I'm not sure what "Invokes a light callback to the server to obtain the RadHtmlChart data." means. Is this not a real ajax call.
Here's my code. All help is appreciated.
Thanks.
Code Behind:
Here's my code. All help is appreciated.
Thanks.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestChart.ascx.cs"
Inherits="WebTechnologiesLLC.Calculators.Auto.TestChart" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
telerik:RadAjaxManager
runat
=
"server"
ID
=
"CUCalcsAjaxManager"
OnAjaxRequest
=
"CUCalcsAjaxManager_AjaxRequest"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"CUCalcsAjaxManager"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"AmortizationRadGrid"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"CUCalcsMgrAjaxLoadingPanel"
runat
=
"server"
Skin
=
"Windows7"
/>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function LoadAmortWindow() {
BindGrid();
RefreshChart();
}
function BindGrid() {
$find("<%= CUCalcsAjaxManager.ClientID %>").ajaxRequest("RebindAmortGrid");
}
function RefreshChart() {
var chart = $find("<%=AutoAffordRadChart.ClientID %>");
chart.loadData();
}
</
script
>
</
telerik:RadCodeBlock
>
<
div
id
=
"mainBody"
class
=
"calcMainBodyDiv"
style
=
"float:left; width:675px"
>
<
div
id
=
"amortizeDiv"
class
=
"calcOutputRow"
>
<
button
id
=
"AmortizationButton"
type
=
"button"
>Amortization Schedule</
button
><
br
/>
</
div
>
<
div
class
=
"calcOutputRow"
>
<
asp:TextBox
ID
=
"LoanAmtTB"
runat
=
"server"
Text
=
"10"
/>
</
div
>
<
telerik:RadWindow
ID
=
"AmortizationRadWindow"
runat
=
"server"
Title
=
"Amortization Schedule"
Behaviors
=
"Close, Move, Resize"
OpenerElementID
=
"AmortizationButton"
Modal
=
"true"
OnClientShow
=
"LoadAmortWindow"
OnClientBeforeShow
=
"RefreshChart"
Width
=
"600px"
Height
=
"600px"
Skin
=
"Windows7"
>
<
ContentTemplate
>
<
div
id
=
"amortWindowDiv"
runat
=
"server"
style
=
"padding: 10px"
>
<
div
id
=
"amortDiv"
>
<
h1
>Amortization Schedule</
h1
>
<
div
id
=
"GridDiv"
>
<
telerik:RadGrid
ID
=
"AmortizationRadGrid"
runat
=
"server"
ClientIDMode
=
"AutoID"
Skin
=
"LegalTrak"
EnableEmbeddedSkins
=
"false"
AllowPaging
=
"false"
CssClass
=
"calcAmortGrid"
OnNeedDataSource
=
"AmortizationRadGrid_NeedDataSource"
AutoGenerateColumns
=
"false"
AlternatingItemStyle-BackColor
=
"#E7EEF3"
>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"true"
UseStaticHeaders
=
"true"
ScrollHeight
=
"350px"
/>
</
ClientSettings
>
<
MasterTableView
CommandItemDisplay
=
"None"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Right"
AlternatingItemStyle-HorizontalAlign
=
"Right"
FooterStyle-HorizontalAlign
=
"Right"
FooterStyle-Font-Bold
=
"true"
>
<
NoRecordsTemplate
>
<
p
style
=
"text-align:center; font-weight:bold;"
>Enter your information and click "Calculate" to generate amortization schedule.</
p
>
</
NoRecordsTemplate
>
<
Columns
>
<
telerik:GridBoundColumn
HeaderText
=
"Mth"
DataField
=
"Month"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Payment"
DataField
=
"Payment"
DataFormatString
=
"{0:C2}"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Balance"
DataField
=
"Balance"
DataFormatString
=
"{0:C2}"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Interest"
DataField
=
"MonthlyInterest"
DataFormatString
=
"{0:C2}"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Cummulative Interest"
DataField
=
"CummulativeInterest"
DataFormatString
=
"{0:C2}"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Principal"
DataField
=
"MonthlyPrincipal "
DataFormatString
=
"{0:C2}"
/>
<
telerik:GridBoundColumn
HeaderText
=
"Cummulative Principal"
DataField
=
"CummulativePrincipal"
DataFormatString
=
"{0:C2}"
/>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
div
>
</
div
>
<
div
id
=
"chartDiv"
>
<
div
id
=
"amortizeDiv2"
class
=
"calcOutputRow"
>
<
button
id
=
"ChartButton2"
type
=
"button"
onclick
=
"RefreshChart()"
>Chart Refresh</
button
>
</
div
>
<
div
style
=
"display:inline-block;"
>
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"AutoAffordRadChart"
Width
=
"450px"
InvokeLoadData
=
"FromCode"
Transitions
=
"true"
Skin
=
"Forest"
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"White"
></
FillStyle
>
</
Appearance
>
<
ChartTitle
Text
=
"Auto Loan Costs"
/>
<
PlotArea
>
<
Series
>
<
telerik:BarSeries
DataFieldY
=
"cost"
Name
=
"Costs"
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"#f1ac4a"
/>
</
Appearance
>
<
TooltipsAppearance
DataFormatString
=
"{0:C}"
/>
<
LabelsAppearance
DataFormatString
=
"{0:C}"
Position
=
"Center"
/>
</
telerik:BarSeries
>
</
Series
>
<
XAxis
DataLabelsField
=
"costName"
>
<
MinorGridLines
Visible
=
"false"
></
MinorGridLines
>
<
MajorGridLines
Visible
=
"false"
></
MajorGridLines
>
</
XAxis
>
<
YAxis
>
<
TitleAppearance
Text
=
"Costs"
></
TitleAppearance
>
<
MinorGridLines
Visible
=
"false"
></
MinorGridLines
>
</
YAxis
>
</
PlotArea
>
</
telerik:RadHtmlChart
>
</
div
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
div
>
Code Behind:
using System;
using System.Linq;
using Telerik.Web.UI;
using System.Data;
using WebTechnologiesLLC.Modules.Calculators;
namespace WebTechnologiesLLC.Calculators.Auto
{
public partial class TestChart : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
AutoAffordRadChart.DataSource = GetChartData();
}
protected void AmortizationRadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
double rate = 4.5;
int term = 36;
double balance = 0;
double.TryParse(LoanAmtTB.Text, out balance);
AmortPayment amortSchedule = new AmortPayment();
AmortizationRadGrid.DataSource = amortSchedule.GetAmortizationSchedule(rate, balance, term);
}
public DataTable GetChartData()
{
double dpayment = 550;
double trade = 1000;
double title = 450;
double payment = 400;
double interest = 877.50;
double.TryParse(LoanAmtTB.Text, out dpayment);
DataTable costs = new DataTable("Cost");
costs.Columns.Add("costName");
costs.Columns.Add("cost");
costs.Rows.Add("Down Payment", dpayment);
costs.Rows.Add("Net Trade-In", trade);
costs.Rows.Add("Title", title);
costs.Rows.Add("Payment", payment);
costs.Rows.Add("Total Interest", interest);
DataSet ds = new DataSet("Costs");
ds.Tables.Add(costs);
return ds.Tables["Cost"];
}
protected void CUCalcsAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
if (e.Argument == "RebindAmortGrid")
{
AmortizationRadGrid.Rebind();
}
}
}
}