title: JavaScript and JQuery with Telerik help needed
body: <p>Dev Gurus:  Need some help.  I have a external .js file that has the following function:</p>
  
  <pre><code>function bindDates(effDate, endDate, attrType) {
      //Declare variables to be used in the JavaScript Function
      var effDateID = effDate.get_id();
      var endDateID = endDate.get_id();
      var tmp = attrType;
  
      //RBD THIS IS KEY TO THE DATEPICKER BOXES&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; THIS IS THE KEY -------------      TRY TO BREAK UP&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
      //$(effDate.get_element()).on('validDateEntered', { effID: effDateID, endID: endDateID, type: tmp }, function (evt) {
      //    setEffectiveDates($find(evt.data.effID), $find(evt.data.endID), evt.data.type);
      //});
  
      $(effDate.get_element()).on('validDateEntered', { effID: effDateID, endID: endDateID, type: tmp }, function (evt) {
          setEffectiveDates($find(evt.data.effID), $find(evt.data.endID), evt.data.type);
      });
  
      effDate.add_dateSelected(function (sender, args) {
          validateDatesRange(effDate, endDate);
      });
  
      effDate.get_dateInput().add_blur(function (sender, args) {
          validateDatesRange(effDate, endDate);
      });
  
      //$(endDate.get_element()).on('validDateEntered', { effID: effDateID, endID: endDateID, type: tmp }, function (evt) {
      //    setEffectiveDates($find(evt.data.effID), $find(evt.data.endID), evt.data.type);
      //});
  
      endDate.add_dateSelected(function (sender, args) {
          validateDatesRange(effDate, endDate);
      });
  
      endDate.get_dateInput().add_blur(function (sender, args) {
          validateDatesRange(effDate, endDate);
      });
  }
  </code></pre>
  
  <p>Need help on understanding the following</p>
  
  <pre><code>$(effDate.get_element()).on('validDateEntered', { effID: effDateID, endID: endDateID, type: tmp }, function (evt) {
      setEffectiveDates($find(evt.data.effID), $find(evt.data.endID), evt.data.type);
  });
  </code></pre>
  
  <p>I am not sure what the 'validDateEntered' means.   this is code I am working on from a past developer.    What seems to be happening is that the date will get set if it is valid, but I need it to set NO MATTER WHAT.</p>
  
  <p>Add later:</p>
  
  <pre><code> function validateDatesRange(effDateCtrl, endDateCtrl) {
      var result = true,
          effDate = effDateCtrl.get_selectedDate(),
          endDate = endDateCtrl.get_selectedDate(),
          cell = $(effDateCtrl.get_element()).parents('td').first();
  
      if (effDate &amp;&amp; endDate) {
          if (effDate &gt; endDate) {
              var div = "&lt;div class='errorMessage' style='display:none;'&gt;Effective date must be less than end date.&lt;/div&gt;";
              $(div).prependTo(cell).fadeIn();
              result = false;
          }
      }
  
      if (result) {
          cell.find('div.errorMessage').fadeOut(200, null, function () { $(this).remove(); });
          $(effDateCtrl.get_element()).trigger('validDateEntered');
      }
      return result;
  }
  </code></pre>
  
  <p>When the page loads it will populate multiple grids.   The grids have an edit button.   When you click the edit button a panel displays and shows the effDate and endDate controls.</p>
  
  <p>The effDate populates when you click the edit button once, but the endDate does not.   If you click the edit button again the endDate control will populate.   I need them populated on the same click.   I feel dumb because I cannot trap the issue.  I wish I could trap the edit event, but do not even see it in the grid.   Thanks ahead of time.</p>