Questions on UI for ASP.NET AJAX Forum

1 answer

89 views

Hello,
how can I set the font for the text in the red frames and the color of the external border,
now in green?
Many thanks
AB

Editor

answered on 11 Jun 2012

1 answer

123 views

Hyperlink manager dialog customization

Hello,
how can I set the font for the text in the red frames and the border color in the green frames?
Many thanks
AB

Editor

answered on 11 Jun 2012

2 answers

78 views

[Solved] Image items offset

Hello,

I've got an image offset in the RadMenu- it seems by just by a pixel or two. The "Feedback" button is just a pixel higher than the help button. The "Admin" button is just higher than the rest of the buttons. (Admin and Feedback are the first buttons on two different RadMenu groups).

I've triple checked the source images, and it's not in there. I've also swapped out images and it always appears on the first RadMenu item.

It started when I added a custom skin based off of Metro.

Menu

answered on 11 Jun 2012

3 answers

166 views

[Solved] Empty Message

Hey,

I have searched for quite some time now but did not find a solution. Maybe you can tell me if it's possible to display a message if a radrotator that is filled by a 'load on demand'-webservice responds with zero items?

The main problem is that the "ItemsRequested"-Event is not fired if the return value of the webservice is an empty array.

Thank you for your support.
Regards
Kris

Rotator

answered on 11 Jun 2012

2 answers

197 views

[Solved] Client side OnMouseOver stop animation on image

I have a FromCode Rotator that I'm using to scroll through several images, and then repeat itself. Eventually, some of the pictures will be clickable links to other pages.

I am using the OnClientMouseOver and OnClientMouseOut to mouse over the image, stop on the item, and continue auto scrolling after mouse out.

However, the image item seems to only stop exactly where the cursor is and on occasion, throw the width off of the next and continuing image items. (See attached image Rotator1.jpg) Note that the images scroll just fine within their size when no stopping or starting take place with mouseover.

What I would like for it to do, is to stop on the current image frame while mouseover(wherever the cursor is inside the frame), pause on that frame until mouseout, and continue scrolling to the next image frame.

Here is my markup.

<asp:Content ID="LandingHeader" runat="server" ContentPlaceHolderID="MainHeaderContent">

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

</telerik:RadStyleSheetManager>

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

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

</telerik:RadAjaxManager>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Width="825" Height="725" KeepInScreenBounds="True" Behaviors="Close" Animation="FlyIn" Modal="True" EnableEmbeddedSkins="True" EnableEmbeddedBaseStylesheet="True">

<Windows>

<telerik:RadWindow ID="PopUp" runat="server" NavigateUrl="PopUpMockUp.aspx">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<script type="text/javascript">

// RadWindow

function ShowExisting1()

{

window.radopen(null, "PopUp");

}

//RadRotator

// function OnClientLoad(sender, eventArgs)

// {

// sender.set_scrollDuration(500);

//

// sender.start();

// }

function OnClientLoad(rotator, args)

{

if (!rotator.autoIntervalID)

{

rotator.autoIntervalID = window.setInterval(function ()

{

rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);

}, rotator.get_frameDuration());

}

function OnClientMouseOver(rotator)

{

rotator.stop();

}

function OnClientMouseOut(rotator)

{

rotator.start();

}

</script>

<div style=" margin-left: 475px;">

<telerik:RadRotator RotatorType="FromCode" ID="RadRotator1" runat="server"

Width="590" ItemWidth="590" ScrollDirection="Left, Right"

SlideShowAnimation-Type="Fade"

Height="300" ItemHeight="275" FrameDuration="4000" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"

ScrollDuration="1000" SkinID="WebBlue"

BorderStyle="None" OnClientLoad="OnClientLoad" PauseOnMouseOver="False" SlideShowAnimation-Duration="500">

<ItemTemplate>

<asp:Image ID="Image1" Width="590" Height="275" runat="server"

ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>" />

</ItemTemplate>

</telerik:RadRotator>

</div>

</asp:Content>

Rotator

answered on 11 Jun 2012

4 answers

250 views

RadScheduler Appointment is rendered with wrong end date

Hello,

I have problem with Appointment rendering. I am using Web service rendering in ASP.NET MVC. Since I have changed MinutesPerRow="15" and RowHeight="12px" the appointments are rendered with wrong end date. I was debugging OnClientAppointmentDataBound and the appointment is initialized well, but the data shown in calendar are wrong.
(ex. data in eventArgs.get_appointment() are 9:00 -> 13:15 but they are rendered as 9:00 -> 10:45).
Do You have any idea what is wrong?

Thank You Jan

Sample code is below:

    
               <script type="text/javascript">  
        
             function OnClientAppointmentEditing(sender, eventArgs) { 
        
                        //cancel showing inline edit form - it will be redirected to Appointment/Edit 
        
                        eventArgs.set_cancel(true); 
        
                    } 
        
                    function OnClientAppointmentDoubleClick(sender, eventArgs) { 
        
                        var apt = eventArgs.get_appointment(); 
        
                        var appType = apt.get_attributes().getAttribute("appointmentType"); 
        
                        if (appType == "Appointment") 
        
                            document.location = '<%= HttpContext.Current.CreateUrl("/Appointment/Edit/") %>' + apt._id; 
        
                        if (appType == "Email") 
        
                            document.location = '<%= HttpContext.Current.CreateUrl("/Email/Edit/") %>' + apt._id; 
        
                        if (appType == "Call") 
        
                            document.location = '<%= HttpContext.Current.CreateUrl("/Call/Edit/") %>' + apt._id; 
        
                        if (appType == "Task") 
        
                            document.location = '<%= HttpContext.Current.CreateUrl("/Task/Edit/") %>' + apt._id; 
        
                    } 
        
                    function OnClientTimeSlotClick(sender, eventArgs) { 
        
                        //Redirect to appointment create 
        
                        document.location = '<%= HttpContext.Current.CreateUrl("/Appointment/Create?") %>StartTime=' + eventArgs.get_time().format('dd/MM/yyyy H:mm'); 
        
                    } 
        
                    function OnClientAppointmentDataBound(sender, eventArgs) { 
        
                        var apt = eventArgs.get_appointment(); 
        
                        var allowEditValue = apt.get_attributes().getAttribute("allowEdit"); 
        
                        var assignedTo = apt.get_attributes().getAttribute("assignedTo"); 
        
                        var description = apt.get_attributes().getAttribute("description"); 
        
                        var appType = apt.get_attributes().getAttribute("appointmentType"); 
        
                        var appTypeLocalized = apt.get_attributes().getAttribute("appointmentTypeLocalized"); 
        
                        var cssClass = ''; 
        
                        if (appType != undefined) { 
        
                            cssClass = 'AppointmentType_' + appType + ' '; 
        
                        } 
        
                        if (allowEditValue == "false") { 
        
                            apt.set_allowEdit(false); 
        
                            cssClasscssClass = cssClass + 'AppEditDisabled'; 
        
                        } 
        
                        var tooltip = apt.get_subject(); 
        
                        tooltip = appTypeLocalized + ': ' + tooltip + (assignedTo != undefined ? ' (' + assignedTo + ')&#13;' : ''); 
        
                        if (description != undefined) { 
        
                            tooltip += description; 
        
                        } 
        
                        apt.set_toolTip(tooltip); 
        
                        apt.set_cssClass(cssClass); 
        
                    } 
        
            </script> 
        
            <telerik:RadCodeBlock runat="server" ID="InitialScriptCodeBlock1"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptLocalization="true" 
        
                        EnableScriptGlobalization="true" /> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> 
        
                        <ClientEvents /> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="Panel1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Office2007" 
        
                         BackImageUrl="~/Content/Images/loadingAnimation.gif" BackgroundPosition="Center" /> 
        
                    <telerik:RadAjaxPanel ID="Panel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"> 
        
                        <telerik:RadScheduler runat="server" ID="RadScheduler1" AllowDelete="false" AllowEdit="true" RowHeight="12px" 
        
                            AllowInsert="false" MinutesPerRow="15" StartEditingInAdvancedForm="false" StartInsertingInAdvancedForm="false" 
        
                            OnClientAppointmentDoubleClick="OnClientAppointmentDoubleClick" OnClientTimeSlotClick="OnClientTimeSlotClick" 
        
                            OnClientAppointmentDeleting="OnClientAppointmentDeleting" OnClientAppointmentDataBound="OnClientAppointmentDataBound" 
        
                            Height="900px" OnClientAppointmentEditing="OnClientAppointmentEditing" OnClientAppointmentContextMenuItemClicked="appointmentContextMenuItemClicked" 
        
                            SelectedView="WeekView" DayHeaderDateFormat="dddd, dd MMMM yyyy" HoursPanelTimeFormat="HH:mm"> 
        
                            <AppointmentContextMenus> 
        
                                <%--The appointment context menu interaction is handled on the client--%> 
        
                                <%--See the JavaScript code above--%> 
        
                                <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerAppointmentContextMenu"> 
        
                                    <Items> 
        
                                        <telerik:RadMenuItem Text="Export iCalendar" Value="GenerateVCal" ImageUrl="~/Content/Images/Icons/iCalendar16.png" /> 
        
                                        <telerik:RadMenuItem IsSeparator="True" /> 
        
                                        <telerik:RadMenuItem Text="Delete" Value="CommandDelete" ImageUrl="~/Content/Images/DataEditing/Delete.gif" 
        
                                            Enabled="True" /> 
        
                                    </Items> 
        
                                </telerik:RadSchedulerContextMenu> 
        
                            </AppointmentContextMenus> 
        
                            <TimelineView GroupBy="Calendar" GroupingDirection="Vertical" /> 
        
                            <AdvancedForm Enabled="false" EnableResourceEditing="false" /> 
        
                            <WebServiceSettings Path="~/Models/SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" /> 
        
                        </telerik:RadScheduler> 
        
                    </telerik:RadAjaxPanel> 
        
                </telerik:RadCodeBlock>

Scheduler

answered on 11 Jun 2012

1 answer

210 views

Embedding youtube video in ToolTip

I have a youtube video insdie the RadToolTip. When I close the tooltip, you can still hear the audio in the background. When I mouse back over the tooltip, the video is still playing. How do I essentially destroy the tooltip?

Please show an example of how to pause or stop youtube video embedded into tooltip using Youtube API and JS.

<telerik:RadToolTip ID="VideoToolTip" runat="server"

TargetControlID="TutorialTrigger"

RelativeTo="BrowserWindow"

Position="Center"

Modal="true"

RenderInPageRoot="true"

EnableShadow="false"

Skin="Windows7"

Animation="Resize"

AutoCloseDelay="0"

HideEvent="ManualClose"

ShowDelay="300"

ManualClose="true"

ManualCloseButtonText="Close" OnClientHide="OnClientHiding">

<div style="padding: 10px;">

<iframe width="853" height="480" src="http://www.youtube.com/embed/xxxxxxxx" frameborder="0" allowfullscreen></iframe>

</div>

</telerik:RadToolTip>

I need the On Client Hiding function to gets the reference of the player and eventually stops the video.

Thank you so much

ToolTip

answered on 11 Jun 2012

2 answers

215 views

Exported PDF files corrupt if IgnorePaging set to true

As my title states, whenever I export my grid to pdf, if I set IgnorePaging to true, they export corrupt. If I set it to false, it exports ok. I'm binding to a simple datatable, all column's are auto-generated. Is this a bug?

Oh I should also mention that all other formats export fine, except pdf. I've tried virtually everything, turning off styles etc.

Grid

answered on 11 Jun 2012

5 answers

478 views

How to get the values of Rad Window ContentTemplate

HI,
i am using rad window ContentTemplate with two RadDateTimePicker contols and one button.

when dates are selected by user and on button click event, i want to know what dates the user has selected in code behind. can some one please help me.

<telerik:RadWindowManager ID="RadWindowManager1" Title=" Search Filter" ShowContentDuringLoad="TRUE" VisibleStatusbar="false"
ReloadOnShow="true" runat="server" Skin="Sunset" EnableShadow="true"
Animation="FlyIn" EnableTheming="False" AnimationDuration="500">
<Windows>
<telerik:RadWindow ID="RadWindow1" Modal="true" RestrictionZoneID="NavigateUrlZone" runat="server" Behaviors="Close" OnClientClose="OnClientClose"
Width="400">
<ContentTemplate>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
From:
<telerik:RadDateTimePicker ID="DtFromdate" runat="server">
</telerik:RadDateTimePicker>
<asp:RequiredFieldValidator ID="Rffromdate" runat="server" ControlToValidate = "DtFromdate" Text="Select date" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<telerik:RadDateTimePicker ID="DtTodate" runat="server">
</telerik:RadDateTimePicker>
<asp:RequiredFieldValidator ID="Rftodate" runat="server" Text="Select date" ControlToValidate = "DtTodate" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:Button ID="BtnSubmitdata" OnClick="BtnParameters_Click" runat="server" Text="Filter" />

----------------------------------------------------------------------------------------------------------------------------------------------------------------
on code behind i am trying to access the above controls but is is not returning any value.

RadDateTimePicker fromdt = RadWindow1.ContentContainer.FindControl("Rffromdate") as RadDateTimePicker;
RadDateTimePicker todt = RadWindow1.ContentContainer.FindControl("Rftodate") as RadDateTimePicker;

can some one please help me.

General Discussions

answered on 11 Jun 2012

3 answers

111 views

[Solved] Selecting a tab at the 2nd level doesn't change the view

I have a tab strip defined like this ...

<telerik:RadTabStrip runat="server"

ID="RadTabStrip1"

MultiPageID="RadMultiPage1"

ScrollChildren="true"

ScrollButtonsPosition="Right"

PerTabScrolling="true"

SelectedIndex="0">

<Tabs>

<telerik:RadTab Value="tsSearch"

Text="Search"

ScrollChildren="true"

ScrollButtonsPosition="Right"

PerTabScrolling="true">

<Tabs>

<telerik:RadTab Value="tsSearchBasic"

Text="Quick"

PageViewID="pvSearchBasic"/>

<telerik:RadTab Value="tsSearchAdvanced"

Text="Advanced"

PageViewID="pvSearchAdvanced"/>

</Tabs>

</telerik:RadTab>

<telerik:RadTab Value="tsDetails"

Text="Details"

ScrollChildren="true"

ScrollButtonsPosition="Right"

PerTabScrolling="true">

<Tabs>

<telerik:RadTab Value="tsBusiness"

Text="Business"

PageViewID="pvBusiness"/>

<telerik:RadTab Value="tsPersonal"

Text="Personal (Phone/Email)"

PageViewID="pvPersonal"/>

<telerik:RadTab Value="tsPostal"

Text="Personal (Address)"

PageViewID="pvPostal"/>

</Tabs>

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

Now, if I have a 2nd-level tab on tsDetails selected and run this fowllowing javascript ...

startTab = tabStrip.findTabByValue("tsSearchBasic");

if (startTab != null)

{

startTab.select();

startTab.scrollIntoView();

}

What happens is that the relevant PageView shows, suggesting that the correct tab has been selected. However, the tabstrip itself doesn't change.

Rightly or wrongly, I was expecting the top-level tab "Search" to be come active and the relevant 2nd-level tab to be selected.

Either I'm doing it wrong, my expectations are incorrect or it's broken.

Anyone care to hazard a guess?

[later]
I suspect my expectations are wrong :-( as it works as I've described on this demo page too.

TabStrip

answered on 11 Jun 2012