MVVM Toolbar Template

[Krishna]

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

[Krishna]

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

[Milton]

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.


 

[Alexander Valchev]

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

 

 

[Milton]

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...











  

[Milton]

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. 

[Alexander Valchev]

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