Using Kendo UI with Knockout JS

Pre-Requisites

Basic understanding of Kendo UI (Learn Kendo UI) and Knockout JS (Learn Knockout) is required.

Introduction

Knockout JS is JavaScript library that is based on MVVM pattern that helps developers building rich and dynamic websites. This separates the application's Model (stored data), View (UI) and View Model (JavaScript Representation of model). Knockout allows for easy one or two-way synchronization between your data and the markup.

However, Knockout does not include any widgets or components for creating the user interface, which is a major strength of Kendo UI. Kendo UI provides most of the components required to build modern web applications and it reduces the development time. It provide components for Data Management, Scheduling, Editors, File Upload and many more.

The open source library Knockout-Kendo provides the integration needed to make these tools work together in a natural way.

Why use Kendo with Knockout?

Kendo UI does provide its own MVVM functionality that is tightly integrated with the Kendo UI widgets. If you are starting a project from scratch and plan to make heavy use of Kendo UI, then you might want to consider this option. However, you may already have experience with Knockout, or you might just prefer Knockout's syntax and functionality, or you have a requirement to use any rich widget of kendo UI in a project and knockout has already been used in it. In that case, Knockout and Kendo UI can be a powerful combination.

When using Knockout, all interactions between the DOM and your data are intended to happen in bindings. Knockout provides an extensibility point that allows you to extend the default bindings with your own custom bindings. In simple words, Knockout has magic properties and Kendo has magic objects.

Using Knockout-Kendo

Getting started with Knockout-Kendo is easy. You can get the plugin from here and includes a documentation site that describes how to use each binding.

Installation

The Knockout-Kendo library will register bindings for any widgets that are available when it is loaded. This means that you will want to reference both Knockout and the Kendo UI scripts (along with jQuery) prior to Knockout-Kendo.

<scriptsrc="@Url.Content ("~/Scripts/jquery-1.9.1.js")"type="text/javascript"></script>

<scriptsrc="@Url.Content ("~/Scripts/kendo/kendo.all.min.js")"type="text/javascript"></script>

<scriptsrc="@Url.Content ("~/Scripts/knockout-2.3.0.js")"type="text/javascript"></script>

<scriptsrc="@Url.Content ("~/Scripts/knockout-kendo.min.js")"type="text/javascript"></script>

Using Kendo

Each widget is represented with a custom binding that uses the same name as the widget. Kendo attributes can be used in a data-bind of knockout as it can be used in jQuery. For example, the slider widget is available as a custom binding called kendoSlider. Each binding accepts an object containing any of the options that the widget supports:

<input data-bind="kendoSlider: {value: weight, enabled: enabled, min: 0, max: 100}" />

Using Kendo Grid

Below is the code example for using kendo UI with knockout with a row template and other kendo grid attributes like filterable, pagination etc.:

 <divstyle="border: none;"data-bind="kendoGrid: {

        data: JobList,

        columns: [

            { field: 'name', title: 'Name'},

            { field: 'completed', title: 'Completed',filterable: false },

            { field: 'questionnaireTemplateName', title: 'Template',filterable: false },

            { field: 'lastUpdate', title: 'Updated',filterable: false },

            { field: 'jobStatusName', title: 'Status',filterable: false },

            { field: '', title: '' }

        ],

        rowTemplate: 'JobTemplate',

        useKOTemplates: true,

        editable: false,

        resizable:true,

        filterable: {

            extra: false,

            operators: { string: { contains: 'Contains' } }

         },

         sortable: true,

         scrollable: false,

         pageable: { pageSize:14, change:function(e){ faTooltipFix(); } }

         }">

        <scriptid="JobTemplate"type="text/html">

            <tr>

                <tddata-bind="click: $root.jobProcess">

                    <divclass="row data column align-text firstCol"data-bind="text: name"></div>

                </td>

                <tddata-bind="click: $root.jobProcess">

                    <divclass="row data column align-text">

                        <divclass="progress-holder">

                            <divclass="progress-loader"data-bind="style: { width: completedPercent + '%' }">

                            </div>

                            <divclass="progress-text">

                                <spandata-bind="text: completedPercent.toFixed(0)"></span><span>%&nbsp;-&nbsp;</span>

                                <spandata-bind="text: completed"></span>

                            </div>

                        </div>

                    </div>

                </td>

                <tddata-bind="click: $root.jobProcess">

                    <divclass="row data column align-text"data-bind="text: questionnaireTemplateName"></div>

                </td>

                <tddata-bind="click: $root.jobProcess">

                    <divclass="row data column updated align-text"data-bind="text: lastUpdate"></div>

                </td>

                <tddata-bind="click: $root.jobProcess">

                    <divclass="row data column status align-text"data-bind="text: jobStatusName"></div>

                </td>

                <td>

                    <divclass="row data">

                        <divclass="column actions">

                            <adata-bind="click: $root.deleteJob"><spandata-tooltiparia-haspopup="true"class="has-tip"data-selector="Delete"title="Delete"><iclass="fa fa-remove"></i></span></a>

                            <adata-bind="click: $root.editJob"><spandata-tooltiparia-haspopup="true"class="has-tip"title="Edit"><iclass="fa fa-pencil-square-o"></i></span></a>

                            <adata-bind="click: $root.jobProcess"><spandata-tooltiparia-haspopup="true"class="has-tip"title="Process"><iclass="fa fa-tasks"></i></span></a>

                        </div>

                    </div>

                </td>

            </tr>

        </script>

    </div>

comments powered by Disqus