Questions on UI for ASP.NET AJAX Forum

110,811 questions

7 answers

151 views

The SelectedImageUrl property does nothing until AFTER the mouse has hovered over the image.

My scenario uses the RadMenu as the primary navigation for my site. I want the selected page to be obvious to the users so I've implemented images to represent the normal versus hovered/selected states. Simple. Everything works fine except for that when one of the menu items is selected, it displays normal image until the mouse hovers over the menu item which then causes the menu to display the selected image.

I created the following simplified example (no CSS, no code) to illustrate.

Super simple example:

    
            <telerik:RadMenu ID="RadMenu1" Runat="server" Skin="" EnableSelection="true" > 
        
                <Items> 
        
                    <telerik:RadMenuItem runat="server"   
        
                        NavigateUrl="~/Test.aspx"   
        
                        ImageUrl="~/images/NotSelected.png"   
        
                        HoveredImageUrl="~/images/Selected.png"   
        
                        SelectedImageUrl="~/images/Selected.png"   
        
                        Selected="true" 
        
                    /> 
        
               </Items> 
        
            </telerik:RadMenu>

BTW, the EnableSelection property has no affect on this example and I've specified Selected='true' just so the problem can be seen immediately.

I haven't come up with a workaround for this one, please advise. Thanks!

answered on 01 Jun 2010

1 answer

140 views

RadSpliter and RadWindowManager

Hi ,

Below is the sample code , when i click on RadSplitBar , the left Pane is collasped but the RadWindow in right pane remains at same size . I tried using RestrictionZoneID by giving right panes ID and tried using a div control , unable to fix or dock to the right pane size , Kindly help me out in fixing .

Is it possible to give dynamically ?.

Kindly help me out in fixing this issues please

Thanks

Vinodh

                    <html xmlns="http://www.w3.org/1999/xhtml" >         
            <head runat="server">         
                <title></title>         
                   <style type="text/css">         
                    .rtsImg         
                    {         
                        margin: 2px 4px 0 0 !important;         
                    }         
                    .restrictionZone         
                    {         
                        width: 100%;         
                        height:100%;         
                    }         
                    .taskbar         
                    {         
                        display: block;         
                        float: left;         
                    }         
                    div.RadTabStrip .rtsLevel {         
                        width: auto;         
                    }         
                </style>         
            </head>         
            <body>         
                <form id="form1" runat="server">         
                <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">         
                </telerik:RadScriptManager>         
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">         
                    <AjaxSettings>         
                                 
                    </AjaxSettings>         
                             
                </telerik:RadAjaxManager>         
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"          
                    Skin="Default">         
                </telerik:RadAjaxLoadingPanel>         
                <table width="100%"  style="height: 100%">         
                    <tr>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                    </tr>         
                    <tr>         
                        <td colspan="5"  style="height: 100%">         
                            <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width ="100%" Orientation="Vertical">         
                                <telerik:RadPane ID="radRightPane" runat="server" Width="22%" Height="100%">         
                                    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" BorderStyle="None"          
                                        ExpandMode="FullExpandedItem" Height="100%"          
                                        OnClientItemClicking="openNewWindow"><Items><telerik:RadPanelItem          
                                            Expanded="True" Text="Mail"><Items><telerik:RadPanelItem          
                                                ImageUrl="Img/mailPersonalFolders.gif" Text="Personal Folders"          
                                                Value="http://www.google.com" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailDeletedItems.gif" Text="Deleted Items"          
                                                Value="http://www.google.com" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailInbox.gif" Text="Inbox" Value="http://www.google.com" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailFolder.gif" Text="My Mail" Value="http://www.google.com" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailSent.gif" Text="Sent Items" Value="http://www.google.com" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailOutbox.gif" Text="Outbox" Value="http://www.google.com" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailSearch.gif" Text="Search Folders"          
                                                Value="http://www.google.com" />         
                                        </Items>         
                                        </telerik:RadPanelItem><telerik:RadPanelItem Text="Calendar"><Items><telerik:RadPanelItem><ItemTemplate><telerik:RadCalendar          
                                                ID="Calendar1" runat="server" Style="margin: 6px auto 0" />         
                                            </ItemTemplate>         
                                            </telerik:RadPanelItem>         
                                        </Items>         
                                        </telerik:RadPanelItem><telerik:RadPanelItem Text="Contacts"><Items><telerik:RadPanelItem          
                                                ImageUrl="Img/contactsItems.gif" Text="My Contacts" /><telerik:RadPanelItem          
                                                ImageUrl="Img/contactsItems.gif" Text="Address Cards" /><telerik:RadPanelItem          
                                                ImageUrl="Img/contactsItems.gif" Text="Phone List" /><telerik:RadPanelItem          
                                                ImageUrl="Img/contactsItems.gif" Text="Shared Contacts" />         
                                        </Items>         
                                        </telerik:RadPanelItem><telerik:RadPanelItem Text="Tasks"><Items><telerik:RadPanelItem          
                                                ImageUrl="Img/tasksItems.gif" Text="My Tasks" /><telerik:RadPanelItem          
                                                ImageUrl="Img/tasksItems.gif" Text="Shared Tasks" /><telerik:RadPanelItem          
                                                ImageUrl="Img/tasksItems.gif" Text="Active Tasks" /><telerik:RadPanelItem          
                                                ImageUrl="Img/tasksItems.gif" Text="Completed Tasks" />         
                                        </Items>         
                                        </telerik:RadPanelItem><telerik:RadPanelItem Text="Notes"><Items><telerik:RadPanelItem          
                                                ImageUrl="Img/notesItems.gif" Text="My Notes" /><telerik:RadPanelItem          
                                                ImageUrl="Img/notesItems.gif" Text="Notes List" /><telerik:RadPanelItem          
                                                ImageUrl="Img/notesItems.gif" Text="Shared Notes" /><telerik:RadPanelItem          
                                                ImageUrl="Img/notesItems.gif" Text="Archive" />         
                                        </Items>         
                                        </telerik:RadPanelItem><telerik:RadPanelItem Text="Folders List"><Items><telerik:RadPanelItem          
                                                ImageUrl="Img/mailOutbox.gif" Text="My Client.Net" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailOutbox.gif" Text="My Profile" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailOutbox.gif" Text="My Support Tickets" /><telerik:RadPanelItem          
                                                ImageUrl="Img/mailOutbox.gif" Text="My Licenses" />         
                                        </Items>         
                                        </telerik:RadPanelItem>         
                                    </Items>         
                                    </telerik:RadPanelBar>         
                                </telerik:RadPane>         
                                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" >         
                                </telerik:RadSplitBar>         
                                <telerik:RadPane ID="radLeftPane" runat="server" Width="78%">         
                                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server"          
                                        OnClientTabSelected="OnClientTabSelected" Orientation="HorizontalBottom"          
                                        ScrollButtonsPosition="Middle" ScrollChildren="True" SelectedIndex="0"          
                                        Skin="Web20" Width="100%"><tabs><telerik:RadTab Selected="True"          
                                        Style="display: none;" /></tabs></telerik:RadTabStrip>         
                                    <telerik:RadWindowManager ID="RadWindowManager" runat="server"          
                                        Behaviors="Close,Maximize,Minimize,Move,Reload,Resize"          
                                        KeepInScreenBounds="True" OnClientActivate="OnClientActivate"          
                                        OnClientClose="OnClientClose" OnClientCommand="OnClientCommand"          
                                        RestrictionZoneID="radLeftPane" ShowOnTopWhenMaximized="true" Skin="Web20">         
                                    </telerik:RadWindowManager>         
                                    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">         
                     
                                        <script type="text/javascript">         
                     
                                // <![CDATA[        
                    
                                var manager = null;        
                                var tabStrip = null;        
                    
                                function pageLoad() {        
                                    //get a reference to the needed controls -        
                                    manager = $find("<%=RadWindowManager.ClientID %>");        
                                    manager = radopen("http://www.google.com", null);                               
                                    tabStrip = $find("<%=RadTabStrip1.ClientID %>");        
                                }        
                    
                                //opening the window        
                                function openNewWindow(sender, args) {        
                                    var item = args.get_item();        
                                    var itemUrl = item.get_value();        
                                    var itemText = item.get_text();        
                                    if (itemUrl) {        
                                        var windowURL = itemUrl;        
                                        var oWnd = radopen(itemUrl, null);        
                                        oWnd.set_title(itemText);        
                                        oWnd.center();        
                                        tabStrip.trackChanges();        
                                        //create a new tab        
                                        var tab = new Telerik.Web.UI.RadTab();        
                                        //set the text of the tab        
                                        tab.set_text(itemText);        
                                        oWnd.correspondingTab = tab;        
                                        //add the tab to the tabstrip        
                                        tabStrip.get_tabs().add(tab);        
                                        tabStrip.repaint();        
                                        tab.correspondingWnd = oWnd;        
                                        tab.set_imageUrl(item.get_imageUrl());        
                                        tabStrip.commitChanges();        
                    
                                        //Select this tab        
                                        tab.select();        
                                    }        
                                }        
                    
                                function OnClientCommand(sender, args) {        
                                    //because we don't want to show the minimized RadWindow, we hide it after minimizing        
                                    //and raise the _Maximized flag (used in OnClientTabSelected)        
                                    if (args.get_commandName() == "Minimize") {        
                                        if (sender.isMaximized()) {        
                                            sender._Maximized = true;        
                                        }        
                    
                                        sender.hide();        
                                        //raise the _toMinimize flag (used in OnClientActivate)        
                                        sender._toMinimize = true;        
                                        var tab = sender.correspondingTab;        
                                        if (tab) {        
                                            tab.set_selected(false);        
                                        }        
                                    }        
                                }        
                    
                                function OnClientTabSelected(sender, args) {        
                                    //get a reference to the corresponding window        
                                    var win = args.get_tab().correspondingWnd;        
                    
                                    if (!win) return;        
                    
                                    if (!win.isVisible()) {        
                                        win.show();        
                                        win.restore();        
                                        //if the window was maximized before client minimizes it, we need to restore        
                                        //its maximized state        
                                        if (win._Maximized) {        
                                            win.maximize();        
                                            win._Maximized = null;        
                                        }        
                    
                                    }        
                    
                                    //ensure that the currently active RadWindow will have the highest z-Index.        
                                    var popupElem = win.get_popupElement();        
                                    var oldZindex = parseInt(popupElem.style.zIndex);        
                                    var styleZIndex = win.get_stylezindex();        
                                    var newZIndex = (styleZIndex) ? styleZIndex : Telerik.Web.UI.RadWindowUtils.get_newZindex(oldZindex);        
                                    popupElem.style.zIndex = "" + newZIndex;        
                                    win.setActive(true);        
                    
                    
                    
                                }        
                    
                                function OnClientActivate(sender, args) {        
                                    var tab = sender.correspondingTab;        
                                    if (tab && !sender._toMinimize) {        
                                        tab.set_selected(true);        
                                    }        
                                    sender._toMinimize = false;        
                                }        
                                function OnClientClose(oWnd) {        
                    
                                    //remove the corresponding tab from the tabstrip        
                                    var tab = oWnd.correspondingTab;        
                                    if (tab) {        
                                        tabStrip.trackChanges();        
                                        tabStrip.get_tabs().remove(tab);        
                                        tabStrip.commitChanges();        
                                    }        
                                }        
                                // ]]>         
                     
                                        </script>         
                     
                                    </telerik:RadCodeBlock>         
                                </telerik:RadPane>         
                            </telerik:RadSplitter>         
                        </td>         
                    </tr>         
                    <tr>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                        <td>         
                            &nbsp;</td>         
                    </tr>         
                </table>         
                </form>         
            </body>         
            </html>         

Splitter

answered on 01 Jun 2010

1 answer

76 views

Feature Request: Allow upload to be delayed until a button is pressed

using the RadAsyncUpload control there seems to be no option for just queueing up the file and uploading it when a button is pressed.
I would like this functionality. I can't use RadUpload because the control is inside of an iframe.

AsyncUpload

answered on 01 Jun 2010

1 answer

95 views

How to build SEO Friendly Custom Pager Template?

Hi,
I am trying to Build a custom SEO Friendly Pager. The pagger should look like the attached image.I can't figure out how to make the "First, previous, Next, Last" links SEO friendly. Can you please point me to an example?

Thanks

Qusai

Grid

answered on 01 Jun 2010

2 answers

243 views

rad window's position

Thanks for the great help from the Telerik team.

I have successfully opened multiple radwindows. In home page, it contains the radwindowmanager with the

RestrictionZoneID ="R",

I open a radwindow "G" under the radwindowmanager in the home page. then I clicked the button inside radwindow "G" to open multiple radwindows "W" in designed positions respectively.

everything looks good except for one issue, when I use the method to get the moveto positions, I have to minus the restriction. for example:

position = positionInfo( listPosition.left + col * width + width,listPosition.top + row * height - restriction);
// calcuate the moveto position,

which could cause probelms
1. if I minus the restriction, the radwinow"W" will be opened at the right position. but when the radwindow "G" is close to the top, I minus the restriction, the position.top <0 and thus radwindow "W" will be positioned in wrong position
2.if I do not minus the restriction.the radwindows"w" will be opened at a lower position with the difference of restriction. when the radwindow"G" is close to bottom, the position.top is beyond the bottom line and thus radwindow "W" will be positioned in wrong position.

How to avoid the restriction side effect?

Thanks a lot

Window

answered on 01 Jun 2010

3 answers

105 views

Displaying an edit button based on column status

Hi,

I have a grid that displays a list of all the nominations. One of the columns displays the status of the nomination. If this nomination has a status of approved, then it must ONLY display the text Approved. If the status is Pending, then this colum must display an Edit button to be able to modify this record. The edit button must only be displayed when the status is pending. If the status is approved then the edit button must not be displayed.

Is there a sample like this some where?

Thanks
Brendan

Grid

answered on 01 Jun 2010

1 answer

75 views

Drag and Drop

Can someone provide me with some help on the drag and drop javascript? I noticed that the demo has drag and drop functionality between two grids and the recycling bin icon. I just want to allow drag and drop between rows in the grid. How can I modify the javascript shown here?

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx

Grid

answered on 01 Jun 2010

2 answers

172 views

Stop ToolBar DropDown/Split from collapsing when Calendar item sets date

Hi,

I have a Toolbar split button with 3 regular buttons + 1 with 2 RadDateTimePicker Items (From and To date time) (see enclosed picture).
When the user has set the dates I do not want the drop down to collapse as it is very user un-friendly. Ideally I would want clicking the down arrow on the split button as the only way to collapse this, but just preventing it from collapsing after setting a date or time is also an option.
I have tried numerous ways but set_cancel for DropDownClosing stops the DateTimePicker from closing (guess that its this that fires the event) and using DateTimePickerClosing on the DateTimepickers is too late....
I am submitting the trial project (taken from another example on this site) - various trial are commented out - seems that "StopPropagation" on the event is not available:

Code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="toolbarAndDropDown.aspx.cs" 
        
                Inherits="toolbarAndDropDown" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!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">  
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="IncidentEditorScriptManager1" runat="server">  
        
                    <Scripts> 
        
                        <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" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadCodeBlock ID="IncidentEditorCodeBlock1" runat="server">  
        
                        <script type="text/javascript">  
        
                            function DateTimePickerClosing(sender, eventArgs) {  
        
            //                    alert("DateTimePickerClosing: " + event);  
        
            //                    eventArgs.set_cancel(true);  
        
            ////                    alert("DateTimePickerClosing: " + eventArgs.stopPropagation);  
        
            //                    if (eventArgs.stopPropagation) {  
        
            //                        eventArgs.stopPropagation();  
        
            //                    }  
        
                            }  
        
                            function DropDownClosing(sender, args) {  
        
                                alert("DropDownClosing: " + args.get_item().get_value());  
        
                                var eventObj = args.get_domEvent();  
        
                                //alert("DropDownClosing: " + eventObj.fromElement);  
        
                                if (eventObj.fromElement == null) {  
        
                                    if (event.stopPropagation) {  
        
                                        event.stopPropagation();  
        
                                    }  
        
                                    else {  
        
                                        alert("DropDownClosing: set cancel");  
        
                                        args.set_cancel(true);  
        
                                    }  
        
                                }  
        
                                // If we knew where click came from we could handle this  
        
                                //eventObj.cancelBubble = true;  
        
                            }  
        
                            function StopPropagation(event) {  
        
                                event.cancelBubble = true;  
        
                                if (event.stopPropagation) {  
        
                                    event.stopPropagation();  
        
                                }  
        
                            }                      
        
                        </script> 
        
                </telerik:RadCodeBlock> 
        
                <div> 
        
                    <telerik:RadToolBar ID="RadToolBar2" runat="server"  Width="100%"                              
        
                                        OnClientDropDownClosing="DropDownClosing">   
        
                        <Items> 
        
                            <telerik:RadToolBarButton Text="button 1" CheckOnClick="true"  Group="GG" /> 
        
                            <telerik:RadToolBarButton Text="button 2" CheckOnClick="true"  Group="GG"/>  
        
                            <telerik:RadToolBarButton Text="button 3" CheckOnClick="true"  Group="GG"/>  
        
                            <telerik:RadToolBarSplitButton Value="Split" EnableDefaultButton="true" DefaultButtonIndex="0" > 
        
                                <Buttons> 
        
                                    <telerik:RadToolBarButton Text="Broadcast Off"/>  
        
                                    <telerik:RadToolBarButton Text="Broadcast All Teams"  /> 
        
                                    <telerik:RadToolBarButton Text="Broadcast Trading Support"  /> 
        
                            <telerik:RadToolBarButton Value="DateTimeTool">  
        
                                <ItemTemplate> 
        
                                    <table> 
        
                                    <tr> 
        
                                        <td style="width:40px;">  
        
                                            <label>From:</label> 
        
                                        </td> 
        
                                        <td> 
        
                                            <telerik:RadDateTimePicker ID="FromDateTimePicker1"   
        
                                                                       Runat="server"   
        
                                                                       PopupDirection="TopRight"   
        
                                                                       ZIndex="2000000"   
        
                                                                       > 
        
                                                                       <ClientEvents  OnDateSelected="DateTimePickerClosing" /> 
        
                                            </telerik:RadDateTimePicker>                                      
        
                                        </td> 
        
                                    </tr> 
        
                                    </table>                                  
        
                                    <table> 
        
                                    <tr> 
        
                                        <td style="width:40px;">  
        
                                            <label>To:</label> 
        
                                        </td> 
        
                                        <td> 
        
                                            <telerik:RadDateTimePicker ID="ToDateTimePicker1" Runat="server"  PopupDirection="BottomRight"  ZIndex="2000000">  
        
                                                                       <ClientEvents OnPopupClosing="DateTimePickerClosing" /> 
        
                                            </telerik:RadDateTimePicker> 
        
                                        </td> 
        
                                        </td> 
        
                                    </table>                                  
        
                                </ItemTemplate> 
        
                            </telerik:RadToolBarButton>                  
        
                                </Buttons> 
        
                            </telerik:RadToolBarSplitButton> 
        
                        </Items> 
        
                    </telerik:RadToolBar> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Using a pop up window did not prove a good alternative as the DateTimePicker is larger than the window should natrually be.
Help on this greatly appreciated

Best Regards

Gunnar Skogen

ToolBar

answered on 01 Jun 2010

4 answers

447 views

Select grid row on button click using client side

HI All,
I am badly struck with an issue that i want to select a row of telerk grid on button click. but on client side. i don not want to go server side. i am unable to do it.

I have tried many things like
on Client events i add OnRowSelected="RowSelected"
and
following code add check box in all row.

 <Columns>

     <telerik:GridClientSelectColumn
UniqueName="ClientSelectColumn" />

</Columns>

but i can not do it on button click.
so Is it possible and if yes then kindly help me.

Thanks in advance.

Grid

answered on 01 Jun 2010

1 answer

124 views

RadCombo doesnt keep value on postbacks

I have a radComboBox that is loaded from javascript when another combo's value is set, I use the itemsRequested event, the problem is that this combo that is loaded through javascript doesnt keep its value when posted, why is this and how can I solve it? any help is appreciated, thanks!

I forgot to mention that if I set the EnableLoadOnDemand property of the combo to true it keeps it value, but when I do this the combo filtering function no longer works.

ComboBox

answered on 01 Jun 2010

Top users last month