Questions on UI for ASP.NET AJAX Forum

3 answers

264 views

[Solved] Issue with displaying date (from x axis) in tooltip

Hi everyone,

I am using a RadHtmlChart to display some data amount. I display the amount of
all items (as area series) and the new items per day (as column series) on one
timeline. Therefore I use a data table with a date column (type is
System.DateTime), an absolute value column (type is System.Int32) and a per day
value column (type is System.Int32). On page load all data is displayed. There
are two date time pickers (RadDatePicker) to change the displayed time range.
The change of the time range is done on client site. Therefore I take the
original dataset, store it (for later changing back to another time range) and
creating a new data source with all elements in the selected time range. After
the data source is build I bound it to the chart and repaint it. This
works perfectly, but I face a strange
issue with the tooltips. In the tooltips I want to display the date of the
hovered item (this seems to work. I´ve done this as shown in your demo).
Everything seems to work perfectly until I choose a time range containing only
two entries and there date values are not in the same month. The values are
shown correctly in the chart and the JSON string behind (gotten with
chart.get_dataSourceJSON ()) looks correct to me, but the displayed date in
the tooltip is not the correct one.

Could you give me a hint what’s going wrong with my tooltips? Any help would be
appreciated.

The error occurs if you select time range from 15.05.2014 to 10.06.2014 or
16.06.2014 to 05.07.2014.

If you choose another range where one more item is displayed the error
disappears. Also ther is no issue if
you select a time range containing just two elements but in the same month.
Here is the code I use for this lightweight version. If the project is needed i can send it to you

The aspx page:

001.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

002.

003.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

004.

005.<html xmlns="http://www.w3.org/1999/xhtml">

006.<head runat="server">

007. <title></title>

008. <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

009.</head>

010.<body>

011. <form id="form1" runat="server">

012. <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

013. <Scripts>

014. <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js" />

015. <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js" />

016. <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

017. </Scripts>

018. </telerik:RadScriptManager>

019. <script type="text/javascript">

020. var fullAreaChartDataSource;

021. var isFirstLoad = true;

022.

023. function SaveFullAreaChartDataSource() {

024. var areaChart = $find('<%=AreaChart.ClientID %>');

025. fullAreaChartDataSource = eval(areaChart.get_dataSourceJSON());

026. isFirstLoad = false;

027. }

028.

029. function SetSelectedTimSpanToAreaChart() {

030. if (isFirstLoad) {

031. SaveFullAreaChartDataSource();

032. }

033. var startDate = $find('<%=from.ClientID %>').get_selectedDate();

034. var endDate = $find('<%=to.ClientID %>').get_selectedDate();

035.

036. var filteredData = [];

037. $(fullAreaChartDataSource).each(function () {

038. if ((this.date >= startDate) && (this.date <= endDate)) filteredData.push(this);

039. });

040.

041. var areaChart = $find('<%=AreaChart.ClientID %>');

042.

043. //Set the new datasource

044. areaChart.set_dataSource(filteredData);

045.

046. //Turning animation on before repainting the chart

047. areaChart.set_transitions(true);

048.

049. //Redrawing the chart

050. areaChart.repaint();

051. }

052.

053. function UpdateDatePickerAllowedValues() {

054. var startDate = $find('<%=from.ClientID %>').get_selectedDate();

055. var endDate = $find('<%=to.ClientID %>').get_selectedDate();

056.

057. var allowedMaxDateForStartDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() - 1);

058. var allowedMinDateForEndDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 1);

059.

060. $find('<%=from.ClientID %>').set_maxDate(allowedMaxDateForStartDate);

061. $find('<%=to.ClientID %>').set_minDate(allowedMinDateForEndDate);

062. SetSelectedTimSpanToAreaChart();

063. }

064. </script>

065. <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

066. </telerik:RadAjaxManager>

067. <div>

068. <table>

069. <tr>

070. <td><span class="riSingle RadInput RadInput_IBB riResizable"><label class="riLabel">Von:</label></span></td>

071. <td>

072. <telerik:RadDatePicker runat="server" ID="from" Skin="MetroTouch" DatePopupButton-ToolTip="Wählen Sie das Startdatum für die anzuzeigenden Registrierungen" Calendar-FirstDayOfWeek="Monday" Calendar-NavigationCaption="Titel und Navigation" Calendar-NavigationSummary="Titel und Navigation die das aktuelle Jahr und den aktuellen Monat anzeigen können" DateInput-ShortYearCenturyEnd="2113" DateInput-ToolTip="Das Startdatum">

073. <DatePopupButton />

074. <Calendar ID="Calendar2" runat="server" EnableMonthYearFastNavigation="False">

075. </Calendar>

076. <ClientEvents OnDateSelected="UpdateDatePickerAllowedValues" />

077. </telerik:RadDatePicker>

078. </td>

079. <td><span class="riSingle RadInput RadInput_IBB riResizable"><label class="riLabel">Bis:</label></span></td>

080. <td>

081. <telerik:RadDatePicker runat="server" ID="to" Skin="MetroTouch" DatePopupButton-ToolTip="Wählen Sie das Enddatum für die anzuzeigenden Registrierungen" Calendar-FirstDayOfWeek="Monday" Calendar-NavigationCaption="Titel und Navigation" Calendar-NavigationSummary="Titel und Navigation die das aktuelle Jahr und den aktuellen Monat anzeigen können" DateInput-ShortYearCenturyEnd="2113" DateInput-ToolTip="Das Enddatum">

082. <DatePopupButton />

083. <Calendar ID="Calendar1" runat="server" EnableMonthYearFastNavigation="False">

084. </Calendar>

085. <ClientEvents OnDateSelected="UpdateDatePickerAllowedValues" />

086. </telerik:RadDatePicker></td>

087. </tr>

088.</table>

089.<telerik:RadHtmlChart runat="server" ID="AreaChart" Skin="MetroTouch">

090. <ChartTitle Text="Itemübersicht"></ChartTitle>

091. <Legend>

092. <Appearance Position="Bottom" Visible="True"></Appearance>

093. </Legend>

094. <PlotArea>

095. <Series>

096. <telerik:ColumnSeries Name="Items pro tag" DataFieldY="perDayValue">

097. <TooltipsAppearance Color="#FFFFFF">

098. <ClientTemplate>

099.

#if(value > 1) {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # neue Items #} else {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # neues Item #} #

100. </ClientTemplate>

101. </TooltipsAppearance>

102. <Appearance FillStyle-BackgroundColor="#007B9A"></Appearance>

103. <LabelsAppearance Visible="false" />

104. </telerik:ColumnSeries>

105.

106. <telerik:AreaSeries Name="Items insgesamt" DataFieldY="absoluteValue" MissingValues="Interpolate">

107. <TooltipsAppearance Color="#FFFFFF">

108. <ClientTemplate>

109.

#if(value > 1) {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # Items #} else {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # Item #} #

110. </ClientTemplate>

111. </TooltipsAppearance>

112. <LineAppearance LineStyle="Normal" Width="2px" />

113. <Appearance FillStyle-BackgroundColor="#00ADCC"></Appearance>

114. <LabelsAppearance Visible="false" />

115. </telerik:AreaSeries>

116. </Series>

117. <XAxis DataLabelsField="date" Type="Date" MajorTickType="None" MinorTickType="None">

118. <LabelsAppearance Visible="false"></LabelsAppearance>

119. <MinorGridLines Visible="false" />

120. <MajorGridLines Visible="false" />

121. </XAxis>

122. <YAxis>

123. <MinorGridLines Visible="false" />

124. <MajorGridLines Visible="false" />

125. <TitleAppearance Position="Center" RotationAngle="0" Text="Items" />

126. <LabelsAppearance DataFormatString="{0}" />

127. </YAxis>

128.</PlotArea>

129.</telerik:RadHtmlChart>

130. </div>

131. </form>

132.</body>

133.</html>

The code behind:

01.using System;

02.using System.Data;

03.

04.public partial class Default : System.Web.UI.Page

05.{

06. protected void Page_Load(object sender, EventArgs e)

07. {

08. this.InitializeControls();

09. }

10.

11. /// <summary>

12. /// Initializes the date pickers with min, max and selected value. Also

13. /// creates connect the dummy dataset to the chart and bind it.

14. /// </summary>

15. private void InitializeControls()

16. {

17. this.from.MinDate = DateTime.Parse("13.05.2014");

18. this.from.SelectedDate = DateTime.Parse("13.05.2014");

19. this.from.MaxDate = DateTime.Parse("04.07.2014");

20.

21. this.to.MinDate = DateTime.Parse("14.05.2014");

22. this.to.SelectedDate = DateTime.Parse("05.07.2014");

23. this.to.MaxDate = DateTime.Parse("05.07.2014");

24.

25. this.AreaChart.DataSource = this.GetDummyDataSource();

26. this.AreaChart.DataBind();

27. }

28.

29. /// <summary>

30. /// Creates a dataset containing some dummy data.

31. /// </summary>

32. /// <returns><c>the dummy data dataset</c></returns>

33. private DataSet GetDummyDataSource()

34. {

35. DataTable table = new DataTable("itemData");

36.

37. string dateColumnName = "date";

38. string absolutValueColumnName = "absoluteValue";

39. string perDayValueColumnName = "perDayValue";

40.

41. DataColumn dateColumn = new DataColumn(dateColumnName, Type.GetType("System.DateTime"));

42. DataColumn absoluteValueColumn = new DataColumn(absolutValueColumnName, Type.GetType("System.Int32"));

43. DataColumn perDayValueColumn = new DataColumn(perDayValueColumnName, Type.GetType("System.Int32"));

44.

45. table.Columns.Add(dateColumn);

46. table.Columns.Add(absoluteValueColumn);

47. table.Columns.Add(perDayValueColumn);

48.

49. DataRow firstTestEntry = table.Rows.Add();

50. firstTestEntry[dateColumnName] = DateTime.Parse("13.05.2014");

51. firstTestEntry[absoluteValueColumn] = 1;

52. firstTestEntry[perDayValueColumn] = 1;

53.

54. DataRow secondTestEntry = table.Rows.Add();

55. secondTestEntry[dateColumnName] = DateTime.Parse("15.05.2014");

56. secondTestEntry[absoluteValueColumn] = 2;

57. secondTestEntry[perDayValueColumn] = 1;

58.

59. DataRow thirdTestEntry = table.Rows.Add();

60. thirdTestEntry[dateColumnName] = DateTime.Parse("10.06.2014");

61. thirdTestEntry[absoluteValueColumn] = 5;

62. thirdTestEntry[perDayValueColumn] = 3;

63.

64. DataRow fourthTestEntry = table.Rows.Add();

65. fourthTestEntry[dateColumnName] = DateTime.Parse("11.06.2014");

66. fourthTestEntry[absoluteValueColumn] = 7;

67. fourthTestEntry[perDayValueColumn] = 2;

68.

69. DataRow fifthTestEntry = table.Rows.Add();

70. fifthTestEntry[dateColumnName] = DateTime.Parse("16.06.2014");

71. fifthTestEntry[absoluteValueColumn] = 8;

72. fifthTestEntry[perDayValueColumn] = 1;

73.

74. DataRow sixthTestEntry = table.Rows.Add();

75. sixthTestEntry[dateColumnName] = DateTime.Parse("05.07.2014");

76. sixthTestEntry[absoluteValueColumn] = 10;

77. sixthTestEntry[perDayValueColumn] = 2;

78.

79. DataSet ds = new DataSet();

80. ds.Tables.Add(table);

81.

82. return ds;

83. }

84.}

Thank you

Chart (HTML5)

answered on 15 Aug 2014

1 answer

193 views

new to radeditor and export to pdf

I am just starting to work with a C#.net 2010 web form application, where I need to make small changes. I have never worked with the RadEditor before. I am getting the following error message when I run the application listed below.

My questions are the following:
1. Where can I obtain a copy of the Radeditor so That I can work with it? My company has a license for teletrik?
2. Once I have the radedior installed, can you tell me how to use it so that I can find the error that is being referred to below?
3. Will using a regular html editor be good enough?

[Exception: Invalid XHTML. RadEditor content should be correct XHTML in order to export to PDF.
Parse error:
Reference to undeclared entity 'Quot'. Line 837, position 105.
at line:
<p style="text-align: left; margin-right: 0px;" dir="ltr"><span style="line-height: 107%; font-family: &Quot;calibri","sans-serif"; font-size: 11pt; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: calibri; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: &Quot;times new roman"; mso-bidi-theme-font: minor-bidi; mso-ansi-language: en-us; mso-fareast-language: en-us; mso-bidi-language: ar-sa;"><br clear="all" style="page-break-before: always; mso-special-character: line-break;">]
   Telerik.Web.UI.RadEditor.PdfExportRenderForm(HtmlTextWriter nullWriter, Control form) +763
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +268
   System.Web.UI.HtmlControls.HtmlForm.RenderChildren(HtmlTextWriter writer) +102
   System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer) +32
   System.Web.UI.HtmlControls.HtmlForm.Render(HtmlTextWriter output) +53
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +57
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.HtmlControls.HtmlForm.RenderControl(HtmlTextWriter writer) +40
   Telerik.Web.UI.RadEditor.PdfExportRenderPage(HtmlTextWriter nullWriter, Control page) +171
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +268
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +8
   System.Web.UI.Page.Render(HtmlTextWriter writer) +29
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +57
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1386

General Discussions

answered on 15 Aug 2014

3 answers

194 views

[Solved] Focus problem -iframe in LightBox control

I have Iframe in lightbox. After loading focus is missing from text box inside test.aspx page? what to do tog et focus into iframe and to controls in iframe without using mouse. Need solution asap please.

<telerik:RadLightBox ID="create" runat="server" Modal="true" DescriptionPosition="Top" Width="1024px" Height="740px" RenderMode="Lightweight" PreserveCurrentItemTemplates="true" ShowNextButton="false" ShowPrevButton="false" ShowMaximizeButton="true" ShowRestoreButton="true">
<ClientSettings>
<AnimationSettings HideAnimation="None" ShowAnimation="None" />
</ClientSettings>

<Items>

<telerik:RadLightBoxItem >

<ItemTemplate >

<div style="height:730px;">
<iframe id="Iframe1" frameborder="0" marginwidth="1" src="test.aspx" runat="server"
style="width: 100%; border: solid 1px; padding: 1px; overflow-y: auto; height: 100%;"></iframe>
</div>

</ItemTemplate>
</telerik:RadLightBoxItem>
</Items>
</telerik:RadLightBox>

LightBox

answered on 15 Aug 2014

5 answers

718 views

How is Height of RadPane auto resized ?

I have a RadGird in a RadPane, i want height of RadPane is auto resized follow content of RadGird. If i set height of RadPane, it's not auto resize . I don't know how to do. Any one help me?

Splitter

answered on 15 Aug 2014

2 answers

205 views

Get count of selected child rows in hierarchical grid in JavaScript

Hi guys,

I am using RadGrid in RadControls for ASPNET AJAX Q2 2008. How do I get a count of all selected rows in the child grids on the clientside (JavaScript). Please note that I am using Q2 2008 RadGrid. The examples I have seen on this site and elsewhere work for newer versions of the RadGrid but they don't work on the Q2 2008 version. Kindly assist. See attachment for the sample of what my grid looks like.

Thanks,
Peterson

Grid

answered on 14 Aug 2014

1 answer

92 views

Class added to Node does not persist after postback

I have two RadTreeViews and am using these to create a data picker... so Available nodes on the left treeView... User Selected nodes on the right treeView...

After the user has selected a node and moved it to the right treeView, I would like to style the nodes as follows:

SelectedNode : Bold [Node Enabled]
ParentNode: Grey [Node Disabled & Node Expanded]
ChildNodes: Normal font [Node Disabled]

I use javascript to achieve this, which works fine the first time round using the 'window.onload' event.

Issue: When I postback the page... all settings remain in place (eg - enabled/disabled) but the styles do not.

I use the trackChanges() and commitChanges() around my javascript code.

I am using the following to remove classes
$telerik.$(node.get_element()).removeClass('bold');

I am using the following to add classes:
$telerik.$(node.get_element()).addClass('bold'); - Does not persist

I am using the following to enable / disable nodes
node.set_enabled(true); - Persists fine...

Can anyone advise why the settings persist but the css styles do not?

Thanks

TreeView

answered on 14 Aug 2014

2 answers

252 views

RadGrid ignoring 'GroupHeaderItemStyle-ForeColor' Attribute

Hi,

I have a RadGrid on one of my ASP pages and I want to change the text color on the group header to something more readable. The default value is quite unreadable, as in the attached example1. I have set the 'GroupHeaderItemStyle-ForeColor="White"'-attribute, but it seems that it is simply ignored at run time. If I set the 'GroupHeaderItemStyle-Font-Bold="true"'-attribute, it is successfully picked up. I have tried setting the 'GroupHeaderItemStyle-CssClass'-attribute to a relevant value as well, but had no success with this as well.

How would I go about achieving this?

The second question I have is how to remove the header columns in the grid for the nested groups as in example 2? I wish to achieve a similar look to the grid in the Telerik example at: http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/grouping/grouping/defaultcs.aspx

Thanks for the assistance!
Regards.

Grid

answered on 14 Aug 2014

4 answers

991 views

trying to understand no license file licensing

I'm on a team that has one license for DevCraft UI Edition and I don't feel like I'm understanding licensing well enough. I've been reading this:
http://www.telerik.com/help/aspnet-ajax/introduction-deploying-on-shared-hosting.html

And I have the following paragraph that I think is key from the purchase confirmation email that went to the developer on my team that we purchased the license thru:
Note: The controls
come with a special build, which does not have domain or server deployment
limitations and can be used in an unlimited number of projects. That same
developer build works without license keys and never throws license key errors.
******************************************************************************************************

I'm not used to this type of licensing so I'd like to confirm: We can install the product on any number of our developer laptops -- the licensed version that we can download from Telerik or did already, deploy to as many servers as we want and all the laptops and servers will not ever display the "unlicensed version" overlay that happens with unlicensed versions.

General Discussions

answered on 14 Aug 2014

1 answer

149 views

Sharing datasources

Is there a way to share a datasource with multiple on-demand RadComboBox that are dynamically generated (not in a repeater)? I guess I am asking if this should be possible, and I am just missing a clue? If it is, is there an example that demonstrates a working version of this?

A simple version of what I am trying to accomplish would be to just populate a page with 10 pairs of linked on-demand RadComboBoxes (each pair consists of a "header" and a "detail" set of data) that use the same datasource (not a web service, just a straight SqlDataSource.)

ComboBox

answered on 14 Aug 2014

13 answers

264 views

RadHTMLChart - Questions

Hi,

We have implemented the RadHTMLChart and have a few questions:
1. Is it possible to set the font size of the chart Title?
2. Is it possible to set the font style to bold for the chart Title?
3. On the pie chart - is it possible to show the values inside the segments of the chart instead of outside (as it is possible to do in the bar charts)

Thanks,

Chart (HTML5)

answered on 14 Aug 2014