<telerik:RadComboBox id="actionbox1" Runat="server" ToolTip="Select a Bill action" MarkFirstMatch="True" EnableLoadOnDemand="false" ShowDropDownOnTextboxClick="False" Width="176px"></telerik:RadComboBox>I want to use the RadChart component. To try it, I first used the Telerik demo for scrolling and zooming (http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/zoomingscrolling/defaultcs.aspx) and it works.
But when I put this code in our application, the chart is not renderer properly after the first page load, no data is shown and the loading image still there. It happen if I show the loading panel on page load as described on Telerik on-line documentation (http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html).
I tried to bind data again on ajax request without sucess as in this post (http://www.telerik.com/community/forums/aspnet-ajax/ajax/show-loading-panel-on-initial-page-load.aspx) except I remake the entire data source because the chart don`t have a Rebind() method.
Anybody have an idea about how to use the RadChart component and still having a loading panel on page load?
Thanks.
Here is my source code
ASP
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestChart.aspx.cs" Inherits="MyWebApplication.TestChart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
// Show Ajax Loading Panel while loading the page
function pageLoad(sender, eventArgs) {
if (!eventArgs.get_isPartialLoad()) {
$find("<%= radAjaxManager.ClientID %>").ajaxRequest("InitialPageLoad");
}
}
</script>
</telerik:RadCodeBlock>
</head>
<body class="BODY">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="radAjaxManager" runat="server" DefaultLoadingPanelID="radAjaxLoadingPanel" OnAjaxRequest="radAjaxManager_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="radAjaxManager">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="radAjaxManager" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<!-- Ajax Loading Panel: Takes entire page and image center on it -->
<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" IsSticky="True" Style="height: 100%; width: 100%;">
</telerik:RadAjaxLoadingPanel>
<div class="bigModule">
<div class="bigModuleBottom">
<div class="title">
To test the Zooming and Scrolling capabilities on this demo:</div>
<ul>
<li>Zoom to a portion of the chart by dragging and selecting with the mouse a rectangle to
set a new scale for the chart. AJAX retrieves the visible "chunk" of the chart that
was selected. You can navigate the chart by scrolling and new image "chunks"
are requested on-the-fly.</li>
<li>You can also use stand-alone scrolling by explicitly setting EnableZoom="false". You
can still provide XScale and YScale factor values on the server-side.</li>
</ul>
</div>
</div>
<div class="module">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<telerik:RadChart ID="RadChart1" runat="Server" Width="495px" AutoLayout="true" Skin="Mac">
<ClientSettings ScrollMode="Both" />
<Series>
<telerik:ChartSeries DataYColumn="MyColumn" Type="Line">
</telerik:ChartSeries>
</Series>
<Legend Visible="false"></Legend>
<ChartTitle TextBlock-Text="Zooming / Scrolling (no initial scaling)">
</ChartTitle>
</telerik:RadChart>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<telerik:RadChart ID="RadChart2" runat="Server" Width="495px" AutoLayout="true" Skin="Mac">
<ClientSettings EnableZoom="false" ScrollMode="XOnly" XScale="4" />
<Series>
<telerik:ChartSeries DataYColumn="MyColumn" Type="Line">
<Appearance FillStyle-MainColor="223, 87, 60">
</Appearance>
</telerik:ChartSeries>
</Series>
<Legend Visible="false"></Legend>
<ChartTitle TextBlock-Text="Scrolling only (initial XScale applied)">
</ChartTitle>
</telerik:RadChart>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
C#
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace MyWebApplication
{
public partial class TestChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("MyColumn", typeof(int)));
Random rand = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < 20; i++)
{
DataRow dr = dt.NewRow();
dr[0] = rand.Next(20);
dt.Rows.Add(dr);
}
RadChart1.DataSource = dt;
RadChart1.DataBind();
RadChart2.DataSource = dt;
RadChart2.DataBind();
}
}
protected void radAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
// Try rebinding data...
if (e.Argument == "InitialPageLoad")
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("MyColumn", typeof(int)));
Random rand = new Random(DateTime.Now.Millisecond);
for (int i = 0; i < 20; i++)
{
DataRow dr = dt.NewRow();
dr[0] = rand.Next(20);
dt.Rows.Add(dr);
}
RadChart1.DataSource = dt;
RadChart1.DataBind();
RadChart2.DataSource = dt;
RadChart2.DataBind();
}
}
}
}

foreach (GridItem item in grid.Items){ RadNumericTextBox txtBox = (RadNumericTextBox)item.FindControl("txtBox"); }| <telerik:RadGrid ID="uxByAgeAndGenderGrid" runat="server" AutoGenerateColumns="false" CssClass="gridAlternatingRows" |
| OnItemDataBound="uxByAgeAndGenderGrid_OnItemDataBound" OnNeedDataSource="uxByAgeAndGenderGrid_OnNeedDataSource"> |
| <MasterTableView GroupLoadMode="Client" ShowGroupFooter="true" HeaderStyle-Font-Bold="true" ShowFooter="true"> |
| <GroupByExpressions> |
| <telerik:GridGroupByExpression> |
| <SelectFields> |
| <telerik:GridGroupByField FieldName="RequestedGender" HeaderText=" " HeaderValueSeparator="" /> |
| </SelectFields> |
| <GroupByFields> |
| <telerik:GridGroupByField FieldName="RequestedGender" /> |
| </GroupByFields> |
| </telerik:GridGroupByExpression> |
| <telerik:GridGroupByExpression> |
| <SelectFields> |
| <telerik:GridGroupByField FieldName="RequestedMinAge" HeaderText=" " HeaderValueSeparator="" /> |
| </SelectFields> |
| <GroupByFields> |
| <telerik:GridGroupByField FieldName="RequestedMinAgeRank" /> |
| </GroupByFields> |
| </telerik:GridGroupByExpression> |
| </GroupByExpressions> |
| <Columns> |
| <telerik:GridBoundColumn DataField="Status" HeaderText="Status" SortExpression="StatusRank"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="NewCount" HeaderText="New invitations" Aggregate="Sum" FooterText="Total: "> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="ReinviteCount" HeaderText="Re-invite invitations" Aggregate="Sum" FooterText="Total: "> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="AskedForCount" HeaderText="Asked For invitations" Aggregate="Sum" FooterText="Total: "> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="TotalCount" HeaderText="Total" Aggregate="Sum" FooterText="Grand total: "> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| </telerik:RadGrid> |
| GroupsDefaultExpanded="false" |
| if (!IsPostBack) |
| { |
| uxByAgeAndGenderGrid.Rebind(); |
| foreach (GridItem item in uxByAgeAndGenderGrid.MasterTableView.Controls[0].Controls) |
| { |
| if (item is GridGroupHeaderItem) |
| { |
| item.Expanded = false; |
| } |
| } |
| } |
| Server Error in '/' Application. |
| StartIndex cannot be less than zero. |
| Parameter name: startIndex |
| Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. |
| Exception Details: System.ArgumentOutOfRangeException: StartIndex cannot be less than zero. |
| Parameter name: startIndex |
| Source Error: |
| Line 37: if (item is GridGroupHeaderItem) |
| Line 38: { |
| Line 39: item.Expanded = false; |
| Line 40: } |
| Line 41: } |
| Source File: C:\VS\Flive\Main\Source\FliveSolution\Freshair.Flive\Experiences\FriendlyTown\FtByTheNumbers.aspx.cs Line: 39 |
| Stack Trace: |
| [ArgumentOutOfRangeException: StartIndex cannot be less than zero. |
| Parameter name: startIndex] |
| System.String.Remove(Int32 startIndex) +6576122 |
| Telerik.Web.UI.GridGroupHeaderItem.GroupFooterByHeaderIndexAndSequenceNumber(String groupIndex, Int32 seqNum) +202 |
| Telerik.Web.UI.GridGroupHeaderItem.SetVisibleChildren(Boolean value) +794 |
| Telerik.Web.UI.GridItem.set_Expanded(Boolean value) +126 |
| Freshair.Flive.Experiences.FriendlyTown.FtByTheNumbersPage.OnLoad(EventArgs e) in C:\VS\Flive\Main\Source\FliveSolution\Freshair.Flive\Experiences\FriendlyTown\FtByTheNumbers.aspx.cs:39 |
| System.Web.UI.Control.LoadRecursive() +71 |
| System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3048 |
| Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1 |
| protected void uxByAgeAndGenderGrid_OnNeedDataSource(Object sender, GridNeedDataSourceEventArgs e) |
| { |
| Int32 programYear = DateTime.Today.GetChildApplicationProgramYear(); |
| var childrenWhoParticipatedInPreviousYears = |
| from child in Ctx.Persons |
| join vep in Ctx.ViewExperienceParticipations on child.PersonId equals vep.PersonId |
| join status in Ctx.ExperienceEligibilityPersonParticipationStatus on vep.CurrentStatusId equals status.ExperienceEligibilityPersonParticipationStatusId |
| join ee in Ctx.ExperienceEligibilities on vep.ExperienceEligibilityId equals ee.ExperienceEligibilityId |
| join exp in Ctx.Experiences on ee.ExperienceId equals exp.ExperienceId |
| join et in Ctx.ExperienceTypes on exp.ExperienceTypeId equals et.ExperienceTypeId |
| where !status.NullifiesParticipation |
| where status.ExperienceEligibilityPersonParticipationStatusId != 1 // Other than Invited |
| where exp.FromDate.Value.Year < programYear |
| select new |
| { |
| child.PersonId, |
| exp.HostingHouseholdId |
| }; |
| List<String> statusRank = new List<String>(); |
| statusRank.Add("Matched"); |
| statusRank.Add("Open"); |
| statusRank.Add("Invited"); |
| statusRank.Add("Placed"); |
| statusRank.Add("Refused"); |
| statusRank.Add("Not Found"); |
| statusRank.Add("Excused"); |
| statusRank.Add("Proposed New Dates"); |
| statusRank.Add("Must Approve Trip Dates"); |
| statusRank.Add("Child proposed new dates"); |
| statusRank.Add("Child must approve dates"); |
| statusRank.Add("Didn't Show"); |
| statusRank.Add("Attended"); |
| statusRank.Add("Returned Early"); |
| statusRank.Add("Transferred Out"); |
| statusRank.Add("Canceled"); |
| statusRank.Add("Closed by child"); |
| statusRank.Add("Withdrawn by host"); |
| statusRank.Add("Change In Progress"); |
| List<String> ageRank = new List<String>(); |
| ageRank.Add("0 to 5"); |
| ageRank.Add("6 to 8"); |
| ageRank.Add("9 to 10"); |
| ageRank.Add("11 to 12"); |
| ageRank.Add("Over 13"); |
| ageRank.Add("Unknown"); |
| DateTime today = DateTime.Today; |
| var invitations = |
| (from exp in Ctx.Experiences |
| join et in Ctx.ExperienceTypes on exp.ExperienceTypeId equals et.ExperienceTypeId |
| join ec in Ctx.ExperienceCategories on et.ExperienceCategoryId equals ec.ExperienceCategoryId |
| join vee in Ctx.ViewActiveEligibilityByExperiences on exp.ExperienceId equals vee.ExperienceId |
| join ee in Ctx.ExperienceEligibilities on vee.ExperienceEligibilityId equals ee.ExperienceEligibilityId |
| join reqPerson in Ctx.Persons on ee.PersonId equals reqPerson.PersonId into reqPersons |
| from reqPerson in reqPersons.DefaultIfEmpty() |
| join part in Ctx.ViewExperienceParticipations on ee.ExperienceEligibilityId equals part.ExperienceEligibilityId into parts |
| from part in parts.DefaultIfEmpty() |
| join person in Ctx.Persons on part.PersonId equals person.PersonId into persons |
| from person in persons.DefaultIfEmpty() |
| join status in Ctx.ExperienceEligibilityPersonParticipationStatus on part.CurrentStatusId equals status.ExperienceEligibilityPersonParticipationStatusId into statuses |
| from status in statuses.DefaultIfEmpty() |
| join searchParam in Ctx.ViewInvitationEligibilityParameters on ee.SearchId equals searchParam.SearchId into searchParams |
| from searchParam in searchParams.DefaultIfEmpty() |
| where exp.FromDate.GetValueOrDefault(new DateTime(1877, 1, 1)).Year == programYear |
| where et.ExperienceCategoryId == 1 |
| where part == null || part.ExperienceEligibilityPersonParticipationTypeId == 1 // Child |
| where person == null || person.PersonId != 30190 |
| select new |
| { |
| RequestedGender = reqPerson == null ? (searchParam == null ? "Unknown" : |
| (searchParam.Gender == null ? "Either a boy or a girl" : |
| (searchParam.Gender == "M" ? "Only a boy" : "Only a girl"))) : |
| (reqPerson.Gender == null ? "Unknown" : (reqPerson.Gender == "M" ? "Only a boy" : "Only a girl")), |
| RequestedMinAge = reqPerson == null ? (searchParam == null ? -1 : |
| (searchParam.MinAge == null ? -1 : searchParam.MinAge)) : |
| (reqPerson.BirthDate == null ? -1 : Ctx.FuncGetAge(reqPerson.BirthDate, today)), |
| IsNew = ee.SearchId != null ? true : false, |
| IsReinvite = ee.PersonId == null ? false : |
| (childrenWhoParticipatedInPreviousYears.Where(p => p.PersonId == ee.PersonId && p.HostingHouseholdId == exp.HostingHouseholdId).Count() > 0 ? true : false), |
| Program = ec.Name, |
| StatusId = status == null ? 0 : status.ExperienceEligibilityPersonParticipationStatusId, |
| IsWithdrawn = exp.IsCanceled |
| }).ToArray(); |
| var invitations2 = |
| (from invitation in invitations |
| group new |
| { |
| IsNew = invitation.IsNew, |
| IsReinvite = invitation.IsReinvite |
| } by new |
| { |
| RequestedGender = invitation.RequestedGender, |
| RequestedMinAge = invitation.RequestedMinAge < 0 ? "Unknown" : |
| (invitation.RequestedMinAge < 6 ? "0 to 5" : |
| (invitation.RequestedMinAge < 9 ? "6 to 8" : |
| (invitation.RequestedMinAge < 11 ? "9 to 10" : |
| (invitation.RequestedMinAge < 13 ? "11 to 12" : "Over 13")))), |
| Status = invitation.IsWithdrawn ? "Withdrawn by host" : FtLogicController.GetInvitationStatusByCurrentParticipationStatus(invitation.StatusId).GetStatusText() |
| } into grouping |
| select grouping).ToArray(); |
| var invitationsToBind = |
| from grouping in invitations2 |
| select new |
| { |
| RequestedGender = grouping.Key.RequestedGender, |
| RequestedMinAge = grouping.Key.RequestedMinAge, |
| RequestedMinAgeRank = ageRank.IndexOf(grouping.Key.RequestedMinAge), |
| Status = grouping.Key.Status, |
| StatusRank = statusRank.IndexOf(grouping.Key.Status), |
| NewCount = grouping.Count(p => p.IsNew), |
| ReinviteCount = grouping.Count(p => p.IsReinvite), |
| AskedForCount = grouping.Count(p => !p.IsReinvite && !p.IsNew), |
| TotalCount = grouping.Count() |
| }; |
| uxByAgeAndGenderGrid.GroupingSettings.RetainGroupFootersVisibility = true; |
| uxByAgeAndGenderGrid.DataSource = invitationsToBind.OrderBy(p => p.StatusRank); |
| uxInvitationsToBeFilled.Text = invitationsToBind.Where(p => p.Status == "Open").Sum(p => p.TotalCount).ToString(); |
| uxMatchedInvitationsNotYetDeparted.Text = invitationsToBind.Where(p => p.Status == "Matched").Sum(p => p.TotalCount).ToString(); |
| } |