Hi,
I have a scenario in which I have a HtmlChart and upon a series click, i catch client side series click event and make a ajax request to update a rad grid.
I am receving the ajax request and binding the radgrid, but grid on client side is not updating.
Below is the code snippet:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ChickenpoxSLA.aspx.cs" Inherits="Microsoft.Azure.Documents.Dashboard.Reports.Availability.ChickenpoxSLA" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="../../Scripts/Reports.js"></script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ChickenpoxChart">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ChickenpoxChart" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="AccountsAvailability" LoadingPanelID="LoadingPanel1" UpdatePanelCssClass="" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="AccountsAvailability">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ChickenpoxChart" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="AccountsIncidents" LoadingPanelID="LoadingPanel1" UpdatePanelCssClass="" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" Skin="Default" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function getAjaxManager() {
return $find("<%=RadAjaxManager1.ClientID%>");
}
</script>
</telerik:RadCodeBlock>
<div class="row">
<div class="col-lg-2">
<div id="sidebar">
<ul class="nav list-group">
<li>
<a class="list-group-item" href="ChickenpoxSLA.aspx"><i class="icon-home icon-1x"></i>Chickenpox SLA</a>
</li>
<li>
<a class="list-group-item" href="#"><i class="icon-home icon-1x"></i>Internal Customers Availability</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-10">
<div class="row">
<div class="col-lg-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Availability SLA properties
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-lg-2">
<asp:Label runat="server" Font-Bold="true" Text="Time Range"></asp:Label>
<telerik:RadDropDownList runat="server" ID="AvailabilityTime" TabIndex="1" Width="200" DropDownWidth="200" DefaultMessage="Select Availability Time Range ..."
AutoPostBack="true" OnSelectedIndexChanged="AvailabilityTime_SelectedIndexChanged">
<Items>
<telerik:DropDownListItem Text="Hourly" Selected="true"/>
<telerik:DropDownListItem Text="Daily" />
<telerik:DropDownListItem Text="Weekly" />
</Items>
</telerik:RadDropDownList>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<telerik:RadHtmlChart runat="server" ID="ChickenpoxChart" Height="600px" OnClientSeriesClicked="OnChickenpoxChartClicked">
<PlotArea>
<Series>
</Series>
<XAxis>
</XAxis>
<YAxis>
</YAxis>
</PlotArea>
<ChartTitle Text="Chickenpox SLA">
</ChartTitle>
</telerik:RadHtmlChart>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-6">
<label for="AccountsAvailability">Accounts Violating SLA</label>
<br />
<telerik:RadGrid ID="AccountsAvailability" AllowPaging="false" runat="server" GridLines="None" AllowSorting="false" EnableViewState="false">
<ClientSettings AllowKeyboardNavigation="false" EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
</telerik:RadGrid>
<br />
</div>
<div class="col-lg-6">
<label for="AccountsIncidents">Incidents for the Impacted Account</label>
<br />
<telerik:RadGrid ID="AccountsIncidents" AllowPaging="false" runat="server" GridLines="None" AllowSorting="true" OnNeedDataSource="AccountsIncidents_NeedDataSource"
OnItemCommand="AccountsIncidents_ItemCommand">
<ClientSettings AllowKeyboardNavigation="false" EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
</telerik:RadGrid>
<br />
</div>
</div>
</div>
</div>
</asp:Content>
(function (global, undefined) {
global.OnChickenpoxChartClicked = function (sender, args) {
var ajaxManager = global.getAjaxManager();
if (args.get_seriesName() !== "Months") {
ajaxManager.ajaxRequest(args.get_category());
}
}
})(window);
using System;
using System.Collections.Generic;
using System.Data;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Charting;
using Telerik.Web.UI;
namespace Microsoft.Azure.Documents.Dashboard.Reports.Availability
{
enum ChickenpoxSLAType
{
Hourly,
Daily,
Weekly
}
public partial class ChickenpoxSLA : System.Web.UI.Page
{
string environment;
DateTime accountAvailabilityTime;
protected void Page_Load(object sender, EventArgs e)
{
RadDropDownList list = (RadDropDownList)Master.FindControl("GlobalEnvironment");
this.environment = list.SelectedValue;
if(!IsPostBack)
{
this.AccountsAvailability.DataSource = new string[] { };
this.AccountsAvailability.DataBind();
this.AccountsIncidents.DataSource = new string[] { };
this.AccountsIncidents.DataBind();
}
UpdateChart(ChickenpoxSLAType.Hourly);
}
private void UpdateChart(ChickenpoxSLAType slaType)
{
DataTable table = null;
switch(slaType)
{
case ChickenpoxSLAType.Hourly:
table = SiteGlobal.Repository[this.environment].GetChickenpoxSLA1H(DateTime.Now.AddDays(-1), DateTime.Now);
ChickenpoxChart.PlotArea.XAxis.DataLabelsField = "Time";
break;
case ChickenpoxSLAType.Daily:
table = SiteGlobal.Repository[this.environment].GetChickenpoxSLA1D(DateTime.Now.AddDays(-15), DateTime.Now);
ChickenpoxChart.PlotArea.XAxis.DataLabelsField = "Date";
break;
//case ChickenpoxSLAType.Weekly:
// table = SiteGlobal.Repository[this.environment].GetChickenpoxSLAWeekly(DateTime.Now.AddDays(-1), DateTime.Now);
// break;
default:
table = SiteGlobal.Repository[this.environment].GetChickenpoxSLA1H(DateTime.Now.AddDays(-1), DateTime.Now);
ChickenpoxChart.PlotArea.XAxis.DataLabelsField = "Time";
break;
}
ChickenpoxChart.PlotArea.XAxis.MajorGridLines.Visible = false;
ChickenpoxChart.PlotArea.XAxis.MinorGridLines.Visible = false;
ChickenpoxChart.PlotArea.YAxis.MajorGridLines.Visible = false;
ChickenpoxChart.PlotArea.YAxis.MinorGridLines.Visible = false;
//ChickenpoxChart.PlotArea.YAxis.MinValue = 0;
AxisY additionYAxis = new AxisY();
additionYAxis.Name = "SLAVioloationsAxis";
additionYAxis.MinValue = 0;
additionYAxis.MaxValue = 25;
additionYAxis.Visible = false;
ChickenpoxChart.PlotArea.AdditionalYAxes.Add(additionYAxis);
ChickenpoxChart.PlotArea.XAxis.AxisCrossingPoints.Add(0);
ChickenpoxChart.PlotArea.XAxis.AxisCrossingPoints.Add(20);
ColumnSeries totalAccountSeries = new ColumnSeries();
totalAccountSeries.Name = "Total Accounts";
totalAccountSeries.DataFieldY = "TotalAccounts";
totalAccountSeries.TooltipsAppearance.DataFormatString = "{0}";
LineSeries slaViolationSeries = new LineSeries();
slaViolationSeries.AxisName = "SLAVioloationsAxis";
slaViolationSeries.Name = "SLA Violations";
slaViolationSeries.DataFieldY = "SLAViolations";
slaViolationSeries.TooltipsAppearance.DataFormatString = "{0}";
slaViolationSeries.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.Black;
ChickenpoxChart.PlotArea.Series.Add(totalAccountSeries);
ChickenpoxChart.PlotArea.Series.Add(slaViolationSeries);
ChickenpoxChart.DataSource = table;
ChickenpoxChart.DataBind();
}
protected void AvailabilityTime_SelectedIndexChanged(object sender, Telerik.Web.UI.DropDownListEventArgs e)
{
ChickenpoxChart.PlotArea.Series.Clear();
ChickenpoxChart.PlotArea.XAxis.Items.Clear();
ChickenpoxChart.PlotArea.AdditionalYAxes.Clear();
ChickenpoxSLAType slaType = (ChickenpoxSLAType)Enum.Parse(typeof(ChickenpoxSLAType), AvailabilityTime.SelectedText);
UpdateChart(slaType);
}
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
string seriesName = ChickenpoxChart.PlotArea.Series[0].Name;
string ShortFormat = "ddd MMM d yyyy HH:mm:ss";
string[] Formats = { ShortFormat };
string dateTobeParsed1 = e.Argument.Substring(0, e.Argument.IndexOf('G') - 1);
accountAvailabilityTime = DateTime.ParseExact(dateTobeParsed1, Formats, CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal).ToUniversalTime();
AccountsAvailability.DataSource = SiteGlobal.Repository[this.environment].GetAccountAvailability1H(Convert.ToDateTime("2015-03-11 16:00:00.000"));
AccountsAvailability.Rebind();
}
protected void AccountsIncidents_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
}
protected void AccountsIncidents_ItemCommand(object sender, GridCommandEventArgs e)
{
}
}
}
Appreciate in any help here.
Thanks
Satish