Questions on UI for ASP.NET AJAX Forum

4 answers

122 views

Hello,

I am attempting to create a Stacked Bar Chart and have so far been unsuccessful. I've attached an image to show you where I'm at and wrote in what I am looking for.. What I really need is the codes (ALAM and DOKE) to be along the X-Axis where currently there is 1 and 2. I also need to show 2 levels of counts for each code, which I kind of have working. I need a count for items that are older than 8 days and a count for items that are 8 items that are 8 and younger. I get the stacked look by creating 2 series, but I can't seem to split out each code by itself.
Thanks

Here is my code. I use an existing data table then manipulate with linq.
----------------------------------------------------------------------------------------------------------------------------------------------------

private void PopulateChart(DataTable dt)

{

// pull fields I need an calculate the shift age.

var query1 = from data in dt.AsEnumerable()

where data.Field<string>("Facility_Code").ToString().Trim() == "DOKE"

|| data.Field<

string>("Facility_Code").ToString().Trim() == "ALAM"

select new

{

FacilityCode = data.Field<

string>("Facility_Code").ToString()

,ShiftAge = data.Field<

DateTime>("Shift_Date") - DateTime.Now

};

// build 0-7 day chart series

TimeSpan ts = new TimeSpan(8, 0, 0, 0); // time span 8 days

// get all my shifts less than 8 days.

var query2 = from row in query1

where row.ShiftAge < ts

group row by row.FacilityCode into grp

orderby grp.Key

select new

{

FacilityCode = grp.Key,

Shifts = grp.Count()

};

// get all my shifts greater or equal to 8 days

var query3 = from row in query1

where row.ShiftAge >= ts

group row by row.FacilityCode into grp

orderby grp.Key

select new

{

FacilityCode = grp.Key,

Shifts = grp.Count()

};

Telerik.Charting.

ChartSeries csUnderEight = new Telerik.Charting.ChartSeries();

csUnderEight.Type = Telerik.Charting.

ChartSeriesType.StackedBar;

csUnderEight.Name =

"Open shifts within 0-7 days.";

csUnderEight.DataLabelsColumn =

"FacilityCode";

csUnderEight.Appearance.LabelAppearance.LabelLocation = Telerik.Charting.Styles.

StyleSeriesItemLabel.ItemLabelLocation.Outside;

Telerik.Charting.

ChartSeries csEightAndOver = new Telerik.Charting.ChartSeries();

csEightAndOver.Type = Telerik.Charting.

ChartSeriesType.StackedBar;

csEightAndOver.Name =

"Open shifts within 8-14 days.";

csEightAndOver.DataLabelsColumn =

"FacilityCode";

csEightAndOver.Appearance.LabelAppearance.LabelLocation = Telerik.Charting.Styles.

StyleSeriesItemLabel.ItemLabelLocation.Outside;

// csEightAndOver.DataLabelsColumn = "FacilityCode";

this.chartOpenShifts.Series.Add(csUnderEight);

this.chartOpenShifts.Series.Add(csEightAndOver);

foreach (var item in query2)

{

csUnderEight.AddItem(item.Shifts,item.FacilityCode);

}

foreach (var item in query3)

{

csEightAndOver.AddItem(item.Shifts,item.FacilityCode);

}

this.chartOpenShifts.DataGroupColumn = "FacilityCode";

//this.chartOpenShifts.PlotArea.XAxis.DataLabelsColumn = "FacilityCode";

//this.chartOpenShifts.PlotArea.DataTable.Visible = true;

//this.chartOpenShifts.DataSource =query;

//this.chartOpenShifts.Series

//this.chartOpenShifts.PlotArea.XAxis.DataLabelsColumn = "Facility_Code";

//this.chartOpenShifts.DataBind();

}

Chart (Obsolete)

answered on 15 Aug 2011

5 answers

158 views

Dock Control Command in titlebar

Hi ,
I am using the dock control and the command button for exapnad and collapse seems to disappear on hover. Also, the default bullet appears along side with the expand and collapse image. I have properly referenced the skin files and css. I would also like to use the custom command in the title bar template in order to make use of rss feed, so people can subscribe to it.
Could you please help?
Thanks,

Dock

answered on 15 Aug 2011

1 answer

73 views

Rad schedular

i am using radschedular. when i am right click on control it is throwing script error that object does not support this propery or method. i am not allowing user to edit, create appointments. please reply as soon as possible.

If i am making allowinsert=false. then this error is coming.

Scheduler

answered on 15 Aug 2011

1 answer

212 views

Setting of time duration, starttime, endtime

Hi,

I use RadScheduler in my Project. For me the scheduleviewtype, starttime, endtime, and the time interval data comes from another screen. How to set starttime, endtime for scheduler, and how to set duration of hrs in the scheduler like 15min, 30min, 60min.

<div id="divSchedular" runat="server">

<div style="width: 810px; background: transparent url('Images/background.png') no-repeat 0 0;

padding-left: 20px;">

<telerik:RadScheduler runat="server" ID="RadScheduler1" Skin="Web20" CustomAttributeNames=

"DisplayStartTime,EventRecurrenceId, EventColor, DisplayEndTime, StartDate,EndDate,DisplayPermitName,DisplayFacilityVisibility,DisplayClientVisibility,DisplayResourceVisibility,Id,DisplayPermitVisibility,DisplayFacilityname,DisplayResourceName,DisplayClientName"

DataStartField="StartDate" EnableDatePicker="true" GroupingDirection="Horizontal"

EnableEmbeddedSkins="true" DataDescriptionField="EventColor" MonthView-GroupingDirection="Horizontal"

DataEndField="EndDate" ShowFullTime="true" DataKeyField="Id" DataRecurrenceParentKeyField="EventRecurrenceId"

DataRecurrenceField="EventRecurrenceId" FirstDayOfWeek="Sunday" LastDayOfWeek="Saturday"

DataSubjectField="DisplayPermitName" AllowDelete="false" AllowEdit="false" TimelineView-NumberOfSlots="7"

AllowInsert="false" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound">

<advancedform modal="true" />

<%--daystarttime="08:00:00" dayendtime="23:00:00"--%>

<appointmenttemplate>

<div>

<table>

<tr>

<td id="divColorChange" runat="server" width="0.5%">

<div>

</div>

</td>

<td>

<%--CustomAttributeNames="StartTime,EndTime,SessionDate,DisplayPermitName,StartDate,DisplayClientVisibility,DisplayResourceVisibility,DisplayFacilityVisibility,EndDate,ID,DisplayPermitVisibility,DisplayFacilityName,DisplayResourceName,DisplayClientName,Event_ID,DisplayRoomNumber"--%>

<div class="AlignCenter">

<%--Permit Name--%>

<asp:Image ID="imageRecurrenceIcon" runat="server" ImageUrl="~/Images/Icon_Info.gif" />

<asp:LinkButton runat="server" ID="lblDisplayPermitName" OnClick="RedirectToEventMaintenance"

Style="font-weight: bold; color: Black; word-wrap: break-word; font-size: 12px;"

Visible='<%# Convert.ToBoolean(Eval("DisplayPermitVisibility")) %>' CommandArgument='<%# Eval("Id") + "~" + Eval("StartDate")%>'>

<%# Eval("DisplayPermitName")%>

</asp:LinkButton>

<asp:Label ID="labelPermitName" Style="font-weight: normal; color: Black; word-wrap: break-word;

font-size: 10px;" runat="server" Text='<%# Eval("DisplayPermitName")%>' CssClass="FontBold"></asp:Label>

<br />

<%--Start Time--%>

<%--End Time--%>

<asp:Label runat="server" ID="lblStartTime" Style="font-weight: normal; word-wrap: break-word;

color: Black; font-size: 10px; text-align: left; float: left;">

<%# Eval("DisplayStartTime")%></asp:Label>

-

<asp:Label runat="server" ID="lblEndTime" Style="font-weight: normal; word-wrap: break-word;

color: Black; font-size: 10px; text-align: left; float: left;">

<%# Eval("DisplayEndTime")%></asp:Label>

<br />

<%--Client Name--%>

<asp:Label runat="server" ID="lblDisplayClientTypeName" Style="font-weight: normal;

word-wrap: break-word; color: Black; font-size: 10px; width: 95px; text-align: left;

float: left;" Visible='<%# Convert.ToBoolean(Eval("DisplayClientVisibility")) %>'>

<%# Eval("DisplayClientName")%>

</asp:Label><br />

<%--Text="<left>Client :</left>"--%>

<%--Facility Name--%>

<asp:Label runat="server" ID="lblDisplayFacilityName" Style="font-weight: normal;

color: Black; font-size: 10px; word-wrap: break-word; width: 95px; float: left;

float: left; text-align: left; float: left;" Visible='<%# Convert.ToBoolean(Eval("DisplayFacilityVisibility")) %>'>

<%# Eval("DisplayFacilityname")%>

</asp:Label><%--Text="<left>Facility :</left>"--%>

<br />

<%--Resource Name--%>

<asp:Label runat="server" ID="lblDisplayResourceName" Style="font-weight: normal;

color: Black; font-size: 10px; word-wrap: break-word; width: 95px; text-align: left;

float: left;" Visible='<%# Convert.ToBoolean(Eval("DisplayResourceVisibility")) %>'>

<%# Eval("DisplayResourceName")%>

</asp:Label><br />

<%--Text="<left>Resource :</left>" --%>

<%--Resource Name--%>

<asp:Label runat="server" ID="Label2" Style="font-weight: normal; width: 95px; color: Black;

font-size: 10px; text-align: left; word-wrap: break-word; float: left;"><%-- Text="<left>Room :</left>"--%>

<%# Eval("DisplayResourceName")%>

</asp:Label><br />

<br />

<asp:LinkButton ID="linkButtonMore" Style="font-weight: bold; width: 95px; color: Black;

font-size: 10px;" runat="server" Text="More"></asp:LinkButton>

</div>

</td>

</tr>

</table>

</div>

</appointmenttemplate>

</telerik:RadScheduler>

</div>

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="420" Height="300"

ToolTipZoneID="RadScheduler1" Animation="Resize" HideEvent="LeaveToolTip" Text="Loading..."

RelativeTo="Mouse" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" OnClientBeforeShow="clientBeforeShow">

</telerik:RadToolTipManager>

</div>

Please guide me.

Thanks,
Hema L.

Scheduler

answered on 15 Aug 2011

1 answer

53 views

Item Created event not firing..Version error.

Hello,

I had telerik dll version 2011.1.519.40.I used radlistview control for displaying controls in template on my asp.net page.Whenever I give blank datatable as datasource to listview it goes to Item_created event and shows blank controls.That is good and desired...

But now I updated telerik dll version to 2011.2.712.40 not I am not getting item_Created event fired at the time of empty datatable given as datasource , so no controls are visible on the page from insert template.

Please guide me in this ASAP.

Thanks,

ListView

answered on 15 Aug 2011

1 answer

196 views

Changlng visiblity on controls within RadPanelBar

I am trying to hide/unhide an asp:Panel contained with a RadPanelBar. It works the initial page display (Page.Load) but when I try to change the visiblity of the asp:Panel once the screen is displayed nothing happens.

<telerik:RadPanelBar ID="pnlBar" EnableEmbeddedSkins="False" Skin="Panel_AssetDetails"

runat="server" AllowCollapseAllItems="false" ExpandMode="MultipleExpandedItems"

Width="516px">

<Items>

<telerik:RadPanelItem runat="server" Text="Asset Details" Expanded="true">

<Items>

<telerik:RadPanelItem Value="AssetDetails" runat="server">

<ItemTemplate>

<table border="0">

<tr>

<td>

<b>File Size</b>

</td>

<td>

<asp:Label ID="lblFileSize" runat="server" Text=""></asp:Label>

</td>

</tr>

<asp:Panel ID="ImagePanel4" runat="server" Visible="true">

<tr>

<td>

<b>Resolution</b>

</td>

<td>

<asp:Label ID="lblResolution" runat="server" Text=""></asp:Label>

</td>

</tr>

</asp:Panel>

<tr>

<td>

<b>Height</b>

</td>

<td>

<asp:Label ID="lblHeight" runat="server" Text=""></asp:Label>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

if (asset.assetType == (int)AssetTypes.Image)

{

((Panel)(pnlBar.FindItemByValue ("AssetDetails").FindControl ("ImagePanel4"))).Visible = true;

}

else if (asset.assetType == (int)AssetTypes.Document)

{

((Panel)(pnlBar.FindItemByValue ("AssetDetails").FindControl ("ImagePanel4"))).Visible = false;

}

PanelBar

answered on 15 Aug 2011

1 answer

125 views

RadScheduler1.AppointmentClick does not redirect

Hi,

I am trying to use the Rad Scheduler for Upcoming Events page. Planning to set each appointment clickable and adding a redirect link when the event 'AppointmentClick' fires however it does not redirect to the new page specified. The redirect is a working link. Please help me on this.

Thanks in advance.
Srilal

Scheduler

answered on 15 Aug 2011

1 answer

272 views

RadAjaxManager and EventName?

Hello -

I have a simple RadGrid that returns a number of records with href links. It also has paging enabled. I would like to see a LoadingPanel when the user clicks one of the links in the RadGrid, but not when they make a paging request. From what I have read this would be possible utilizing the EventName when creating the AjaxSetting, like so:

<telerik:AjaxSetting AjaxControlID="MyRadGrid" EventName="SelectedIndexChanged">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panelResults" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:RadGrid ID="MyRadGrid" runat="server" GridLines="None" Width="700px" AllowPaging="true" PageSize="10" OnNeedDataSource="MyRadGrid_NeedDataSource" EnableViewState="true" Visible="true">

<MasterTableView Caption="My Report" CommandItemDisplay="Top" CommandItemSettings-ShowAddNewRecordButton="false" DataKeyNames="ReportInfoID" NoDetailRecordsText="Nothing Found.">

<PagerStyle Mode="Slider" />

<Columns>

<telerik:GridButtonColumn UniqueName="ReportURL" DataTextField="Name" CommandName="Select"></telerik:GridButtonColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

The above markup works great for selecting the links in the RadGrid and showing the LoadingPanel, but it also shows during the paging requests. Essentially it performs the same regardless of if I specify the EventName or not. I can change EventName to anything and it still always fires.

Am I missing something here or is this not possible?

Thanks

Ajax

answered on 15 Aug 2011

1 answer

62 views

Wierd behavior with RadButton in IE8

Here is a really simple example and I wish I could show a screenshot. What I'm doing is trying to create a margin. In only IE (using version 8) the margin in the div seems to affect the button. It creates an additional set of padding in front of the button and almost toward the end of the button, a strip of white padding overlays the button. I am not using any additional styling. Actually, when you tab to it, the white space in the front of the button also appears to be part of the button. This is it on the page. I have tried several things from using a css class (not doing that here to keep it as simple as possible) to including an additional div tag. or using span tags

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

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

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

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

<head id="Head1" runat="server">

<title></title>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server" />

<div style="margin: 20px">

<p>text that is indented with margin: 20px, however, the button seems to take on strange margins</p>

<telerik:RadButton runat="server" id="btnContinue" Text="Example" />

</div>

</form>

</body>

</html>

Button

answered on 15 Aug 2011

1 answer

151 views

Template on root level only

Here is my situation. I have a tree that uses load on demand. The first level is Offices and the second level are Contacts in corresponding offices.
Now, the data source for the offices also returns the number of contacts in the office, which is helpful for this load on demand scenario (the user now knows if the office has nodes in it). However, to display the number in a different color beside the office title, I need to use a template of the Office Nodes. But I want the Contact Nodes below to be regular RadTreeNodes. Now I got it working one way programmatically, but I feel using template on the ASPX side would faster.

Here is my attempt at the ASPX side, which is completely broken and completely wrong, but I'm using it to give you a sense of where I am going.

<telerik:RadTreeView ID="_tvOffice" AutoPostBack="true" Width="100%" Skin="Office2007"

EnableDragAndDropBetweenNodes="true" EnableDragAndDrop="True"

runat="server"

DataFieldID="ID" ContextMenuItemClick="_tvOffice_ContextMenuItemClick" OnNodeExpand="_tvOffice_NodeExpand">

<NodeTemplate>

<telerik:RadTreeNode runat="server">

</telerik:RadTreeNode>

</NodeTemplate>

<Nodes>

<telerik:RadTreeNode EnableContextMenu="false" CssClass="spIcon spFldr_C" AllowDrag="false"

AllowDrop="true" ExpandMode="ServerSideCallBack" runat="server">

<NodeTemplate>

<asp:Label ID="_lblTitle" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.officeTitle")%>'></asp:Label>

<asp:Label ID="_lblCount" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ContactCount", "({0})")%>'

CssClass="lblProjectNum"></asp:Label>

</NodeTemplate>

</telerik:RadTreeNode>

</Nodes>

<DataBindings>

<telerik:RadTreeNodeBinding Depth="0" EnableContextMenu="false" CssClass="spIcon spFldr_C" AllowDrag="false"

AllowDrop="true" ExpandMode="ServerSideCallBack" TextField="officeTitle" ValueField="ID" CategoryField="Category" />

</DataBindings>

</telerik:RadTreeView>

private void RebindOfficeTree(int? companyId)

{

if (companyId == null) return;

var db = new DBStoredProc();

var officeList = db.Offices_OnDemand(companyId);

_tvOffice.DataSource = officeList;

_tvOffice.DataBind();

}

private static void PopulateContactsByOffice(RadTreeNodeEventArgs e)

{

if (e == null || e.Node.Value == null) return;

var db = new DataContext();

var officeId = int.Parse(e.Node.Value);

var contactList = Contacts.LoadByOfficeId(db, officeId);

foreach (var contact in contactList)

{

var node = new RadTreeNode

{

Text = contact.FullName,

Value = contact.Id.ToString(),

CssClass = "spIcon spContact",

Category = "Contact",

AllowDrag = true,

AllowDrop = false

};

e.Node.Nodes.Add(node);

}

e.Node.Expanded = true;

}

Also, I am grabbing the offices by clicking on a Company Node on another tree, but using per-node template, a "blank" tree node appears in the Office tree on page load (before selecting any company).

The point here is speed. I want to use the fastest, most optimized method to do this.

TreeView

answered on 15 Aug 2011