Adding clear functionality for CalenderExtender Control in ajax tool kit RSS

• • Reply
  

  Ravishankar

  Member

  13 Points

  17 Posts

  Adding clear functionality for CalenderExtender Control in ajax tool kit

  Sep 03, 2012 03:31 PM|LINK

  Hi Friends ,

     I have the same request , i have added couple of lines of code after going through CalenderBehaviour.js as below , it has functionality clear for use  once you done below 10 changes the clear functionality works fine , awesome :)

   

  1) Find this._today = null; in the js and add the below code

   //ravishanker maduri added for clear
      this._clear = null

  2) Add the below code before the function "get_visibleDate: function () {"

  set_clearDate: function (value) {/////ravishanker maduri added for clear
          if (value && (String.isInstanceOfType(value)) && (value.length != 0)) {
              value = new Date(value);
          }

          if (value) value = value.getDateOnly();

          if (this._selectedDate != value) {
              this._selectedDate = value;
              this._selectedDateChanging = true;
              var text = "";
              if (value) {
                  text = '';
              }
              if (text != this._textbox.get_Value()) {
                  this._textbox.set_Value(text);
                  this._fireChanged();
              }
              this._selectedDateChanging = false;
              this.invalidate();
              this.raisePropertyChanged("ClearDate");
          }
      },

   3) Add the below function after get_todayButton: function () {

    get_clearButton: function () {////ravishanker maduri added for clear
          /// <value type="Sys.UI.DomElement">
          /// The button used to select todays date
          /// </value>

          return '';
      },

  4)add the below code after the code  this.set_selectedDate(value);}

   var value = this.get_ClearDate();
          if (value) {
              this.set_clearDate(value); ////ravishanker maduri added for clear
          }

  5) Add the below code after the if loop if (this._today) {

  
  if (this._clear) {////ravishanker maduri added for clear
              $common.removeHandlers(this._clear, this._cell$delegates);
              this._clear = null;
          }

  6) Add the below code after "var todayWrapper = $common.createElementFromTemplate({ nodeName: "div" }, this._popupDiv);"

   ////ravishanker maduri added for clear
          var clearWrapper = $common.createElementFromTemplate({ nodeName: "div" }, this._popupDiv);

  7) add the below code after block  this._today = $common.createElementFromTemplate({

    ////ravishanker maduri added for clear
          this._clear = $common.createElementFromTemplate({
              nodeName: "div",
              properties: {
                  id: this.get_id() + "_clear",
                  mode: "clear"
              },
              events: this._cell$delegates,
              cssClasses: ["ajax__calendar_footer", "ajax__calendar_clear"]
          }, clearWrapper);
          //end of ravi added clear

  8)Add the below code after the "this._today.appendChild(document.createTextNode(String.format(AjaxControlToolkit.Resources.Calendar_Today, todaysDate.localeFormat("MMMM d, yyyy"))));
          this._today.date = todaysDate;"

   ////ravishanker maduri added for clear for clearing the existing or already added clear
          if (this._clear.firstChild) {
              this._clear.removeChild(this._clear.firstChild);
          }
          this._clear.appendChild(document.createTextNode('Clear'));
          this._clear.value = 'Clear';
          //End of Clear

  9) Add the below new case after "case "today":"

    /////ravishanker maduri added for clear 
              case "clear":
                  this.set_selectedDate(target.date);
                  this._switchMonth(target.date);
                  this._blur.post(true);
                  this.raiseDateSelectionChanged();
                  break;

  Once you done above 9 changes add the below line for the style css file calender.css

  10) .ajax__calendar .ajax__calendar_hover .ajax__calendar_clear {}

  11) add below code to CalenderExtenderControl.cs file

  [DefaultValue(null)]
          [ExtenderControlProperty]
          [ClientPropertyName("clearDate")]
          public DateTime? clearDate
          {
              get { return GetPropertyValue<DateTime?>("clearDate", null); }
              set { SetPropertyValue<DateTime?>("clearDate", value); }
          }

  please remember to click answer .

   

    Regards

   

  Ravishanker Maduri

  Ravishankar Maduri
  
  • Marked as answer by Ravishankar on Sep 03, 2012 03:33 PM
  • Moved by Mikesdotnetting on Sep 04, 2012 04:58 AM