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

3 posts, 0 answers
  1. Gunnar Skogen
    Gunnar Skogen avatar
    10 posts
    Member since:
    Jul 2009

    Posted 26 May 2010 Link to this post


    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:

    <%@ 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" ""> 
    <html xmlns="">  
    <head runat="server">  
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="IncidentEditorScriptManager1" runat="server">  
                <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" /> 
        <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) {  
                            else {  
                                alert("DropDownClosing: set cancel");  
                        // If we knew where click came from we could handle this  
                        //eventObj.cancelBubble = true;  
                    function StopPropagation(event) {  
                        event.cancelBubble = true;  
                        if (event.stopPropagation) {  
            <telerik:RadToolBar ID="RadToolBar2" runat="server"  Width="100%"                              
                    <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" > 
                            <telerik:RadToolBarButton Text="Broadcast Off"/>  
                            <telerik:RadToolBarButton Text="Broadcast All Teams"  /> 
                            <telerik:RadToolBarButton Text="Broadcast Trading Support"  /> 
                    <telerik:RadToolBarButton Value="DateTimeTool">  
                                <td style="width:40px;">  
                                    <telerik:RadDateTimePicker ID="FromDateTimePicker1"   
                                                               <ClientEvents  OnDateSelected="DateTimePickerClosing" /> 
                                <td style="width:40px;">  
                                    <telerik:RadDateTimePicker ID="ToDateTimePicker1" Runat="server"  PopupDirection="BottomRight"  ZIndex="2000000">  
                                                               <ClientEvents OnPopupClosing="DateTimePickerClosing" /> 

    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. Peter
    Peter avatar
    6637 posts

    Posted 31 May 2010 Link to this post

    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) {

    Feel free to contact us if you have further questions.

    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.
  3. Telerik UI for ASP.NET Core is out
  4. Gunnar Skogen
    Gunnar Skogen avatar
    10 posts
    Member since:
    Jul 2009

    Posted 01 Jun 2010 Link to this post


    Thanks - that worked great.

    Best Regards

Back to Top