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:
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:
var kendoUtil =
{
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)
},
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)
},
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);
},
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();
}
}
Here are some samples of the usage of some of them:
kendoUtil.rebindGrid('Grid');
kendoUtil.rebindGrid('Grid',
{ FirstParam: $('#SomeField').val(), SecondParam: $('#OtherField').val() });
function onDetailEdit(e) {
var parent = kendoUtil.getParentDataItem(e);
}
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.
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.