This is a migrated thread and some comments may be shown as answers.

Popup Editor Textbox Changes not Calling Save

4 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 07 Nov 2016, 09:13 PM

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.  

4 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 09 Nov 2016, 09:48 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Christy
Top achievements
Rank 1
answered on 21 Nov 2016, 04:29 PM

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!

0
Accepted
Boyan Dimitrov
Telerik team
answered on 23 Nov 2016, 12:17 PM

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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Christy
Top achievements
Rank 1
answered on 29 Nov 2016, 05:11 PM
Thanks!  I changed k-on-change to ng-change for the textarea, and it is working.
Tags
Grid
Asked by
Christy
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Christy
Top achievements
Rank 1
Share this question
or