Kendo UI control's initialization - what is the good approach

[Marcin]

Hi :) 

In my web application I am using Kedno UI Controls for implementing front-end side controls and user interaction. Most of the web application code is written in java-script, so the general approach is to go client side.

On the Kendo UI demo website, we have 2 approaches for initializing kendo grid in case of using MVVM pattern and bindings (as a sample control, but this should apply to other controls):

1/ Data attribute initialization - part of example for brevity

<div data-role="grid"
     date-scrollable="true"
     data-editable="true"
     data-toolbar="['create', 'save']"
     data-columns="[
                    { 'field': 'ProductName', 'width': 270 },
                    { 'field': 'UnitPrice' },
                   ]"
     data-bind="source: products,
                visible: isVisible, events: { save: onSave }"
     style="width: 480px; height: 200px">
</div>

Full example: http://demos.telerik.com/kendo-ui/grid/mvvm

2/ Custom binding (angular way) - part of example for brevity

<div kendo-grid data-bind="options: mainGridOptions">
</div>

Javascript file - ViewModel/Controller - Scope ect...
.mainGridOptions = {
            dataSource: {
                type: "odata",
                transport: {
                    read: "<url...>"
                },
                pageSize: 5,
            },
            sortable: true,
            pageable: true,
            columns: [{
                field: "FirstName",
                title: "First Name",
                width: "120px"
                },{
                field: "LastName",
                title: "Last Name",
                width: "120px"
                },{
                field: "Country",
                width: "120px"
                }
            }]
        };

In the binding for the grid, we pass all required options for particular control. Full similar angular example: http://demos.telerik.com/kendo-ui/grid/angular

Concerning information above I have these questions:

• Which approach is better and why (pron and cons) - to use data attributes for settings or to keep all the control settings in the view model in js and bind it easy to the control like angular does? Taking into account long term application development - support of tools and frameworks (i.e. Typescript), complex settings for controls
• Is this bad idea or breaks MVVM pattern in anyway, that view model contains kendo object after it was initialized, so view model knows what is the control behind it? Of course not in every case, but in the situation when we need to do some workaround on our kendo control in js. In this case we don't need to use jquery selector to get control's data, because binding will give us a reference to the kendo control in the view model after its initialization.

This approach was implemented in Kendo Binding for Angular http://www.telerik.com/blogs/a-few-angular-kendo-ui-best-practices -> Leverage Widget References.

Thank you all for the feedback and answers.

[Alexander Valchev]

Hello Marcin,

The two approaches are completely different. First one uses Kendo MVVM while the second is intended to be used when customers want to use Kendo UI widgets in AngularJS applications. If you do not develop AngularJS application use the first approach.

In case you develop AngularJS application you should follow the second approach where settings are defined in the view controller. For more information regarding Kendo UI Angular JS integration please check this help topic:

• http://docs.telerik.com/kendo-ui/AngularJS/introduction

Regards,
Alexander Valchev
Telerik