Declarative Initialization, kendo.bind reinitializing controls

[Tom B]

Hi,

I am declaratively creating a kendo grid like so:

<div data-role="grid" data-columns="..." data-toolbar="[{"template": "<div id=\"gridToolbar\" class=\"toolbar\"><input type=\"button\" class=\"k-button k-button-icontext\" value=\"My Button\"/></div>" }]" data-source="..." ...></div>

After the grid is created I am making some changes to the toolbar (or maybe the datasource).  

$(kgrid.element).find("#gridToolbar").find("input").attr("value", "My Button 2");

This all works fine. But if kendo.bind is called again (lets say to bind a new observable to the UI), then the changes to the toolbar are lost because it is rebuild from the data attribute. My understanding is that kendo.bind initializes kendo controls and binds data for MVVM.  I had assumed that bind would only declaratively initialize the control ONCE, then subsequently just bind the observable to the already initialized controls.  Clearly this is wrong.  

In order to avoid this problem, I have found that if I remove the data-role attribute after the first call to kendo.bind (or kendo.init), then kendo.bind will not find the grid which prevents re-initialization. This is hacky and there are some downsides I can think of.

Is there some other way to handle this problem?  I really like the declarative initialization.  We render our kendo controls server side with declarative attributes, send to the browser, then just call kendo.init.  Works great, no messy inline JavaScript creating kendo controls.  But if we use MVVM and call kendo.bind, then control customization can get lost if those options were initially defined in attributes.  Am I missing something obvious here to avoid this problem?

Here is a dojo example:

http://dojo.telerik.com/itaqa

Thanks for any feedback.

[Georgi Krustev]

Hello Randy,

In general, widget is initialized only once on kendo.bind method call. Note, however, that any subsequent kendo.bind call will set the options of the widget using its setOptions method. In this case, the toolbar options are retrieved from the data attributes every time, because setOptions method retrieves them. What you can do is to implement a custom MVVM binding for the toolbar option. Thus you can update it from the ViewModel instead of using jQuery. Here is a Dojo demo.

Regards,
Georgi Krustev
Telerik