Questions on UI for ASP.NET AJAX Forum

3 answers

105 views

Expand Parent and Child Items Client Side

Hi there,

I try to expand the parent and child items in client-side but it seems that you can't. This is my code:

function OnClientItemClicking(sender, eventArgs) {

var item = eventArgs.get_item();

if (item.get_expanded()) {

item.collapse();

}

else {

item.expand();

}

var panelBar = $find("ctl00_RadPanelBar1");

var panelItem = panelBar.findItemByValue("AccountFooter");

panelItem.show();

panelItem = panelBar.findItemByValue("TopicFooter");

panelItem.hide();

var parentItem = item.get_items().getItem(0);

parentItem.expand();

eventArgs.set_cancel(true); // Cancel the postback

}

Thanks for quick help!
Claudio

PanelBar

answered on 11 Jun 2012

2 answers

140 views

ComboBox inside ListView Style Problem

Hi,

I have the a ComboBox with static items inside a ListView:

<asp:ListView runat="server" ID="lvRoomUsers"
ItemPlaceholderID="itemPlaceHolder1" OnItemCommand="lvRoomUsers_ItemCommand"
onitemdatabound="lvRoomUsers_ItemDataBound" >

                <LayoutTemplate>
                    <table id="tblRoomUsers" class="Grid" cellspacing="0">
                    <tr><th colspan="3">Users in This Room</th></tr>
                       <asp:PlaceHolder ID="itemPlaceHolder1" runat="server" />
                    </table>
                </LayoutTemplate>
                <ItemTemplate>
                  <tr>
                  <td>
                  <asp:HiddenField ID="hfUser" runat="server" Value='<%# Eval("Id") == null ? String.Empty : Eval("Id").ToString() %>' />
                  <asp:HiddenField ID="hfReadOnly" runat="server" Value='<%# Eval("ReadOnly") == null ? String.Empty : Eval("ReadOnly").ToString() %>' />
                  <%# Eval("FirstName") == null ? String.Empty : Eval("FirstName").ToString() + " " + Eval("Surname").ToString()%></td>
                  <td>
                  <asp:UpdatePanel ID="upPermissions" runat="server" >
                  <Triggers> <asp:AsyncPostBackTrigger ControlID="cbPermissions" EventName="SelectedIndexChanged" /> </Triggers>

                  <ContentTemplate>

                  <telerik:RadComboBox ID="cbPermissions" runat="server" AutoPostBack="true"
                     onselectedindexchanged="cbPermissions_SelectedIndexChanged" Visible='<%# Eval("FirstName") == null ? false : true %>' Width="100" >
                     <Items>
                      <telerik:RadComboBoxItem Text="Read Only" Value="true" />
                          <telerik:RadComboBoxItem Text="Full Access" Value="false" />
                     </Items>

                   </telerik:RadComboBox>

                  </ContentTemplate>
                   </asp:UpdatePanel>
                  </td>
                  <td style="text-align:center">
                  <asp:LinkButton ID="btnRemoveUser" runat="server" Text="Remove" CommandName="RemoveUser" Visible='<%# Eval("FirstName") == null ? false : true %>' />
                  <%--<asp:CheckBox ID="chkSelect" runat="server" Visible='<%# Eval("UserName") == null ? false : true %>' />--%>
                  </td>
                 </tr>
                </ItemTemplate>
    </asp:ListView>

The ComboBox is not rendering properly (see attached image)

ComboBox

answered on 11 Jun 2012

1 answer

116 views

Document manager customization

Hello,
how can I set the font of the text in the red frames?
Many thanks
AB

Editor

answered on 11 Jun 2012

1 answer

80 views

Upload dialog customization

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

106 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

71 views

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

147 views

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

185 views

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

227 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

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