Issues in Custom command MVVM binding

15 posts, 1 answers
  1. Jianwei
    Jianwei avatar
    20 posts
    Member since:
    Feb 2011

    Posted 12 Jan 2015 Link to this post

    I have a similar issue as the one posted here: http://www.telerik.com/forums/custom-command-mvvm-binding

    I tried to bind on click function to the grid with MVVM approach. However, it will complain the openAction is not property defined.

    Any recommendation on how to do this properly?

    <div id="evaluationlists"
             data-role="grid"
             date-scrollable="true"
             data-editable="false"
             data-columns="[
                    {field:'DisplayId', title:'Id'},
                    {field:'Name', title: 'Name'},
    {field:'Evaluatee', title:'Evaluating'},
                    {field:'ParentName', title: 'Curricular Entity'},
    {field:'DateRange', title: 'Open'},
    {command:{ text: 'Open Action', click: openAction, name:'openAction' } }
                 ]"
             data-bind="source: evaluations, visible:isVisible">
        </div>

    Then I also define my view model as the following:

    var vm = kendo.observable({
               isVisible: true,
               openAction:function(e) {
                   window.console && console.log(e);
               },
               evaluations: new kendo.data.DataSource({
                   schema: {
                       data: "Data",
                       model: {
                           id: "Id"
                       }
                   },
                   transport: {
                       read: {
                           url: "@Url.Action(Model.ActionMethod, "Home")",
                           type: "get",
                           contentType: "application/json"
                       }
                   }
               })
           });
           kendo.bind($('#evaluationlists'), vm);


     
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 14 Jan 2015 Link to this post

    Hi Jianwei,

    In your current configuration, the click event handler cannot be part of the ViewModel (or at least cannot be accessed directly. You may use the following approach instead:
    {command:{ text: 'Open Action', click: vm.openAction, name:'openAction' } }

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. IT
    IT avatar
    2 posts
    Member since:
    Jan 2015

    Posted 09 Feb 2015 in reply to Alexander Valchev Link to this post

    Sorry but this does not solve the issue. I have been trying to do the same thing and can't get this to work. Keep telling me the function is not defined. The only way to get it to work is to put the function in the global scope which is not possible in my case.

    Is there a way to use custom command column in a grid with MVVM scenario? 

    Thank you,
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 11 Feb 2015 Link to this post

    Hello,

    Could you please provide a small Kendo Dojo test page that demonstrates your current implementation so I can examine it and assist you further?

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. IT
    IT avatar
    2 posts
    Member since:
    Jan 2015

    Posted 11 Feb 2015 in reply to Alexander Valchev Link to this post

    Here's a test page:

    http://dojo.telerik.com/oVANo

    If I uncomment the global function, it is working fine. But with MVVM, it won't work. In my case, I need to use it via MVVM. 
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 13 Feb 2015 Link to this post

    Hello,

    As stated before the click event handler should be accessible from the global scope. In your case you should make the ViewModel available in the global scope.
    In case you do not want to make the ViewModel global, nor the click event handler, you may define the custom command as template and use data-bind="click: ..." to attach the event handler.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 08 Apr in reply to Alexander Valchev Link to this post

    I had a similar problem and found, to great disappointment, that the click event must be specified in quotes

     { command: { text: 'Add', click: actions.addSelectedUser, name: 'addUser' }, width: 80 },

    Error: actions is not defined

     { command: { text: 'Add', click: 'actions.addSelectedUser', name: 'addUser' }, width: 80 },

    No error.

     

    Difficult to discover errors like this cost me quite a lot of time with Kendo.

  9. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 08 Apr in reply to Peter Link to this post

    To make my error worse, although there is no error on initialization, once I corrected the method to use quotes.

    When I click the button bound, there's another error:

     

    TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function

  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 12 Apr Link to this post

    Hi Peter,

    The click event handler should not be encapsulated in quotation marks. Most probably you receive an error because the specified event handler is not accessible from the global scope.

    Please check the example from my previous post. It does not use quotation marks.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 13 Apr in reply to Alexander Valchev Link to this post

    Thanks, my methods are accessible via the observable model bound - in this way

      template = _this.root.append($($('#add-template').html()));

            $adWindow = template.find('#add-window');
            return _this.adModel = kendo.observable({
              adDatasource: datasource
              searchText: '',
              actions: actions()
            });

    Where actions is a method, something like this.

     actions: function() {
        addUser: function() { console.debug('test') };
        }

    }

    Ignore any syntax errors, as I've simplified it down and de-coffified it...

    I've used such binding many times in Kendo, is it specifically different with grids or the command toolbar?

  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Apr Link to this post

    Hello,

    I am afraid that the problem you describe is a bit unclear. The invalid code do not help much, too. May you please isolate the problem you face in a Dojo?

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 26 May in reply to Petyo Link to this post

    I don't have time for that I'm afraid.

    Can you not have any idea how my code, set up correctly, would get an error like thi "jquery.js:4435 Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function"

    On running your code?

  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 27 May Link to this post

    Hi,

    I am afraid that we can't guess what goes on in your setup based on an error which we can't reproduce. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 29 May in reply to Petyo Link to this post

    Fair enough. But I don't understand why errors are so badly covered in Kendo.

    Any time a configuration or textual property is wrong in binding, we get bizarre, meaningless errors until we can guess how to fix it.

    I don't understand why you don't catch errors and exceptions in code and use the knowledge at that point in the code, to give the user meaningful feedback.

  16. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 31 May Link to this post

    Hello,

    This is a valid feedback - and we strive to do that, where possible. However, JavaScript is a dynamic language, so it is quite hard for us to foresee and anticipate all the problematic cases that may occur. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready