Popup Editor Textbox Changes not Calling Save

5 posts, 1 answers
  1. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 07 Nov Link to this post

    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.  

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 09 Nov Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 21 Nov in reply to Boyan Dimitrov Link to this post

    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!

  5. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Nov Link to this post

    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.
  6. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 29 Nov Link to this post

    Thanks!  I changed k-on-change to ng-change for the textarea, and it is working.
Back to Top
Kendo UI is VS 2017 Ready