This is a migrated thread and some comments may be shown as answers.

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

2 Answers 153 Views

ToolBar

This is a migrated thread and some comments may be shown as answers.

Gunnar Skogen asked on 26 May 2010, 08:15 AM

toolbardropcal.jpg

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

2 Answers, 1 is accepted

answered on 31 May 2010, 10:06 AM

Hello Gunnar,

Your ideal case scenario can be implemented with jQuery and a flag that will be toggled on click of the choice arrow of the toolbar button:

<script type="text/javascript">

var expandedFlag = false;

function pageLoad() {

$telerik.$(".rtbChoiceArrow").bind("click", function (e) {

expandedFlag = !expandedFlag;

});

}

function DropDownClosing(sender, args) {

args.set_cancel(expandedFlag);

}

</script>

Feel free to contact us if you have further questions.

Greetings,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.