JavaScript Utils for Kendo

Introduction

Here, I will list some functions that we created on our project, after using a lot of Copy and Paste, we decided to centralize our functions so we don't need to keep looking for them.

Using the Code

We added these functions in a js file that is added to a bundle on our project.

First, we begin creating this generic function to get kendo or Telerik MVC Extensions Grid, then we improved to get any widget/object:

/*
 get object on page

 parameters:
    - elementId: (name or id) of element.
    - dataType: type of element.
    - isName: if needs get by name else by id. 
 examples:
    GetObject('NameOfGrid', 'tGrid', false)
    GetObject('NameOfGrid', 'kendoGrid', false)
    GetObject('NameOfWindow', 'kendoWindow', false)
    GetObject('NameOfCheckBox', null, true)
*/
function GetObject(elementId, dataType, isName) {
    if (!isName) {
        if (dataType === undefined) {
            return $('#' + elementId);
        } else {
            return $('#' + elementId).data(dataType);
        }
    } else {
        return $('input[name="' + elementId + '"]');
    }
};

This GetObject function is used on functions below:

/* Functions for Kendo objects*/
var kendoUtil =
    {
        /* ComboBox */
        getCombo: function (name) {
            return GetObject(name, 'kendoComboBox');
        },
        refreshCleanCombo: function (name, param) {
            this.clearCombo(name);
            this.refreshCombo(name, param);
        },
        refreshCombo: function (name, param) {
            var combo = this.getCombo(name);
            if (param == null || param == 'undefined') {
                combo.dataSource.read();
            } else {
                combo.dataSource.read(param);
            }
            combo.refresh();
        },
        clearCombo: function (name) {
            var combo = this.getCombo(name);
            combo.dataSource.filter([])
            combo.value('');
        },
        enableCombo: function (name) {
            var combo = this.getCombo(name);
            combo.enable(true)
        },
        disableCombo: function (name) {
            var combo = this.getCombo(name);
            combo.enable(false)
        },
        /* end - ComboBox */
 
        /* DropDownList */
        getDropDown: function (name) {
            return GetObject(name, 'kendoDropDownList');
        },
        refreshDropDown: function (name, param) {
            var dropDown = this.getDropDown(name);
            if (param == null || param == 'undefined') {
                dropDown.dataSource.read();
            } else {
                dropDown.dataSource.read(param);
            }
            dropDown.refresh();
        },
        enableDropDown: function (name) {
            var dropDown = this.getDropDown(name);
            dropDown.enable(true)
        },
        disableDropDown: function (name) {
            var dropDown = this.getDropDown(name);
            dropDown.enable(false)
        },
        /* end - DropDownList */
 
        /* Grid */
        rebindGrid: function (name, param) {
            var grid = this.getGrid(name);
            if (param == null || param == 'undefined') {
                grid.dataSource.read();
            }
            else {
                grid.dataSource.read(param);
            }
        },
        getGrid: function (name) {
            return GetObject(name, 'kendoGrid');
        },
        getSelectedRow: function (name) {
            var grid = this.getGrid(name);
            if (grid.dataSource.total() > 0 && grid.select() != null) {
                return grid.dataItem(grid.select());
            }
            else {
                return null;
            }
        },
        getDataItem: function (name, element) {
            var row = $(element.target).closest("tr");
            var grid = this.getGrid(name);
            return grid.dataItem(row);
        },
        confirmDelete: function (name, element, message, doNotSync) {
            var grid = this.getGrid(name);
            var dataItem = this.getDataItem(name, element);
            OkCancelDialog.ShowWindow({
                message: message,
                callback: function (event) {
                    if (event.result) {
                        grid.dataSource.remove(dataItem);
                        if (doNotSync == null || !doNotSync) {
                            grid.dataSource.sync();
                        }
                    }
                }
            });
        },
        getParentDataItem: function(element, isDeleting) {
            var row;
            if (isDeleting == null || !isDeleting)
            {
                row = element.container.closest("tr.k-detail-row").prev(".k-master-row");
            }
            else
            {
                row = $(element.row[0]).closest("tr.k-detail-row").prev(".k-master-row");
            }
            var data = row.closest("[data-role=grid]").data();
 
            if (data == null) {
                return "";
            }
            parentGrid = data.kendoGrid;
            return parentGrid.dataItem(row);
        },
        /* end - Grid*/
 
        /* Window */
        getWindow: function (name) {
            return GetObject(name, "kendoWindow");
        },
        openCenterWindow: function (name) {
            this.getWindow(name).center().open();
        },
        closeWindow: function (name) {
            this.getWindow(name).close();
        },
        refreshOpenWindow: function (name, url, data) {
            var window = this.getWindow(name);
            window.refresh({ url: url, data: data });
            window.center().open();
        },
        clearWindow: function (name) {
            var window = this.getWindow(name);
            window.refresh();
        }
        /* end - Window */
    }
/* end - Functions for Kendo objects*/

Here are some samples of the usage of some of them:

// simple Grid rebind
kendoUtil.rebindGrid('Grid');

// Grid rebind with parameters
kendoUtil.rebindGrid('Grid', 
{ FirstParam: $('#SomeField').val(), SecondParam: $('#OtherField').val() });

// when editing a detail grid and getting parent data Item:
function onDetailEdit(e) {
     var parent = kendoUtil.getParentDataItem(e);
     //use parent dataItem
}

Most of these functions use the same logic, you pass the name and parameters. In my next tip, I will detail how to use confirmDelete, which we use to replace JavaScript confirm when deleting a row in Kendo Grid.

I keep looking for improvements in these functions and adding new ones. If you have others or a better way of doing this, please add your comments.

Well, these simple functions were created for better code reuse. Reusing code doesn't mean to Copy/Paste everywhere, but centralize your code where/when you can.

Also, DON'T BE AFRAID OF CHANGES. If you're afraid of them, you won't improve your code, neither will you find better ways of doing what is needed.