Questions on UI for ASP.NET AJAX Forum

2 answers

113 views

Maximum Width ?

This is a good one which came back to me from QA.
It is admittably a bizarre user behavior, but if you do it, it can knock out the whole page with nothing to do but refresh and start over.

So I have 8 or so of these on one page inside a multipage panel. I know it's a bit of overkill. but an Admin can set various custom messages throught out the site and we want to support easy html rendering. which works great !!!

Here is the odd behavior: (user and editor)

If you try resize the window to the maximum size and drag your mouse over the scrollbar or completely off the screen,
the editor locks in place against the scrollbar and it overlays the other editors so you can't see them.

I can grab the corner, but the editor will only move up !
If a try to bring it down in size and move back to the left i can't.

I have tried putting them in panels and playing with the widths of the multipage.
Any other suggestions ?

Is there a way to set a maximum width which a user can resize the window ?

Thank You

***** Addendum - here are screenshots to hopefully make this more clear
screen 1
screen 2

And, it happens if you scroll down over the task bar also.

Editor

answered on 03 Sep 2009

2 answers

157 views

Retrieving RadTimePicker Client-Objects with jQuery

Hello,

I have an application that uses multiple instances of the RadTimePicker control and I am attempting to find a way to group time pickers together so that I can sum the values of the group when the time is selected on a particular control. I arrange these groups as 'cells' on the page that have the following structure:

    
            <asp:Panel ID="CellContainer" runat="server" CssClass="TimesheetCell">  
        
                <asp:Label ID="lblCellDate" runat="server" Visible="false" /> 
        
                <telerik:RadTimePicker ID="rtpPunchInTime" runat="server" MinDate="1/1/1900" 
        
                    TimePopupButton-Visible="false" ClientEvents-OnDateSelected="OnDateSelected" 
        
                    Width="100%" CssClass="TimeField">   
        
                </telerik:RadTimePicker> 
        
                <telerik:RadTimePicker ID="rtpPunchOutTime" runat="server" MinDate="1/1/1900" 
        
                    TimePopupButton-Visible="false" ClientEvents-OnDateSelected="OnDateSelected" 
        
                    Width="100%" CssClass="TimeField">  
        
                </telerik:RadTimePicker> 
        
                <asp:DropDownList ID="ddlLunchTime" runat="server" Width="100%" CssClass="TimeField">  
        
                    <asp:ListItem Text="0 mins" Value="0" /> 
        
                    <asp:ListItem Text="30 mins" Value="0.5" /> 
        
                    <asp:ListItem Text="45 mins" Value="0.75" /> 
        
                    <asp:ListItem Text="1 hour" Value="1" /> 
        
                </asp:DropDownList><br /> 
        
                <asp:DropDownList ID="ddlDinnerTime" runat="server" Width="100%" CssClass="TimeField">  
        
                    <asp:ListItem Text="0 mins" Value="0" /> 
        
                    <asp:ListItem Text="30 mins" Value="0.5" /> 
        
                    <asp:ListItem Text="45 mins" Value="0.75" /> 
        
                    <asp:ListItem Text="1 hour" Value="1" /> 
        
                </asp:DropDownList><br />      
        
                <telerik:RadTextBox ID="txtTimeTotal" runat="server" Width="100%" Enabled="false" Text="0:00" CssClass="CellTotal" /><br /> 
        
            </asp:Panel>

Since the ClientEvents-OnDateSelected event requires an event handler function I am only able to use (sender, args) as my parameters for my OnDateSelected. Within this function I am able to access the id and the client-object of the control that called it, however I'm a bit stuck on figuring out the best way to access the remaining control values in order to sum these values and populate the txtTimeTotal control at the bottom of the cell. I'm using jQuery as a possible solution, and here is what my OnDateSelected function looks like so far:

    
            function OnDateSelected(sender, args) {  
        
                // Get a collection of all the Time Fields in the active cell  
        
                var TimeFields = $("#" + sender.get_id()).parent().parent().children('.TimeField');  
        
                // Loop through the collection and get the values from each field.  
        
                for (var i = 0; i < TimeFields.length; i++) {  
        
                    alert($(TimeFields.get(i)).attr('id'));  
        
                }  
        
            }

Right now all I'm doing is pumping out the id's of the selected controls, but the ClientId's returned from the timepicker are that of the outside wrapper div. The dropdown lists return the expected ClientID's, and I have the client object for the active control in args, so all that's really left for me to figure out is how to properly access the client object for the other TimePicker control (e.g, If a user selects rtpPunchInTime then I need to get rtpPunchOutTime and vice-versia).

Can you suggest a method that will allow me to access the other TimePicker's object without having to use some funky workaround?

Thanks

Calendar

answered on 03 Sep 2009

3 answers

100 views

[Solved] Change Appearence of Hyperlink

Hi,

I have a GridHyperLinkColumn which I set dynamically in the ItemDataBound event. In some cases (based on a boolean value in the underlying business object) the Hyperlinks navigateURL will not be set at all. On these cases I'd like the value to not appear as a hyperlink (not in blue or underlined). Do I need to change to a different column type? What would the code look like for that?

Thanks,
-Mike

Grid

answered on 03 Sep 2009

2 answers

214 views

Toolbar height and grid width

I am almost done with a nice project but get stuck on 2 things:

1. The toolbar doesnt reach the full height of the screen
2. The grid get to wide so we get unwanted scrollbars

Can somebody have a look at my file?

[code]

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="BIS ID Content Runner for the Web " %>

<%

@ 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">

<

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

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

html, body, form

{

margin:0px;

padding:0px;

height:100%;

background-image: url(Skins/Default/Common/Default_Top.jpg);

background-repeat: repeat-x;

}

</style>

var ArchiveShowing = ("<%= myCR.ArchiveShowing %>" == "True");

var OriginalShowing = ("<%= myCR.OriginalShowing %>" == "True");

</script>

function ShowProfileForm() {

window.radopen(

"/Forms/Profile.aspx", "winProfile");

return false;

}

</script>

function ShowInsertForm(id) {

window.radopen(

"/Forms/EditRecord.aspx", "insertForm");

return false;

}

</script>

function ShowEditForm(id) {

window.radopen(

"/Forms/EditRecord.aspx?ID=" + id, "editForm");

return false;

}

</script>

function ShowHelpForm() {

window.radopen(

"Forms/Help.aspx", "winHelp");

return false;

}

</script>

function ShowAboutForm() {

window.radopen(

"Forms/About.aspx", "winAbout");

return false;

}

</script>

function RefreshGrid() {

var masterTable = $find("<%= grMain.ClientID %>").get_masterTableView();

masterTable.rebind();

}

</script>

function RowSelected(sender, args) {

var toolBar = $find("<%=tbMain.ClientID %>");

var grid = $find("grMain");

var MasterTable = grid.get_masterTableView();

var SelectedRows = MasterTable.get_selectedItems();

if (SelectedRows.length > 1) toolBar.findItemByValue("tbWijzig").disable();

if (SelectedRows.length < 1) toolBar.findItemByValue("tbWijzig").disable();

if (SelectedRows.length == 1) toolBar.findItemByValue("tbWijzig").enable();

toolBar.findItemByValue(

"tbVerwijder").enable();

if (SelectedRows.length < 1) toolBar.findItemByValue("tbVerwijder").disable()

if (ArchiveShowing) {

toolBar.findItemByValue(

"tbNaarArch").disable();

if (SelectedRows.length > 0)

toolBar.findItemByValue(

"tbNaarOrg").enable();

if (SelectedRows.length < 1)

toolBar.findItemByValue(

"tbNaarOrg").disable();

}

if (OriginalShowing) {

toolBar.findItemByValue(

"tbNaarOrg").disable();

if (SelectedRows.length > 0)

toolBar.findItemByValue(

"tbNaarArch").enable();

if (SelectedRows.length < 1)

toolBar.findItemByValue(

"tbNaarArch").disable();

}

</script>

</telerik:RadCodeBlock>

</head>

<telerik:RadScriptManager

ID="ScriptManager"

runat="server"

EnableTheming="True">

</telerik:RadScriptManager>

<telerik:RadAjaxManager

ID="amMain"

runat="server" onajaxrequest="amMain_AjaxRequest">

<telerik:AjaxSetting AjaxControlID="amMain">

<telerik:AjaxUpdatedControl ControlID="tbMain" />

<telerik:AjaxUpdatedControl ControlID="lblKop" />

<telerik:AjaxUpdatedControl ControlID="grMain" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="tbMain">

<telerik:AjaxUpdatedControl ControlID="tbMain" />

<telerik:AjaxUpdatedControl ControlID="lblKop" />

<telerik:AjaxUpdatedControl ControlID="grMain" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="grMain">

<telerik:AjaxUpdatedControl ControlID="tbMain"/>

<telerik:AjaxUpdatedControl ControlID="lblKop" />

<telerik:AjaxUpdatedControl ControlID="grMain" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"></telerik:RadStyleSheetManager>

<asp:SqlDataSource

ID="dsPanelbar"

runat="server"

ConnectionString="<%$ ConnectionStrings:ContentRunner %>"

SelectCommand="SELECT * FROM [q_navbarweb]"

onselecting="dsPanelbar_Selecting">

</asp:SqlDataSource>

<asp:SqlDataSource

ID="dsGrid"

runat="server"

ConnectionString="<%$ ConnectionStrings:ContentRunner %>"

oninit="dsGrid_Init"

SelectCommand="SELECT * FROM [t_bezoekers]">

</asp:SqlDataSource>

<telerik:RadToolBar

ID="tbMain"

style="clear:both"

Runat="server"

Width="100%"

BorderStyle="None"

BorderWidth="0px"

onbuttonclick="tbMain_ButtonClick"

Font-Bold="True"

Font-Names="Trebuchet MS" Font-Size="12pt">

<CollapseAnimation

Type="OutQuint"

Duration="200">

</CollapseAnimation>

<Items>

<telerik:RadToolBarButton runat="server" value="tbProfiel" Text="Hallo, Gebruiker" CommandName="cmdProfiel"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="sep1" IsSeparator="True"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbNieuw" Text="Nieuw" CommandName="cmdNieuw"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbWijzig" Text="Wijzig" CommandName="cmdWijzig"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbVerwijder" Text="Verwijder" CommandName="cmdVerwijder"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="sep2" IsSeparator="True"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbNaarOrg" Text="Naar Origineel" CommandName="cmdNaarOrg"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbNaarArch" Text="Naar Archief" CommandName="cmdNaarArch"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" IsSeparator="True" Text="sep3"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbShowOrg" Text="Toon Orginelen" CommandName="cmdToonOrg"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbShowArch" Text="Toon Archief" CommandName="cmdToonArch"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="sep4" IsSeparator="True"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbLogUit" Text="Log uit" CommandName="cmdLogUit"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbHelp" Text="Help" CommandName="cmdHelp"></telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" value="tbAbout" Text="About" CommandName="cmdAbout"></telerik:RadToolBarButton>

</Items>

</telerik:RadToolBar><div style="clear:both"></div>

</div>

<telerik:radsplitter

id="splMain"

runat="server"

height="100%"

width="100%"

Skin="Office2007"

style="clear:both"

HeightOffset="30">

<telerik:radpane

id="LeftPane"

runat="server"

width="212">

<telerik:RadPanelBar

style="clear:left"

ID="pbMain"

Runat="server"

DataFieldID="ID"

DataFieldParentID="ParentID"

DataSourceID="dsPanelbar"

DataTextField="Text"

onitemdatabound="pbMain_ItemDataBound"

width="100%"

Skin="Outlook"

CookieName="ContentRunnerPanelBar"

ExpandMode="FullExpandedItem"

PersistStateInCookie="True"

CollapseDelay="200" ExpandDelay="200" onitemclick="pbMain_ItemClick">

<CollapseAnimation

Duration="220"

Type="InOutElastic" />

<ExpandAnimation

Duration="220"

Type="InOutElastic" />

</telerik:RadPanelBar><div style="clear:both"></div>

</telerik:radpane>

<telerik:radsplitbar id="RadSplitBar1" runat="server" style="clear:both"></telerik:radsplitbar>

<telerik:radpane id="MainPane" runat="server" style="clear:both">

<telerik:RadAjaxPanel

BackImageUrl="~/Common/Images/AppMain/AppMainToolbarBackGround.jpg"

style="clear:both"

ID="apMain"

runat="server"

height="32px"

width="100%">

<asp:Panel

ID="Panel3"

runat="server"

Height="33px"

Width="100%"

BackImageUrl="~/Common/Images/AppMain/AppMainToolbarBackGround3.jpg" CssClass="GridAltRow_Outlook">

<asp:Panel

ID="Panel1"

runat="server"

Height="4px"

Width="100%">

</asp:Panel>

<asp:Label

ID="lblKop"

runat="server"

BorderStyle="None"

BorderWidth="6px"

Font-Names="Trebuchet MS"

Font-Size="Medium"

Text="&nbsp;&nbsp;::BIS ID Content Runner"></asp:Label>

</asp:Panel>

</telerik:RadAjaxPanel>

<telerik:RadGrid

ID="grMain"

runat="server"

AllowFilteringByColumn="True"

AllowPaging="True"

AllowSorting="True"

DataSourceID="dsGrid"

GridLines="None"

Height="99%"

Skin="Outlook"

Width="99%"

onitemcommand="grMain_ItemCommand"

onneeddatasource="grMain_NeedDataSource"

oncolumncreated="grMain_ColumnCreated"

AllowAutomaticDeletes="True"

AllowAutomaticInserts="True"

AllowAutomaticUpdates="True"

AllowCustomPaging="True"

onitemdatabound="grMain_ItemDataBound"

onprerender="grMain_PreRender"

ShowFooter="True"

ShowStatusBar="True" PageSize="100" VirtualItemCount="10"

AllowMultiRowSelection="True"

onselectedindexchanged="grMain_SelectedIndexChanged">

<MasterTableView

DataSourceID="dsGrid"

allowcustomsorting="True"

datakeynames="ID"

CommandItemDisplay="Top">

</RowIndicatorColumn>

</ExpandCollapseColumn>

<img src="Skins/Outlook/Grid/AddRecord.gif" /><a href="#" onclick="return ShowInsertForm();">Nieuw</a>

<img src="Skins/Outlook/Grid/AddRecord.gif" /><a href="#" onclick="return RefreshGrid(1);">Ververs tabel</a>

</CommandItemTemplate>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />

<telerik:GridButtonColumn

ButtonType="LinkButton"

CommandArgument="{0}"

CommandName="MyEdit"

HeaderText=""

Text="Wijzig"

UniqueName="colEdit">

</telerik:GridButtonColumn>

<telerik:GridButtonColumn

ButtonType="LinkButton"

CommandArgument="{0}"

CommandName="MyDelete"

ConfirmText="Wilt u deze regel verwijderen?"

HeaderText=""

Text="Verwijder"

UniqueName="colDelete">

</telerik:GridButtonColumn>

</Columns>

</EditFormSettings>

</MasterTableView>

<ClientSettings

allowkeyboardnavigation="True">

</ClientSettings>

</FilterMenu>

</telerik:RadGrid>

<br />

</telerik:radpane>

</telerik:radsplitter>

<telerik:RadWindowManager

ID="wmMain"

runat="server"

Skin="Default"

Height="500px"

Left="50px"

oninit="wmMain_Init"

Top="50px"

Width="700px">

<telerik:RadWindow

ID="winEdit"

runat="server"

Height="500px"

Left="100px"

NavigateUrl="Forms\EditRecord.aspx"

style="display:none;"

Top="100px"

Width="700px"

Modal="True"

Behaviors="Close" BorderWidth="0px">

</telerik:RadWindow>

<telerik:RadWindow

ID="winProfile"

runat="server"

Left="100px"

NavigateUrl="Forms\Profile.aspx"

style="display:none;"

Top="100px"

width="400"

height="256"

Title="Profile"

Behaviors="Move"

Modal="True"

VisibleStatusbar="False">

</telerik:RadWindow>

<telerik:RadWindow

ID="winHelp"

runat="server"

Left="100px"

NavigateUrl="Forms\Help.aspx"

style="display:none;"

Top="100px"

width="400"

height="256"

Title="help"

Behaviors="Close"

Modal="True"

VisibleStatusbar="False" Behavior="Close">

</telerik:RadWindow>

<telerik:RadWindow

ID="winAbout"

runat="server"

Left="100px"

NavigateUrl="Forms/About.aspx"

style="display:none;"

Top="100px"

width="400"

height="256"

Title="help"

Behaviors="Close"

Modal="True"

VisibleStatusbar="False" Behavior="Close">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

</form>

</

body>

</

html>

[/code]

ToolBar

answered on 03 Sep 2009

4 answers

111 views

RadCalendar presents the same day... twice!

Hi there,

I'm having a bit of a problem with the RadCalendar. Apparently, for some people (few... but still) it seems that the calendar turns up with the same day appearing 2 times. Example: October 2009 is showing the 17th day twice... both on Saturday (which is right) and on the day after (Sunday). This means that this month is actually showing 32 days (the 17th two times) ending up with the 31st day on a Sunday instead of Saturday as it was supposed!!!

Has anyone had this problem before?

Thanks in advance,
César

Calendar

answered on 03 Sep 2009

6 answers

205 views

How to customize the time line view

Hi,

While using the timeline in the scheduler, I amreplacing the resource name with its Image. Though I am able to get the imageto display I have few problems with it

How do I align the image with the appointments?(I have tried with the changing the properties of the Row Height and Row Header width which works well for standard number of resources but cannot be reproduced in a dynamic environment)
On clicking the resource Image I would like to be redirected to a new window. How to do that?
I have saved the image as var binary in the Database. I am using the resource header template and the RadBinary Image control in it to display the image. But, the image does not display correctly. Is there any other control or method for this?

Thanks

Sabrish

Scheduler

answered on 03 Sep 2009

1 answer

125 views

Advanced Template and built-in template

Hi everyone

I have a scheduler that need a a custom advanced template because I had custome field to it. Id like to also keep the recurrence form built in the Scheduler.

How can I have a advanced form without to have to redo the recurrence form?

Alain

Scheduler

answered on 03 Sep 2009

6 answers

140 views

YSOD in radwindow when loading page and moving it down

Problem 1:

When I fire my site, the content section of one RAD Window throws a YSOD. Now the homepage uses 3 radwindows with content from other local files.

Image is here: http://img4.imageshack.us/img4/5599/newpicture2e.png

Markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="201px"
Width="760px">
<br />
<br />
<telerik:RadComboBox ID="RadComboBox1" Runat="server" AutoPostBack="True"
Height="16px" onselectedindexchanged="RadComboBox1_SelectedIndexChanged"
Skin="Black">
<Items>
<telerik:RadComboBoxItem runat="server" Text="Please select a value"
Value="Please select a value" />
<telerik:RadComboBoxItem runat="server" Text="Books" Value="Books" />
</Items>
</telerik:RadComboBox>
<br />
<telerik:RadComboBox ID="RadComboBox2" Runat="server" Skin="Black"
onselectedindexchanged="RadComboBox2_SelectedIndexChanged" Width="160px">
</telerik:RadComboBox>

<br />
<br />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
AllowPaging="True" AllowSorting="True" GridLines="None" ShowGroupPanel="True"
Skin="Black">
<ClientSettings AllowDragToGroup="True">
</ClientSettings>
</telerik:RadGrid>
</telerik:RadAjaxPanel>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:playgroundsConnectionString %>"

SelectCommand="SELECT [Title], [ImagePath], [Thoughts], [Category] FROM [ReadingList]">
</asp:SqlDataSource>
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>

Obivously, it must be the SqlDatasource causing the problems but I can't see anything wrong with this?

Also (2), how can I move this RAD Window down? The div is somewhere in the middle right of the page, but the height has been modified and is going right to the top of the window.

Both of these questions relate to the same RADWindow instance on my webpage.

Thanks

Window

answered on 03 Sep 2009

1 answer

119 views

Important: WebService bind RadGrid in RadSplitter

Hi,
When I add RadGrid binding in WebService to RadSplitter and RadPane when grid is not binding when grid is outside RadSplitter its ok.

Please help.

Grid

answered on 03 Sep 2009

6 answers

204 views

[Solved] Unable to find treeview control using $find()

Hello,

I have added a new button to a radeditor control which is working fine, however when I try and access controls within the aspx page that is displayed using the $find() method I am getting null values returned.

This is the javascript that I am using:

var treeview = $find("<%=uiRadTreeView.ClientID %>");

However, when I try and access any properties of treeview I get javascript errors, for example:

var node = treeview.findNodeByValue(nodeId);

Gives me the following error:

Microsoft JScript runtime error: 'null' is null or not an object.

Any help would be much appreciated.

Thanks,

Ken

TreeView

answered on 03 Sep 2009