MVVM Toolbar Template

7 posts, 0 answers
  1. Krishna
    Krishna avatar
    2 posts
    Member since:
    Jun 2012

    Posted 06 Jun 2012 Link to this post

    Hey Team Kendo!!

             I am totally amazed with the development of Kendo day to day and Im loving to work with Kendo Framework. I was just trying to give a template for toolbar in MVVM grid but not sure how to do it. For row template we use "data-row-template" and what is it for toolbar????



    Regards,

    Krishna K C
    Krossark Technologies
  2. Krishna
    Krishna avatar
    2 posts
    Member since:
    Jun 2012

    Posted 14 Jun 2012 Link to this post

    I have got a temporary solution as shown below. Do let me know if there is any other way.




    data-toolbar='[{"template": "<div class=\"toolbar\"><input type=\"button\" class=\"k-button k-button-icontext\" value=\"+ Create New\"/></div>" }]'


    This is a example related to my work which displays a CREATE NEW button.








    Regards,
    Krishna K C
    Krossark Technologies
  3. Kendo UI is VS 2017 Ready
  4. Milton
    Milton avatar
    3 posts
    Member since:
    Mar 2014

    Posted 07 Apr 2014 in reply to Krishna Link to this post

    Does anyone have a more permanent solution for this situation? I've tried the above code, and it doesn't completely work for me. It does successfully change the button's text and allows for custom markup, but, when I use that code as-is, the button itself no longer functions.

    I've tried to adjust it (thinking it might be lacking the "create" piece), but this doesn't work either:

    data-toolbar='[{name:"create","template": "<div class=\"toolbar\"><input type=\"button\" class=\"k-button k-button-icontext\" value=\"+ Create New\"/></div>" }]' 
     
    A more permanent solution, or a revision to make this work would be appreciated. Thanks.


     





  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 10 Apr 2014 Link to this post

    Hello Milton,

    This thread is relatively now. Currently the developer has the ability to customize button's text through the configuration options.

    If your aim is just to change the text you can use the following syntax: data-toolbar='[{ "name": "create", "text": "Create" }]'

    In case you prefer to use a template to insert custom mark-up you should bind the click event manually. Basically all you need to do is call the Grid's addRow method on click of the button.

    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. Milton
    Milton avatar
    3 posts
    Member since:
    Mar 2014

    Posted 10 Apr 2014 in reply to Alexander Valchev Link to this post

    Alexander, thanks for your reply; however, the example you've linked to isn't using an MVVM approach. How can you both change the button text AND the markup with MVVM? 

    Let's say we've got our view model set up like this:

    var vm = kendo.observable({
        myVariableName: myVariableDataSource,
    });

    kendo.bind($(".myClassname"), vm);   

    And you've got your grid set up like this:

    <div data-role="grid" data-bind="source: myVariableName" data-toolbar='[{name:"create",text: "Custom Text"}]'
    ....more attributes here...
    ....>

    Attempting the data-toolbar attribute above doesn't work. It causes the button to change text, but the functionality of the button ceases to work.

    I tried adding the addRow function, probably the wrong way, but this is what I tried:

    $('#newCustomButton').click(function(){
        myVariableName.addRow();
    });

    But in that case, I receive the error that "myVariableName" is not defined.

    Sorry for such a straightforward question, but I'm having a hard time wrapping my head around the MVVM approach. The documentation for standard usage is brilliant and understandable, but, to try to do the same things using MVVM, I'm continually at a loss...











      





  7. Milton
    Milton avatar
    3 posts
    Member since:
    Mar 2014

    Posted 10 Apr 2014 in reply to Milton Link to this post

    To clarify, when I replied:

    "Attempting the data-toolbar attribute above doesn't work"

    I'm referring to the version that includes the template attribute above:

    data-toolbar='[{"template": "<div class=\"toolbar\"><input type=\"button\" class=\"k-button k-button-icontext\" value=\"+ Create New\"/></div>" }]'

    that doesn't work when I try it. 
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 14 Apr 2014 Link to this post

    Hello Milton,

    If I understood correctly you would like to change dynamically the toolbar's buttons text when MVVM fields change or you want to bind the click event to a ViewModel function.
    Both of those scenarios are not supported.

    The "MVVM approach" is basically divided into two parts - data attribute initialization and binding. The role of the first one is to set the configuration options of the widget. For example:
    data-role="grid" => .kendoGrid({ ... })
    data-filterable="true" => filterable: true
    data-toolbar='[ .... ]' => toolbar: ....

    Those settings cannot be bound, they are set once during the initialization and does not depend of the ViewModel. For example you cannot bind the filterable setting to a ViewModel field nor to bind the toolbar's button text/click event.

    The role of the binding part is to connect the UI with the ViewModel. Kendo UI Grid supports the events, source and visible bindings. This means that only event handlers, dataSource and visible state of the control can be bound to ViewModel fields.

    I hope this information will help.

    Regards,
    Alexander Valchev
    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