Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Browser closes connection before receiving response from OnSeriesItemClicked

5 Answers 67 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 12 Aug 2013, 07:33 PM
Hello Telerik support team,

I have a RadHTMLChart that will eventually need to perform a drill-down. Following the documentation examples I created a sample application to try and sent a request to the server for the next set of line series to be drawn on the chart.

The server receives the request and goes through all the appropriate code-behind without errors, however the browser closes the connection between it and the server before it receives the response from the server. The result from the user's perspective is that the graph does not change.

This was tested on the latest versions of FF, IE, GC
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SeriesClickedIndependant.aspx.cs"
    Inherits="SeriesClicked.SeriesClickedIndependant" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadHtmlChart ID="RadHtmlChart1" OnClientSeriesClicked="OnClientSeriesClicked" runat="server">
        </telerik:RadHtmlChart>
        <script type="text/javascript">
            function OnClientSeriesClicked(sender, eventArgs) {
                //alert("You clicked on a series item with value '" + eventArgs.get_value() + "' from category '" + eventArgs.get_category() + " and Series:" + eventArgs.get_seriesName() + '.');
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(eventArgs.get_seriesName());
 
            }
        </script>
    </div>
    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Reports.ReportPresenter;
using Telerik.Web.UI;
 
namespace SeriesClicked
{
    public partial class SeriesClickedIndependant : System.Web.UI.Page
    {
        private ReportsDataSource _radDataSource;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                PreFetch();
                FetchData(ReportsStoredProcedures.StoredProcedures.Company, new ReportsParameters(1356, "01/01/2011", "05/30/2011"));
                PostFetch();
            }
        }
 
        public void FetchData(ReportsStoredProcedures.StoredProcedures storedProcedure, ReportsParameters parameters)
        {
            //Populates the DataSource that will be used by the RADHTMLChart
            _radDataSource = new ReportsPresenter().GetReportsDataSource(storedProcedure, parameters);
        }
 
        public void PostFetch()
        {
            foreach (LineSeries lS in _radDataSource.ReportsRadHtmlSource.SeriesCollection)
            {
                RadHtmlChart1.PlotArea.Series.Add(lS);
            }
 
            foreach (string s in _radDataSource.ReportsRadHtmlSource.LabelsArray)
            {
                RadHtmlChart1.PlotArea.XAxis.Items.Add(s);
            }
        }
 
        public void PreFetch()
        {
            RadHtmlChart1.PlotArea.Series.Clear();
        }
 
 
 
        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            PreFetch();
            FetchData(ReportsStoredProcedures.StoredProcedures.Region, new ReportsParameters(1356, 1356, 0, Reports.DataAccess.Facility.FacilityType.Regional, "01/01/2011", "05/30/2011"));
            PostFetch();
        }
 
 
        public void FetchData()
        {
        }
    }
}

5 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 14 Aug 2013, 09:36 AM
Hello Michael,

The settings of the RadAjaxManager are not set, so that there aren't any controls which trigger the partial update and controls which are to be updated. You can try modifying the RadAjaxManager declaration as follows:
<telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadHtmlChart ID="RadHtmlChart1" OnClientSeriesClicked="OnClientSeriesClicked" runat="server">
</telerik:RadHtmlChart>

You can also find useful RadAjax - Telerik's ASP.NET Ajax online demo and RadAjaxManager help article that shed more light on how to configure the RadAjaxManager.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Michael
Top achievements
Rank 1
answered on 14 Aug 2013, 09:05 PM
I tried filling out all the settings for the RadAjaxManager but then I got an Error that said

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)


I figured that the issue was because of the code blocks in the $find() function, I remoced the code block symbols and FireBug started yelling that TypeError: $find(...) is null.
0
Danail Vasilev
Telerik team
answered on 15 Aug 2013, 03:11 PM
Hi Michael,

In order to prevent this kind of error, caused when there are code blocks placed within the markup, you can use the RadCodeBlock control. For example:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function AjaxReq(args) {
            $find("<%= RadAjaxPanel1.ClientID %>").ajaxRequestWithTarget("<%= Button1.UniqueID %>", '');
        }
    </script>
</telerik:RadCodeBlock>

More information on the matter is available in RadCodeBlock and RadScriptBlock help article.

Should you need further assistance on this regard, do not hesitate to contact us again.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Michael
Top achievements
Rank 1
answered on 15 Aug 2013, 08:52 PM
Thanks for the help. Code worked and everything. I'm moving on now to trying to to the same thing as I did in this sample application, but instead having the page be the child of a master page. I'm having issues right now where it's complaining that RadAjaxmanager1 does not exist.

<%@ Page Title="" Language="C#" MasterPageFile="~/SeriesClickedMaster.Master" AutoEventWireup="true"
    CodeBehind="SeriesClickedChildPage.aspx.cs" Inherits="SeriesClicked.SeriesClickedChildPage" %>
 
<%@ MasterType VirtualPath="~/SeriesClickedMaster.Master" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManagerProxy id="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScriptManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <script type="text/javascript">
        function OnClientSeriesClicked(sender, eventArgs) {
            $find("<%= RadAjaxManager1.GetCurrent(Page).ClientID %>").ajaxRequest(eventArgs.get_seriesName());
 
        }
    </script>
    <telerik:RadHtmlChart ID="RadHtmlChart1" OnClientSeriesClicked="OnClientSeriesClicked"
        runat="server">
    </telerik:RadHtmlChart>
</asp:Content>
0
Michael
Top achievements
Rank 1
answered on 16 Aug 2013, 01:55 PM
Never mind, I figured it out.
Tags
Chart (HTML5)
Asked by
Michael
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Michael
Top achievements
Rank 1
Share this question
or