What's New?

[CLOSED] CalendarPanel - When event is clicked, show MenuItems

  1. #1
    Sep 05, 2013, 11:03 AM

    [CLOSED] CalendarPanel - When event is clicked, show MenuItems

    Hi, I have a CalendarPanel and I would like to use MenuItems (or appropiated) to show a menu when a event is clicked.

    I already tried to develop it by following this example:

    https://examples2.ext.net/#/DataView/Advanced/Report/

    But I could do it.

    Could anyone please let me know a way to do it?

    Thank you.
    Last edited by Daniil; Sep 06, 2013 at 2:55 PM. Reason: [CLOSED]
  2. #2
    Sep 05, 2013, 2:18 PM
    Hi @jamesand,

    Let's start with this example.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var onEventClick = function (calendarPanel, record, el) {
            App.Menu1.showBy(el);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Menu ID="Menu1" runat="server">
            <Items>
                <ext:MenuItem runat="server" Text="Item 1" />
                <ext:MenuItem runat="server" Text="Item 2" />
            </Items>
        </ext:Menu>

        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                    <EventStore runat="server">
                        <Events>
                            <ext:EventModel 
                                Title="My event 1" 
                                StartDate="2013/9/15" 
                                EndDate="2013/9/16" 
                                CalendarId="1" />

                            <ext:EventModel 
                                Title="My event 2" 
                                StartDate="2013/9/19" 
                                EndDate="2013/9/20" 
                                CalendarId="1" />
                        </Events>
                    </EventStore>
                    <Listeners>
                        <EventClick Fn="onEventClick" />
                    </Listeners>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Sep 06, 2013 at 12:00 PM.
  3. #3
    Sep 05, 2013, 5:48 PM
    Your code works fine but I cannot make it work in my project.

    Would it be any difference in oneventClick if the CalendarPanel is in an .ascx??
  4. #4
    Sep 06, 2013, 4:32 AM
    So, is the Menu defined in the user control? If so, then you cannot access it by App.MenuID by default, because a client id will be prefixed with a user control's id.

    Please try:
    <ext:XScript runat="server">
    <script>
        var onEventClick = function (calendarPanel, record, el) {
            #{Menu1}.showBy(el);
        };
    </script>
</ext:XScript>
  5. #5
    Sep 06, 2013, 11:05 AM
    Ok perfect!!

    Now I would like to set the ID of the event clicked in the CustomConfig section of each MenuItem. Would it be possible?
  6. #6
    Sep 06, 2013, 12:04 PM
    I would implement it this way.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
 
    <ext:XScript runat="server">
        <script>
            var onEventClick = function (calendarPanel, record, el) {
                var menu = #{Menu1};

                menu.showBy(el);
                menu.eventId = record.data.EventId;
            };
        </script>
    </ext:XScript>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
 
        <ext:Menu ID="Menu1" runat="server">
            <Items>
                <ext:MenuItem runat="server" Text="Item 1">
                    <Listeners>
                        <Click Handler="alert(this.ownerCt.eventId);" />
                    </Listeners>
                </ext:MenuItem>
                <ext:MenuItem runat="server" Text="Item 2">
                    <Listeners>
                        <Click Handler="alert(this.ownerCt.eventId);" />
                    </Listeners>
                </ext:MenuItem>
            </Items>
        </ext:Menu>
 
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                    <EventStore runat="server">
                        <Events>
                            <ext:EventModel
                                EventId="1"
                                Title="My event 1"
                                StartDate="2013/9/15"
                                EndDate="2013/9/16"
                                CalendarId="1" />
 
                            <ext:EventModel
                                EventId="2"
                                Title="My event 2"
                                StartDate="2013/9/19"
                                EndDate="2013/9/20"
                                CalendarId="1" />
                        </Events>
                    </EventStore>
                    <Listeners>
                        <EventClick Fn="onEventClick" />
                    </Listeners>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
  7. #7
    Sep 06, 2013, 1:34 PM
    Thank you again Daniil! It works perfectly

Similar Threads

  1. How to find out checbox control in gridpanel while clicked on button clcik event.
    By ashokt4 in forum 2.x Help
    Replies: 1
    Last Post: Dec 19, 2012, 10:29 PM
  2. [CLOSED] How to : show a panel and hide other when one Radio is clicked
    By digitek in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 19, 2011, 1:53 PM
  3. CalendarPanel and Event
    By gidi in forum 1.x Help
    Replies: 0
    Last Post: Aug 06, 2011, 8:17 PM
  4. [CLOSED] CalendarPanel: Change styel for the event, but no effective for all-day event
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 16, 2011, 1:41 AM
  5. GridPanel - ComboBox Editor - Show Dropdown When Clicked?
    By Tbaseflug in forum 1.x Help
    Replies: 10
    Last Post: Jan 04, 2010, 4:37 PM

Posting Permissions