[web] [kendo] Kendo Web UI Notes
==============================
==============================
BUTTONS
==============================
==============================
------------------------------
Enable / Disable
------------------------------
var submitButton = $('#submitButton').kendoButton({
enable: false
}).data('kendoButton');
submitButton.enable(true);
==============================
==============================
STRING FORMATTING
==============================
==============================
kendo.toString(RunDateTime, 'MM/dd/yyyy');
==============================
==============================
CUSTOM TEMPLATING
==============================
==============================
<script type="text/x-kendo-template" id="detail-template">
<div class="tabstrip">
<ul>
<li class="k-state-active">
Users
</li>
<li>
Test Details
</li>
</ul>
<div>
<div class="users"></div>
</div>
<div>
<div class='test-details'>
<ul>
<li><label>Date:</label>#= kendo.toString(RunDateTime, 'MM/dd/yyyy') #</li>
<li><label>Name:</label>#= Name #</li>
<li><label>Description:</label>#= Description #</li>
<li><label>Hours:</label>#= Hours #</li>
<li><label>Minutes:</label>#= Minutes #</li>
<li><label>Seconds:</label>#= Seconds #</li>
</ul>
</div>
</div>
</div>
</script>
==============================
==============================
GRID
==============================
==============================
==============================
GRID - General
==============================
------------------------------
refer to grid
------------------------------
var grid = $('#grid').data('kendoGrid'); // refer from anywhere
function xxx(e) {
var grid = $(e.sender.wrapper).data('kendoGrid'); // refer when called from the grid like "detailInit: xxx"
// --- or ---
var grid = e.sender; // refer when called from the grid like "detailInit: xxx"
}
------------------------------
reload/refresh the grid
------------------------------
//*** used on a successful callback from a create or an update function.
grid = $('#grid').data('kendoGrid');
grid.dataSource.read();
grid.refresh();
==============================
GRID - Selecting Rows
==============================
------------------------------
get value from a single row
------------------------------
var grid = $('#grid').kendoGrid({
selectable: 'row',
change: function () {
var selectedRow = this.select();
var dataItem = this.dataItem(selectedRow);
console.log(dataItem);
console.log(dataItem.Email);
}
});
==============================
GRID - DetailRow / MasterRow
==============================
------------------------------
collapse master row
------------------------------
// collapse sample
var EXPANDED_ROW;
function masterGridInit() {
var grid = $('#grid').kendoGrid({
detailInit: xxx
});
}
function xxx(e) {
//*** Show only one detail row at a time
var grid = e.sender;
// --- or --- var grid = $(e.sender.wrapper).data('kendoGrid');
if (EXPANDED_ROW != null && EXPANDED_ROW.index() != e.masterRow.index()) {
grid.collapseRow(EXPANDED_ROW);
}
EXPANDED_ROW = e.masterRow;
}
------------------------------
expand detail row
------------------------------
var grid = $('#grid').kendoGrid({
dataBound: function () {
//*** expand the first detail row on databound.
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
});
==============================
GRID - Columns
==============================
------------------------------
custom columns
------------------------------
columns: [
{ field: "Value", width: 20, title: "Value", template: '<div style="text-align:right;">#= kendo.toString(Value, "n2") #</div>'}
]
columns: [
{ field: "Value", width: 20, title: "Value", format:"n2", attributes:{style:"text-align:right;"}}
]
columns: [
{
field: "Value",
width: 20,
title: "Value",
format: "n2",
attributes: { class:"numbers" },
editor: function(container, options) {
$('<input type="text" ' +
'name="' + options.field + '" ' +
'data-type="number" ' +
'data-bind="value:' + options.field + '" ' +
'data-role="numerictextbox" ' +
'class="k-input numbers"/>').appendTo(container);
}
}
]
//*** css
.numbers {
text-align: right;
}