Popup Editor Textbox Changes not Calling Save

[Christy]

I have a grid that is using the popup editor with customized create and update templates.  The create is working just fine, and the update works if I change one of the dropdowns.  However, if I only change some of the text in the textbox and click the Update button, the update function in the dataSource is not run, even though the dataSource sync function runs.  Do I need to call the onChanges event of the textbox?

I am using Angular for this application, and when I make a change in the textbox, the ng-pristine class is removed and the ng-dirty class is added.  

[Boyan Dimitrov]

Hello Christy,

I believe what you are looking for is Use AngularJS in Popup Editor Templates how-to article. 

Regards,
Boyan Dimitrov
Telerik by Progress

 

 

[Christy]

I have been working on something else, so it's taken me a while to get back to this.  I should give you a little more information.  

• I am using a custom template to set up this Popup Editor.  
• The data for this field requires a textarea element.  
• I had included a k-on-change that set the dirty flag to true.  This seems to allow it to hit the save function in the grid options with no issues.  However, unless the second field (a dropdownlist) is also edited, the update function within the dataSource is never called.  I have looked at the values of e in the save function and see no difference between these (other than the data) when I change or do not change the dropdownlist value.
• When I inspect the page (F12), the textarea element does not show the data. Initially, the textarea appears as the top element shown below, but changes to the bottom element once something is typed in the textarea.
  

  <textarea k-on-change="dataItem.dirty=true;" ng-model="dataItem.text" id="messageTextEdit" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty"></textarea>
  
  <textarea k-on-change="dataItem.dirty=true;" ng-model="dataItem.text" id="messageTextEdit" class="form-control ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched"></textarea>

Is there something more I need to do in save?  The e.model.dirty value in save is always false, even when the update function is subsequently called. Is there a way to call the update function from save?  How do I create the update parameter?

The following is the current set-up for the textarea in the custom popup editor:

<div class="form-group">
    <label for="messageTextEdit">Message:</label>
    <textarea k-on-change="dataItem.dirty=true;"
              ng-model="dataItem.text"
              id="messageTextEdit"
              class="form-control"></textarea>
</div>

The following is the code in the save function in the grid options:

save: function (e) {
    vm.errorMessage = '';
    if (!e.model.typeID) {
        vm.errorMessage = 'Please select a type';
        e.preventDefault();
    }
}

Thanks for your help!

[Boyan Dimitrov]

Hello Christy,

The k-on is an attribute for defining an event handler for Kendo UI widgets (as stated in Event Handlers article). Please refer to the https://docs.angularjs.org/api/ng/directive/textarea article and specifically for the ng-change. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Christy]

Thanks!  I changed k-on-change to ng-change for the textarea, and it is working.