Click here to Skip to main content
15,347,523 members
Articles / Programming Languages / Javascript
Tip/Trick
Posted 15 Oct 2015

Tagged as

Stats

19.3K views
7 bookmarked

JavaScript Utils for Kendo

Rate me:
Please Sign up or sign in to vote.
4.25/5 (6 votes)
5 Sep 2016CPOL1 min read
JavaScript utils for helping handle Kendo widgets

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:

JavaScript
/*
 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:

JavaScript
/* 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:

JavaScript
// 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ezequiel Campos
Software Developer (Senior) Universal Leaf Tobacco
Brazil Brazil
Working professionally with Software Development since 2003. Most of this time working with Java and since 2011 with C#.
Experience with Agile Methodologies in most of my projects since 2006. Co-mentor of Agile Methodologies internal training at Dell Brazil between 2009 and 2010.
Working in Universal Leaf Tobacco since 2011 as System/Software Analyst.

Comments and Discussions

 
GeneralUseful Pin
Hussain Patel6-Sep-16 5:30
professionalHussain Patel6-Sep-16 5:30 
GeneralRe: Useful Pin
Ezequiel Campos24-Apr-17 1:43
MemberEzequiel Campos24-Apr-17 1:43 
QuestionI'm lost Pin
phil.o30-Oct-15 9:58
mvephil.o30-Oct-15 9:58 
AnswerRe: I'm lost Pin
Ezequiel Campos30-Oct-15 10:13
MemberEzequiel Campos30-Oct-15 10:13 
GeneralRe: I'm lost Pin
phil.o30-Oct-15 10:48
mvephil.o30-Oct-15 10:48 
AnswerRe: I'm lost Pin
u-li11-Sep-16 23:25
Memberu-li11-Sep-16 23:25 
GeneralRe: I'm lost Pin
phil.o12-Sep-16 0:13
mvephil.o12-Sep-16 0:13 
GeneralVery useful Pin
Paulo Augusto Kunzel15-Oct-15 9:37
professionalPaulo Augusto Kunzel15-Oct-15 9:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.