[CLOSED] Fire event only upon clicking on the arrow on calendar panel

  1. #1

    [CLOSED] Fire event only upon clicking on the arrow on calendar panel

    Hi

    How do I ensure event only fire upon clicking on the arrows highlighted in red?

    Click image for larger version. 

Name:	Untitled-1.jpg 
Views:	81 
Size:	10.2 KB 
ID:	3696

    I notice the viewChange event was triggered each time I clicked on the arrows and different types of views (day, week, month).

    I also notice the viewchange event triggered by calling the databind at the backend, which is not something I would like it happened as this would cause double databind.

    I'm doing so because I need to ensure, the data is re-retrieve and refreshed upon clicking on the arrows and different types of view (day, week, month).

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack AndAlso Not Ext.Net.X.IsAjaxRequest Then
            Me.GetDataForCalendar(Now.Date, Now.Date)
        End If
    End Sub
    
    <DirectMethod([Namespace]:="ESS")> _
    Public Sub GetDataForCalendarByDate(ByVal StartDate As DateTime, ByVal EndDate As DateTime)
        Me.GetDataForCalendar(StartDate, EndDate)
    End Sub
    
    Private Sub GetDataForCalendar(ByVal StartDate As Date, ByVal EndDate As Date)
    .....
    Me.MyCalendar.DataBind()
    End Sub
    <script type="text/javascript">
        var ESS = {
            viewChange: function (p, vw, dateInfo) {                             
    
                if (dateInfo !== null) {
                    // will be null when switching to the event edit form, so ignore
                    this.DatePicker1.setValue(dateInfo.activeDate);
                    this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);                    
    
                    // Refresh data
                    ESS.GetDataForCalendarByDate(dateInfo.viewStart, dateInfo.viewEnd)
                }
            }
     };
    </script>
    Kindly Advise. Thanks!
    Last edited by Daniil; Jan 16, 2012 at 8:12 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by ppqrnd View Post
    I also notice the viewchange event triggered by calling the databind at the backend, which is not something I would like it happened as this would cause double databind.
    Please clarify calling the DataBind for what?

    Could you provide a full example to reproduce the issue?
  3. #3
    I called databind because the Calendar's record change dynamically according to user selection.

    The function GetDataForCalendar will get the require data from database.

    Private Sub GetDataForCalendar(ByVal StartDate As Date, ByVal EndDate As Date)
    	Dim store As Ext.Net.EventStore = Me.myEventStore
    	Dim DT As DataTable
    
    	 ' Event Type / Calendar Type
    	Dim EventType As String = "TSK"
    	Dim CalendarType As String = Nothing
    
    	Select Case Me.MenuOpt.SelectedIndex
    		Case 0
    			EventType = "TSK"
    		Case 1
    			EventType = "STFEVT"
    	End Select
    	
    	' Get data from DB
    	DT = GetDataFromDBByType(EventType)
    
    	If Not DT Is Nothing Then
    		If Not DT.Rows.Count <= 0 Then
    			For Each DR As DataRow In DT.Rows
    				Dim evt As New myEvent
    
    				evt.EventId = DR("Id")
    				evt.CalendarId = DR("CalId")
    				evt.Title = Trim(DR("Title"))
    				evt.Notes = Trim(IIf(IsDBNull(DR("Note")), "", DR("Note")))
    				evt.StartDate = DR("DateFrom")
    				evt.EndDate = DR("DateTo")
    				evt.IsAllDay = IIf(IsDBNull(DR("IsAllDay")), False, CBool(DR("IsAllDay")))
    				evt.Location = IIf(IsDBNull(DR("Location")), "", DR("Location"))
    
    				store.Events.Add(evt)
    			Next
    		End If
    	End If
    
    	Me.MyCalendar.EventStore = store
    	Me.MyCalendar.DataBind()
    End Sub
  4. #4
    You should use DateChange instead of (or in addition) ViewChange.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onDateChange = function (view, startDate, viewStart, viewEnd) {
                // 'this' reference is a CalendarPanel.
                Ext.Msg.alert("DataChange", "The currect data (date range) has been changed.");
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:CalendarPanel runat="server">
                        <EventStore runat="server" />
                        <Listeners>
                            <DateChange Fn="onDateChange" />
                        </Listeners>
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  5. #5
    Great! What a great relieve! Thx a lot!

Similar Threads

  1. Replies: 0
    Last Post: Sep 08, 2011, 9:59 AM
  2. Replies: 2
    Last Post: May 30, 2011, 5:53 AM
  3. Replies: 9
    Last Post: Apr 12, 2011, 3:13 PM
  4. CheckColumn fire event
    By fabiomarcos in forum 1.x Help
    Replies: 0
    Last Post: Oct 06, 2009, 10:55 AM
  5. [CLOSED] Combobox click on arrow event?
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 31, 2009, 12:02 PM

Posting Permissions