search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to show a resource Bubble using Javascript

Asked by Thomas OD
7 years ago.

Hi,

I wonder how open a resource bubble on ResourceHeaderClick event?
Drawing inspiration from the following code:
http://kb.daypilot.org/29719/how-to-show-a-calendar-event-bubble-using-javascript/

I tried this :
dpsPlanning.ResourceHeaderClickHandling = ResourceHeaderClickHandlingType.JavaScript
dpsPlanning.ResourceHeaderClickJavaScript = "bubble.showEvent(resource);"

but it doesn't work, even if I get no error.
Is there a way to do this?
Have I missed something?

Thanks in advance for all your suggestions.

Thomas

Answer posted by Dan Letecky [DayPilot]
7 years ago.

Thomas, you can use the following code:

// bubble = DayPilot.Bubble object
// dps = use ClientObjectName value (DayPilot.Scheduler object)
// resource = resource id
function showResourceBubble(bubble, dps, resource) {
  var res = {};
  res.calendar = dps; 
  res.id = resource; 
  res.toJSON = function() {
    var json = {};
    json.id = this.id;
    return json;
  };
  bubble.showResource(res);
}

Just note that this is internal API and it may change in the future.

Comment posted by Dan Letecky [DayPilot]
7 years ago.

Just to make it clear: bubble and dps should be passed to showResourceBubble() as objects (not as strings), while resource should be passed as string.

A complete example to illustrate the usage (it's a modified Demo/Scheduler/Default.aspx source):

<%@ Page Language="C#" MasterPageFile="~/Demo.master" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="Scheduler_Default" Title="AJAX Scheduler | DayPilot Pro for ASP.NET WebForms Demo"  Culture="en-us" %>

<%@ Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">

/* Fast filter helpers */

function clear() {
    var filterBox = document.getElementById("TextBoxFilter");
    filterBox.value = '';
    filter();
}
function filter() {
    var filterBox = document.getElementById("TextBoxFilter");
    var filterText = filterBox.value;
    
    dps1.clientState = {"filter": filterText};
    dps1.commandCallBack("filter");
}

function key(e) {
    var keynum  = (window.event) ? event.keyCode : e.keyCode;

    if (keynum === 13) {
        filter();
        return false;
    }

    return true;     
}

/* Event editing helpers - modal dialog */
    function dialog() {
	    var modal = new DayPilot.Modal();
	    modal.top = 60;
        modal.width = 300;
        modal.opacity = 70;
        modal.border = "10px solid #d0d0d0";
        modal.closed = function() { 
            if(this.result == "OK") { 
                dps1.commandCallBack('refresh'); 
            }
            dps1.clearSelection();
        };
	
        modal.height = 250;
        modal.zIndex = 100;
        return modal;
    }

	function timeRangeSelected(start, end, resource) {
	    var modal = dialog();
	    modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource + "&hash=<%= PageHash %>");
	}
	
	function eventClick(e) {
	    var modal = dialog();
	    modal.showUrl("Edit.aspx?id=" + e.value() + "&hash=<%= PageHash %>");
	}

</script>

	<div class="note"><b>Note:</b> You can create a theme using the online <strong>DayPilot Theme Designer</strong>: <a href="http://themes.daypilot.org/">http://themes.daypilot.org/</a></div>
	
    <DayPilot:DayPilotScheduler 
        ID="DayPilotScheduler1" 
        runat="server" 
        DataStartField="start" 
        DataEndField="end" 
        DataTextField="name" 
        DataValueField="id" 
        DataResourceField="column" 
        DataTagFields="id, name"
        HeaderFontSize="8pt" 
        HeaderHeight="20" 
        EventHeight="30"
        EventFontSize="11px" 
        Width="100%" 
        RowHeaderWidth="120"
        CellDuration="1440" 
        CellGroupBy="Month" 
        CellWidth="60"
        TimeRangeSelectedHandling="JavaScript"
        TimeRangeSelectedJavaScript="timeRangeSelected(start, end, resource)"
        ClientObjectName="dps1" 
        EventMoveHandling="CallBack" 
        OnEventMove="DayPilotScheduler1_EventMove" 
        EventMoveJavaScript="dps1.eventMoveCallBack(e, newStart, newEnd, newResource);"
        EventResizeHandling="Notify"
        OnEventResize="DayPilotScheduler1_EventResize"
        OnTimeRangeSelected="DayPilotScheduler1_TimeRangeSelected" 
        EventClickHandling="JavaScript"
        EventClickJavaScript="eventClick(e);"
        EventEditHandling="CallBack" 
        OnEventEdit="DayPilotScheduler1_EventEdit" 
        OnBeforeEventRender="DayPilotScheduler1_BeforeEventRender"
        OnEventMenuClick="DayPilotScheduler1_EventMenuClick" 
        xContextMenuID="DayPilotMenu2" 
        ContextMenuResourceID="DayPilotMenuRes"
        BusinessBeginsHour="5" 
        BusinessEndsHour="24"
        AfterRenderJavaScript="afterRender(data, isCallBack);" 
        OnBeforeResHeaderRender="DayPilotScheduler1_BeforeResHeaderRender"
        UseEventBoxes="Always" 
        EnableViewState="false" 
        ScrollLabelsVisible="false" 
        BubbleID="DayPilotBubble1" 
        ShowToolTip="false"
        HeightSpec="Max" 
        Height="500" 
        OnCommand="DayPilotScheduler1_Command" 
        OnEventClick="DayPilotScheduler1_EventClick"
        OnTimeRangeMenuClick="DayPilotScheduler1_TimeRangeMenuClick" 
        OnBeforeCellRender="DayPilotScheduler1_BeforeCellRender"
        TreeEnabled="true"
        TreeIndent="15"
        EventDoubleClickHandling="Edit"
        BorderColor="#666666"
        xResourceBubbleID="DayPilotBubble1"
        
        CssClassPrefix="scheduler_green"
        CssOnly="true"
        HourNameBackColor="#F0F0F0" 
        OnResourceHeaderMenuClick="DayPilotScheduler1_ResourceHeaderMenuClick"
        ResourceHeaderClickHandling="JavaScript" 
        OnResourceHeaderClick="DayPilotScheduler1_ResourceHeaderClick" 
        OnBeforeTimeHeaderRender="DayPilotScheduler1_BeforeTimeHeaderRender"
        ContextMenuSelectionID="DayPilotMenuSelection"
        DynamicEventRendering="Disabled"
        
        SyncResourceTree="true" 
        DragOutAllowed="true"
        MoveBy="Top"
        TimeRangeDoubleClickHandling="JavaScript"
        TimeRangeDoubleClickJavaScript="alert('double click');"
        DurationBarVisible="false"
        TimeHeaderClickHandling="CallBack"
        OnTimeHeaderClick="DayPilotScheduler1_TimeHeaderClick"
        >
        <Resources>
            <DayPilot:Resource Name="Room A" Value="A" Expanded="False">
                <Children>
                    <DayPilot:Resource Name="Room A.1" Value="A.1" Expanded="False" >
                        <Children>
                            <DayPilot:Resource Name="Room A.1.1" Value="A.1.1" Expanded="False" />
                            <DayPilot:Resource Name="Room A.1.2" Value="A.1.2" Expanded="False" />
                        </Children>
                    </DayPilot:Resource>
                    <DayPilot:Resource Name="Room A.2" Value="A.2" Expanded="False" />
                </Children>
            </DayPilot:Resource>
            <DayPilot:Resource Name="Room B" Value="B" Expanded="False" />
            <DayPilot:Resource Name="Room C" Value="C" ToolTip="Test" Expanded="False" />
            <DayPilot:Resource Name="Room D" Value="D" Expanded="False" />
            <DayPilot:Resource Name="Room E" Value="E" Expanded="False" />
            <DayPilot:Resource Name="Room F" Value="F" Expanded="False" />
            <DayPilot:Resource Name="Room G" Value="G" Expanded="False" />
            <DayPilot:Resource Name="Room H" Value="H" Expanded="False" />
            <DayPilot:Resource Name="Room I" Value="I" Expanded="False" />
            <DayPilot:Resource Name="Room J" Value="J" Expanded="False" />
            <DayPilot:Resource Name="Room K" Value="K" Expanded="False" />
            <DayPilot:Resource Name="Room L" Value="L" Expanded="False" />
            <DayPilot:Resource Name="Room M" Value="M" Expanded="False" />
            <DayPilot:Resource Name="Room N" Value="N" Expanded="False" />
            <DayPilot:Resource Name="Room O" Value="O" Expanded="False" />
            <DayPilot:Resource Name="Room P" Value="P" Expanded="False" />
            <DayPilot:Resource Name="Room Q" Value="Q" Expanded="False" />
            <DayPilot:Resource Name="Room R" Value="R" Expanded="False" />
            <DayPilot:Resource Name="Room S" Value="S" Expanded="False" />
            <DayPilot:Resource Name="Room T" Value="T" Expanded="False" />
            <DayPilot:Resource Name="Room U" Value="U" Expanded="False" />
            <DayPilot:Resource Name="Room V" Value="V" Expanded="False" />
            <DayPilot:Resource Name="Room W" Value="W" Expanded="False" />
            <DayPilot:Resource Name="Room X" Value="X" Expanded="False" />
            <DayPilot:Resource Name="Room Y" Value="Y" Expanded="False" />
            <DayPilot:Resource Name="Room Z" Value="Z" Expanded="False" />
       </Resources>
    </DayPilot:DayPilotScheduler>
    
    <DayPilot:DayPilotMenu ID="DayPilotMenu2" runat="server" CssClassPrefix="menu_full_" UseShadow="false">
        <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="alert('Opening event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Refresh" Action="JavaScript" JavaScript="dps1.commandCallBack('refresh');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="-" Action="NavigateUrl"></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Delete (CallBack)" Action="Callback" Command="Delete"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="PostBack" Command="Delete" Text="Delete (PostBack)" />
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert('x:' + dps1.eventOffset.x + ' y:' + dps1.eventOffset.y + ' resource:' + e.row());" Text="Mouse offset (relative to event)" />
        <DayPilot:MenuItem Action="NavigateUrl" NavigateUrl="javascript:alert('Going somewhere else (id {0})');"
            Text="NavigateUrl test" />
    </DayPilot:DayPilotMenu>
    
    <DayPilot:DayPilotMenu ID="DayPilotMenuSpecial" runat="server" ClientObjectName="cmSpecial" CssClassPrefix="menu_full_" UseShadow="false"
        >
        <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="alert('Opening event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id ' + e.value() + ')');">
        </DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Delete (JavaScript using callback)" Action="JavaScript"
            Command='Delete' JavaScript="if (confirm('Do you really want to delete event ' + e.text() + ' ?')) dps1.eventMenuClickCallBack(e, command);">
        </DayPilot:MenuItem>
    </DayPilot:DayPilotMenu>
    
    <DayPilot:DayPilotMenu ID="DayPilotMenuSelection" runat="server" CssClassPrefix="menu_" >
        <DayPilot:MenuItem Action="JavaScript" JavaScript="dps1.timeRangeSelectedCallBack(e.start, e.end, e.resource);"
            Text="Create new event (JavaScript)" />
        <DayPilot:MenuItem Action="PostBack" Command="Insert" Text="Create new event (PostBack)" />
        <DayPilot:MenuItem Action="CallBack" Command="Insert" Text="Create new event (CallBack)" />
        <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert('Start: ' + e.start + '\nEnd: ' + e.end + '\nResource id: ' + e.resource);"
            Text="Show selection details" />
        <DayPilot:MenuItem Action="JavaScript" JavaScript="dps1.clearSelection();" Text="Clean selection" />
    </DayPilot:DayPilotMenu>

    <DayPilot:DayPilotMenu ID="DayPilotMenuRes" runat="server"  CssClassPrefix="menu_">
        <DayPilot:MenuItem Action="CallBack" Command="Insert" Text="Add child" />
        <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="CallBack" Command="Delete" Text="Delete" />
        <DayPilot:MenuItem Action="CallBack" Command="DeleteChildren" Text="Delete children" />
        <DayPilot:MenuItem Text="-" Action="JavaScript"></DayPilot:MenuItem>
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert(e.name + '\n' + e.value);"
            Text="Show resource details" />
    </DayPilot:DayPilotMenu>

    
    <DayPilot:DayPilotBubble 
        ID="DayPilotBubble1" 
        runat="server" 
        OnRenderContent="DayPilotBubble1_RenderContent" 
        ClientObjectName="bubble" 
        OnRenderEventBubble="DayPilotBubble1_RenderEventBubble"
        Width="250"
        
        Corners="Rounded"
        Position="EventTop"
        CssOnly="true"
        CssClassPrefix="bubble_default"
        >
    </DayPilot:DayPilotBubble>

    <br />
    <a href="javascript:showResourceBubble(bubble, dps1, 'a');">Show bubble</a>
    <br />
    
    <script type="text/javascript">


// bubble = DayPilot.Bubble object
// dps = use ClientObjectName value (DayPilot.Scheduler object)
// resource = resource id
function showResourceBubble(bubble, dps, resource) {
  var res = {};
  res.calendar = dps; 
  res.id = resource; 
  res.toJSON = function() {
    var json = {};
    json.id = this.id;
    return json;
  };
  bubble.showResource(res);
}

/* DayPilotScheduler.AfterRenderJavaScript handler */

function afterRender(data, isCallBack) {
}

</script>
</asp:Content>

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.