Monday, May 30, 2011

Add a CalendarExtender to a GridView for month yearsetting (OnClientHidden OnClientShown)

If we apply modification to calendar control then need to set property for its method and we need to create behaviour id for each calendar. using thesse settings in desing time it is easy but if we add these controls into gridview / datalist etc than we have to struggle with which calendar invoked the request.

For this we have to follwoing steps
step 1)
Add name space
using AjaxControlToolkit;
Step 2) In row databound event  find the control and set its behaviour id wiht row index so each control has its own behaviour ID.
 CalendarExtender AjaxCalendarTextBoxInvalidDate_To = (CalendarExtender)e.Row.FindControl("AjaxCalendarTextBoxInvalidDate_To");
AjaxCalendarTextBoxInvalidDate_To.BehaviorID = "calendar1" + e.Row.RowIndex;

Step 3)
Use the follwing script. In which we declared calendarID as global and set its id ones in function and used in all three function.

<script language="javascript" type="text/javascript">
  var calendarID = '';
        function onCalendarShown(sender,e) {
calendarID = sender._id;
            var cal = $find(sender._id);
            //Setting the default mode to month
            cal._switchMode("months", true);
           
            //Iterate every month Item and attach click event to it
            if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
                    }
                }
            }
        }
       
        function onCalendarHidden(sender,e)
        {
      
        calendarID = sender._id;
           var cal = $find(sender._id);
            //Iterate every month Item and remove click event from it
              if (cal._monthsBody) {
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild,"click",call);
                    }
                }
            }
        }
       
        function call(eventElement)
        {
            var target = eventElement.target;
            switch (target.mode) {
            case "month":
                var cal = $find(calendarID);
                cal._visibleDate = target.date;
                cal.set_selectedDate(target.date);
                cal._switchMonth(target.date);
                cal._blur.post(true);
                cal.raiseDateSelectionChanged();
                break;
            }
            calendarID  = '';
        }

    </script>

4) If you need to show calendare only for specific row/condition than u can declare ajax calendar in side the label and hide / show label on condition


 <asp:Label Visible="false" ID="LableAjaxxToolKitCalendarContainer" runat="server" >
                                <ajax:CalendarExtender   ID="AjaxCalendarTextBoxInvalidDate_To" runat="server"
                                    Animated="False" FirstDayOfWeek="Monday" Format="MMM - yyyy" PopupButtonID="ImageAjaxCalendarTextBoxInvalidDate_To"
                                    TargetControlID="TextBoxInvalidDate_To" >
                                  
                                </ajax:CalendarExtender></asp:Label>

Thanks

No comments: