Dear Telerik Team,
Currently, we are working on our web.app. which utilizes your library for ATLAS. Getting a fast chart component was one of the reasons for our decision to buy your library. Recently, we have using MSChart on certain web page which resides in our solution. However, we are unfavorably surprised, because of your Radchart performance ussues. We are afraid of the incorrect utilization of the RadChart component, therefore we would like to ask you for a proper technique to RadChart preparing as well as rendering.
Please, have a look at our performance test, which we have made for the comparison. The test were proceeded on the same machine/IDE/database/.NET framework (so, on the same HW & SW configuration).
Here is our source code snippet: (Let us remark that we need to specify the color for each of the series.)
foreach (KeyValuePair<DataPointEntity, DataTable> dt in data)
{
ChartSeries chartSeries = new ChartSeries(radChart.Series);
chartSeries.Name = dt.Key.Name;
chartSeries.Appearance.ShowLabels = false;
chartSeries.SetColors(dt.Key.Color);
chartSeries.Appearance.FillStyle.MainColor = dt.Key.Color;
for (int i = 0; i < dt.Value.Rows.Count; ++i)
chartSeries.AddItem(new ChartSeriesItem(
((DateTime)dt.Value.Rows[i][1]).ToOADate(), (double)dt.Value.Rows[i][2]));
radChart.Series.Add(chartSeries);
}
Here are the obtained results:
MSChart:
Preparing 27 000 values 0:0:0.093 s
Rendering: 13 s
RadChart:
Preparing 27 000 values 0:0:2.160 s
Rendering: 30 s
What we have made wrong, please? Must we done this by using a DataTable (or something similar)?
There is series type “Fastline” in MS chart for faster rendering. Do you have any tip or idea how to set up the RadChart instance to accomplish faster rendering, or is there something for increase the rendering speed?
We suppose that Silverlight version of the RadChart maybe faster, but we want to build our web app on ATLAS.
Kind Regards,
SCT
<script type="text/javascript">var $ = $telerik.$; function GetTweetes(keywords, numPosts, fnk) { var url = "http://search.twitter.com/search.json?q=" + keywords + "&rpp=" + numPosts + "&callback=?"; $.getJSON(url, function(data) { if ($.isFunction(fnk)) { fnk.call(this, data.results); } }); } function OnClientShowing(sender, args) { GetTweetes("Ajax", 10, function(data) { var rotator = $find("<%= tweetsRotator.ClientID %>"); var currentItems = rotator.get_items(); //scroll the rotator to the first item rotator.set_currentItemIndex(0); $(data).each(function(i, post) { //if there is such an item created already - simply replace the content with the latest one var dataItem = data[i]; var htmlString = "<div class='wrapper'>" + "<img class='profilePic' src='" + dataItem.profile_image_url + "'></img>" + "<div class='text'>" + dataItem.text + "</div><div class='date'><span class='author'>" + dataItem.from_user + " | </span>" + dataItem.created_at + "</div></div>"; if (currentItems[i]) { currentItems[i].get_element().innerHTML = htmlString; } else { //create and add a new item in case there is no such in the rotator - e.g in this demo this will be needed only on first show but in more complex scenario, when the returned by twitter records have different length var radRotatorItemData = {}; radRotatorItemData.Html = htmlString; rotator.addRotatorItem(radRotatorItemData, i); } }); }); } function ShowNotification() { var notification = $find("<%= RadNotification1.ClientID %>"); notification.show(); } </script> <script type="text/javascript">var $ = $telerik.$; function GetTweetes(keywords, numPosts, fnk) { var url = "http://search.twitter.com/search.json?q=" + keywords + "&rpp=" + numPosts + "&callback=?"; $.getJSON(url, function(data) { if ($.isFunction(fnk)) { fnk.call(this, data.results); } }); } function OnClientShowing(sender, args) { GetTweetes("Ajax", 10, function(data) { var rotator = $find("<%= tweetsRotator.ClientID %>"); var currentItems = rotator.get_items(); //scroll the rotator to the first item rotator.set_currentItemIndex(0); $(data).each(function(i, post) { //if there is such an item created already - simply replace the content with the latest one var dataItem = data[i]; var htmlString = "<div class='wrapper'>" + "<img class='profilePic' src='" + dataItem.profile_image_url + "'></img>" + "<div class='text'>" + dataItem.text + "</div><div class='date'><span class='author'>" + dataItem.from_user + " | </span>" + dataItem.created_at + "</div></div>"; if (currentItems[i]) { currentItems[i].get_element().innerHTML = htmlString; } else { //create and add a new item in case there is no such in the rotator - e.g in this demo this will be needed only on first show but in more complex scenario, when the returned by twitter records have different length var radRotatorItemData = {}; radRotatorItemData.Html = htmlString; rotator.addRotatorItem(radRotatorItemData, i); } }); }); } function ShowNotification() { var notification = $find("<%= RadNotification1.ClientID %>"); notification.show(); } </script>If you have a RadformDecorator DecoratedControls="All" and a grid with a GridCheckBoxColumn or a Template column with a checkbox and click refresh in the grid commandtemplate. The Grids MasterTableView Clientheight is reduced 1px per row.
This is causing issue with my autoresize of the grid height. My grid height is autosize on initial load correctly, but when I refresh I get an undesired scrollbar on my grid.
This was an interesting one to chase down.
html on initial pageload<input id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00" class="rfdRealInput" disabled="disabled" name="ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$ctl00" CHECKED="checked" type="checkbox" _rfddecoratedID="_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"><label id="_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00" class=" rfdCheckboxChecked rfdInputDisabled" for="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00" unselectable="on"> </label>html after a page refresh ****** (NOTE the missing closing tag on the Label) ******<input name="ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$ctl00" disabled="disabled" class="rfdRealInput" id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00" type="checkbox" CHECKED="checked" _rfddecoratedID="_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00"/><label class=" rfdCheckboxChecked rfdInputDisabled" id="_rfdSkinnedctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00" for="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl04_ctl00" unselectable="on">| protected void RadGrid1_PreRender(object sender, EventArgs e) |
| { |
| GridHeaderItem item = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem; |
| item["ClientSelectColumn"].Controls[0].Visible = false; |
| } |
Hello,
I'm trying to pass the value of tab (param BE) that is clicked to show up in a grid inside RadPageView2. For example:
Tab A and B
when Tab A is clicked, i would like the grid to come up using SqlDataSource2 with the BE field = 'A'.
Can someone help?
Thanks
<%@ Page Language="C#" MasterPageFile="Public.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="_Default" Debug="true" %>
<%
@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!
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>
<title>Sample</title>
</
head>
<
body>
<form id="form1" runat="server">
<div><asp:scriptmanager runat="server" id="ScriptManager1">
</asp:scriptmanager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />
<telerik:AjaxUpdatedControl ControlID="lbl_message" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<br />
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" AutoPostBack="true" MultiPageID="RadMultiPage1"
DataSourceID="SqlDataSource1" DataTextField="peo" >
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
<telerik:RadPageView ID="PageView1" runat="server">
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server">
</telerik:RadGrid>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server">
<telerik:RadGrid ID="RadGrid2" DataSourceID="SqlDataSource2" runat="server">
</telerik:RadGrid>
</telerik:RadPageView>
</telerik:RadMultiPage>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" runat="server"
SelectCommand="SELECT BE FROM Projects WHERE (FY = @FY) AND ([BA] = @BA) GROUP BY BE">
<SelectParameters>
<asp:QueryStringParameter Name="FY" QueryStringField="FY" Type="String" />
<asp:QueryStringParameter Name="BA" QueryStringField="BA" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2"
ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" runat="server"
SelectCommand="SELECT * FROM [PROJECTS_INPUT] WHERE (([FY] = @FY) AND ([BA] = @BA) AND ([BE] = @BE)) ">
<SelectParameters>
<asp:SessionParameter Name="FY" SessionField="FY" Type="String" />
<asp:SessionParameter Name="BA" SessionField="BA" Type="String" />
<asp:SessionParameter Name="BE" SessionField="BE" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server" Height="800px" Width="1000px">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</telerik:RadAjaxPanel>
</div>
</form>
</
body>
</
html>
</
asp:Content>
<telerik:RadAjaxPanel ....>
<telerik:RadMultiPage .... > .... </telerik:RadMultiPage> <div class="navSteps"> <div style="float: left; width: 111px;"> <telerik:RadButton ID="btn_previous" runat="server" AutoPostBack="true" CommandName="prev" Text="Previous Step"> <Icon PrimaryIconCssClass="rbPrevious" PrimaryIconTop="6" /> </telerik:RadButton> </div> <div style="float: right; width: 95px;"> <telerik:RadButton ID="btn_next" runat="server" AutoPostBack="true" CommandName="next" Text="Next Step"> <Icon SecondaryIconCssClass="rbNext" SecondaryIconTop="6" /> </telerik:RadButton> </div> </div> </div> <telerik:RadTabStrip ....> ..... </telerik:RadTabStrip> </telerik:RadAjaxPanel>