data-bindingkendo-mvvm

Kendo MVVM data-value-update on multiple events


By default kendo bind its data on change event, we can change it on keyup using data-value-update="keyup".

But i need both. I want to bind data on keyup and on change. I have tried it, by adding two events together like data-value-update="change, keyup", unfortunately it is not working.

<textarea cols="20" data-bind="value:Comment" data-value-update="change, keyup" id="Comment" name="Comment" rows="2"></textarea>

Can anybody knows, is there any way to bind data in multiple events?


Solution

  • Hopefully this dojo will help you with what you are looking for:

    https://dojo.telerik.com/ilaJurol

    I have used the data-bind events collection to bind a keyup and change event.

    This simple example just shows you the functions being triggered in a second textarea box showing you it has fired off the corresponding function.

    Here is the example (control binding and viewmodel) that I created for this example:

    control

    <textarea cols="40" data-bind="value:Comment, events:{change: events.change, keyup: events.keyup}"  id="Comment" name="Comment" rows="40"></textarea>
    

    view model

    var vm = new kendo.data.ObservableObject({
          Comment: 'I am a comment', 
          log: '', 
          events:{
            keyup:function(e){
    
              var that = this; 
              that.set('log', that.get('log') + '\r\nI have pressed the keyup button');
    
            }, 
            change:function(e){
              var that = this; 
                        that.set('log', that.get('log') + '\r\nI have triggered the change event');
    
            }
          }
        }); 
    

    UPDATE

    added updated dojo: https://dojo.telerik.com/ilaJurol/7 based on comments.