Toolbar MVVM

[Bert]

Hello,

 I can bind a toolbar button click to a view model using the following code:

$("#toolbarButton").attr("data-bind", "click: onButtonClick");
var model = kendo.observable({
  onButtonClick: function () { alert(“Hello”) }
});
kendo.bind($("#Toolbar"), model);

After disabling the button, it is grayed out but clicking on the button still calls the click handler. The button is disabled using the following code.

var toolbar = $("#Toolbar").data("kendoToolBar");<br>toolbar.enable($("#toolbarButton"), false);

 Any help would be appreciated.

Regards,

Bert

[Alexander Valchev]

Hi Bert,

The ToolBar widget exposes two ways of attaching click event handlers. The first one is by using the click event of the widget and the second one is by using the click configuration property of the item.
The code you provided binds the click configuration property of the item which is not supported. At present only binding the click event handler of the widget is supported.

Please see the following example: http://dojo.telerik.com/eCEQ

Regards,
Alexander Valchev
Telerik

 

 

[Bert]

Hello Alexander,

will MVVM support like binding the click configuration property be available in the next service release? We are also missing the razor function for setting html-attributes.

Kind regards,
Bert

[Alexander Valchev]

Hello Bert,

As a general rule, configuration properties of the widgets cannot be bound via MVVM. For example, the same applies for columns.command.click of the Grid widget.

We are also missing the razor function for setting html-attributes.

Could you please specify where you want to set HTML attributes - to the ToolBar container or to the buttons inside it?

Regards,
Alexander Valchev
Telerik

 

 

[Bert]

Hello Alexander,

I do not understand what you mean with “configuration properties of the widgets cannot be bound via MVVM”. Can you clarify this? 

My problem is as follow; I bind a button click to a method of a view model using the attribute ‘data-bind="click: handleButtonClick"’ which is working fine. But when the button is disabled it still calls the ‘handleButtonClick’ function which is a bug. When will this bug be fixed?

We want to use Razor functions to set Html attributes for both the toolbar and the buttons. It would also be great that other widget can be added to the toolbar without the need of using templates e.g. a texbox or a combobox.

Regards,
Bert

[Alexander Valchev]

Hi Bert,

What I meant to explain was that only the widget level events may be bound with the MVVM syntax like in the Dojo sample that I provided below. The button click handlers can't be accessed in this way.

Your approach works because it binds the handler to the click DOM event, not the widget item click event. The ToolBar itself is not aware of the binding and therefore the enable functionality does not affect the binding in question.

In the next service pack release we will add the feature you requested. You will be able to attach HTML attributes to the ToolBar container and to the buttons inside.
Providing ability to add another widgets without a template is not in our immediate plans though.

Regards,
Alexander Valchev
Telerik

 

 

[Bert]

Hello Alexander,

Many thanks for your help, it is clear now. We are looking forward for the next service release.
I an afraid that you forgotten to provide the link to the Dojo sample. Can you please provide it since I am very interested in this example?

Regards,
Bert

[Petyo]

Hi Bert,

this is the link Alexander referred to.

Regards,
Petyo
Telerik