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

RadGrid not updating

4 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Satish Kumar
Top achievements
Rank 1
Satish Kumar asked on 16 Mar 2015, 08:32 PM
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

4 Answers, 1 is accepted

Sort by
0
Satish Kumar
Top achievements
Rank 1
answered on 17 Mar 2015, 12:34 AM
Ping !! Can someone reply to this?

Thanks
Satish
0
Satish Kumar
Top achievements
Rank 1
answered on 17 Mar 2015, 07:51 PM
Can anyone provide a pointer to unblock this?? Appreciate anyone's help here.

THanks
Satish
0
Viktor Tachev
Telerik team
answered on 19 Mar 2015, 02:44 PM
Hi Satish,

The most likely reason for the issue are the AJAX settings. Since rebinding of RadGrid is actually initiated by the RadAjaxManager it should be added to the AjaxSettings. Try to add the highlighted setting from the code snippet below and see if the behavior changes.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="AccountsIncidents" LoadingPanelID="LoadingPanel1" UpdatePanelCssClass="" />
            </UpdatedControls>
        </telerik:AjaxSetting>
 
        <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>



Regards,
Viktor Tachev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Satish Kumar
Top achievements
Rank 1
answered on 20 Mar 2015, 01:38 AM
Thanks Much. THis worked.
Tags
Grid
Asked by
Satish Kumar
Top achievements
Rank 1
Answers by
Satish Kumar
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or