I would like find out, what is the field name in a template function like:
{
field: "country",
template: function(e){
var tmp = "";
var guid = kendo.guid();
$.each( e.country, function( key, value ) {
tmp += '<span class="xyz">' + value.text + '</span>';
});
return tmp;
},
}
Sample: Associative array in grid cell
I don't have the field name "country" in the template: function(e). There are only the field data in the function from template.
Is there a method, like kendo.guid(), that I have the field name "country" for sample in the function.
See if this answers your needs:
{
field: "country",
title: "Country",
template: function(e, field = "country") {
console.log("Field name:", field);
console.log(e[field]);
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
},
}
You can see an example of how this can be used in the snippet.
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add new item - '#: instance.input.val() #' ?
</div>
<br />
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>
<script>
function getTemplate(e, fieldName) {
if (fieldName === "country") {
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
} else {
return e[fieldName];
}
}
$(document).ready(function () {
var data = [
{
'id':'wpErpOs_1',
'name': 'Rolf',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_2',
'name': 'Hans',
'country': [
{ 'text':'Deutschland','id':'2'},
{ 'text':'Schweiz','id':'1'},
{ 'text':'Österreich','id':'3'}
],
'flag':false
}, {
'id':'wpErpOs_3',
'name': 'Esther',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_4',
'name': 'Daniela',
'country': [{ 'text':'Österreich','id':'3'}],
'flag':false
}
];
var dataSource = new kendo.data.DataSource({
transport: {
read: function(e){
e.success(data);
},
update:function(e){
e.success();
},
destroy: function(e){
e.success();
},
create: function(e){
e.success();
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
country: { type: "object" },
flag: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
columns: [
{
field: "name",
title: "Name",
template: function(e) {return getTemplate(e, "name");}
}, {
field: "country",
title: "Country",
template: function(e) {return getTemplate(e, "country");}
}, {
field: "flag",
title: "Flag",
editor: wpErpOs_GridBoolean,
template: function(e) {return getTemplate(e, "flag");}
},
],
editable: "popup",
});
});
function wpErpOs_GridBoolean(container, options){
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
};
</script>
</div>
</body>
</html>
Since column is javascript object, could use a getter to build the template. This allows you to get values of other properties in object (e.g. field). (Self-references in object literals / initializers)
{
field: "country",
title: "Country",
get template() {
var fieldName = this.field;
return function(e) {
var tmp = "";
var guid = kendo.guid();
$.each(e[fieldName], function(key, value) {
tmp += '<span class="k-button" style="line-height:1.25em; cursor:default;">' + value.text + '</span>';
});
return tmp;
}
},
}
Since my formatting needs were simpler I just created a string template.
{
field: "Date",
get template() {
return "# if (" + this.field + ") { # #= kendo.toString(kendo.parseDate(" + this.field + ",'yyyy-MM-dd'), 'MM/dd/yyyy') # # } #"
}
}
Related
I have the following project. There you can click on the individual checkboxes and the ID is written (see Console).
Then I have tested the ServerPaging. This works in another project (there are no checkboxes). If I change the above project to ServerPaging, I can click on the checkbox, but it reloads the DataSource. What can I do here?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Grid with checkboxes</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/console.js"></script>
</head>
<body>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
label {
float: left;
line-height: 1;
}
[role='gridcell'] {
box-shadow: none !important;
}
.checkColumnCenter {
text-align: center;
width: 20px;
}
.fieldlist {
margin: 0 0 -1em;
padding: 0;
}
.fieldlist li {
list-style: none;
padding-bottom: 1em;
}
</style>
<div id="example">
<div id="grid"></div>
</div>
<script>
$(document).ready(function() {
var MainArray = [];
var subArray = [];
var selectedItems = [];
var pageNum;
var initialLength = 0;
var confirmedArray = [];
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
return kendo.data.transports["odata"].parameterMap(options, operation);
}
},
pageSize: 10,
type: "odata",
batch: true,
serverPaging: false,
serverSorting: false,
/*serverPaging: true,
serverFiltering: true,
serverSorting: true,
batch: true,*/
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
},
data: function (response) {
return response.d ? response.d.results: response;
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
navigatable: true,
pageable: true,
sortable: true,
persistSelection: true,
filterable: {
extra: false,
mode: 'row',
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Equal",
neq: "Not equal"
}
},
messages: {
isTrue: "checked",
isFalse: "selectable"
}
},
resizable: true,
columns: [{
field: "Discontinued",
width: 150,
template: "<input type='checkbox' onclick='checkOne()' data-bind='checked:Discontinued' />",
headerTemplate: "<input id='checkAll' type='checkbox' onclick='checkAll(this)'/><span id='checkAllPtext'></span>",
attributes: {
"class": "checkColumnCenter",
style: "color:\\#0c0"
}
},
{
field: "ProductName",
title: "Product",
width: 150
},
{
field: "UnitPrice",
title: "Unit",
width: 120
},
{
field: "UnitsInStock",
title: "Costplace",
width: 120
},
],
dataBound: function(e) {
if(this.dataSource.filter()){
$('#checkAll').show();
$('#checkAllPtext').show().html("All");
} else {
$('#checkAll').hide();
$('#checkAllPtext').hide();
}
selectedItems = [];
var selectedItemsPage = [];
e.sender.items().each(function() {
var dataItem = e.sender.dataItem(this);
kendo.bind(this, dataItem);
if (dataItem.Discontinued) {
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem(this);
selectedItemsPage.push(dataItem);
$(this).addClass("k-state-selected");
}
});
if (pageNum == e.sender.dataSource._page) {
// kendoConsole.log('initialLength', initialLength)
if (initialLength !== 0) {
// MainArray.splice(-initialLength);
// kendoConsole.log('subArray', MainArray.indexOf(subArray[0]))
subArray.forEach(function(item, i) {
MainArray.splice(MainArray.indexOf(item), 1);
});
}
if (selectedItemsPage.length > 0) {
selectedItems = selectedItemsPage;
}
subArray = selectedItemsPage;
initialLength = selectedItems.length;
} else {
selectedItemsPage.forEach(function(item) {
if (MainArray.indexOf(item) > -1) {
MainArray.splice(MainArray.indexOf(item), 1);
}
});
pageNum = e.sender.dataSource._page;
if (selectedItemsPage.length > 0) {
selectedItems = selectedItemsPage;
}
subArray = selectedItemsPage;
initialLength = selectedItems.length;
}
MainArray = MainArray.concat(selectedItems);
// kendoConsole.log(MainArray);
$("#checkAll")[0].checked = e.sender.items().find(":checked").length == e.sender.dataSource.view().length;
}
});
setTimeout(function() {
getMarked();
}, 500);
getMarked = function() {
dataSource.fetch(function() {
confirmedArray = dataSource._data.filter(function(item) {
return item.Discontinued;
})
var confirmedIDs = confirmedArray.map(function(item) {
return item.ProductID;
});
kendoConsole.log(JSON.stringify("Selected ID's: " + confirmedIDs));
})
}
// setTimeout(function () {
// getMarked();
// }, 200);
});
var getMarked;
function checkOne() {
setTimeout(function() {
getMarked();
}, 100);
}
function checkAll(input) {
var grid = $("#grid").data("kendoGrid");
var items = grid.items();
items.each(function() {
var dataItem = grid.dataItem(this);
if (dataItem.Discontinued != input.checked) {
dataItem.Discontinued = input.checked;
dataItem.dirty = true;
}
})
grid.dataSource.sync();
setTimeout(function() {
getMarked();
}, 100);
}
</script>
<div class="box wide">
<h4>Console log</h4>
<div class="console"></div>
</div>
<style>
.console div {
height: 6em;
}
</style>
</body>
</html>
I helped it with a simple check array.length > 0
getMarked = function() {
if (array.length > 0) {
// foo nothing
}
dataSource.fetch(function() {
confirmedArray = dataSource._data.filter(function(item) {
return item.Discontinued;
})
var confirmedIDs = confirmedArray.map(function(item) {
return item.ProductID;
});
})
}
The problem was that the grid was reloaded every time after an action. Since the changes in the grid have not been saved yet, he has discarded the changes each time. Is a good workaround for me.
How to restrict the check box check to 5 in Kendo UI grid.
I am using Kendo UI grid with check box. I want to restrict check box selection to 5
Please find the code attached
$(function () {
$("#grid").kendoGrid({
dataSource: {
pageSize: 10,
transport: {
read: {
url: "url",
dataType: "json"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {
type: "string"
},
Title: {
type: "string"
},
OrderDate: {
type: "date",
defaultValue: null
}
}
}
}
},
pageable: true,
persistSelection: true,
change: onChange,
columns: [
{ selectable: true, width: "50px" },
{ field: "Title", title: "Title" },
{ field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}", encoded: true }
]
});
});
function onChange(arg) {
//console.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
}
Thanks in advance
This is tested code according your requirement only difference is that checkbox column created with template.
Reference link : https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<button id="showSelection">Show selected IDs</button>
<script>
$(document).ready(function () {
//DataSource definition
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
//Grid definition
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
//define dataBound event handler
dataBound: onDataBound,
toolbar: ["create"],
columns: [
//define template column with checkbox and attach click event handler
{ template: "<input type='checkbox' class='checkbox' />" },
"ProductName", {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "100px"
}, {
field: "UnitsInStock",
title: "Units In Stock",
width: "100px"
}, {
field: "Discontinued",
width: "100px"
}, {
command: ["edit", "destroy"],
title: " ",
width: "172px"
}
],
editable: "inline"
}).data("kendoGrid");
//bind click event to the checkbox
grid.table.on("click", ".checkbox" , selectRow);
$("#showSelection").bind("click", function () {
var checked = [];
for(var i in checkedIds){
if(checkedIds[i]){
checked.push(i);
}
}
alert(checked);
});
});
var checkedIds = {};
//on click of the checkbox:
function selectRow() {
//// *********Prevent to select more than 5 record*************************
if(Object.keys(checkedIds).length>=5)
{
this.checked=false;
}
/// **********************************
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
checkedIds[dataItem.id] = checked;
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
}
//on dataBound event restore previous selected rows:
function onDataBound(e) {
var view = this.dataSource.view();
for(var i = 0; i < view.length;i++){
if(checkedIds[view[i].id]){
this.tbody.find("tr[data-uid='" + view[i].uid + "']")
.addClass("k-state-selected")
.find(".checkbox")
.attr("checked","checked");
}
}
}
</script>
</body>
</html>
Let me know if you have questions or concerns.
I have implemented kendo grid batch editing feature to my application. I am able to save the changes by the default functionality provided by kendo. Here is the same code I have implemented in my project:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.flat.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.flat.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120, editor: customBoolEditor },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
function customBoolEditor(container, options) {
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
}
</script>
</div>
</body>
</html>
I need a feature to show the entire grid in edit mode have all the editable column with edit templates. I tried to add same client template as editor template but the behavior is not as expected. Is there any way to show both client template and editor template with a common template?
For e.g.
In the above example, I need Unit Price with numeric textbox present on all the rows. Not only when I click to it.
Here has an example;
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "id",
fields: {
id: { editable: false }
}
}
},
change: function() {
$("textarea").val(
kendo.stringify(this.view())
);
},
data: [
{ id:1, age: 30, name: "John Doe" }
]
},
columns: [
{ field: "id", width: 50 },
{ field: "age", template: "<input data-bind='value: age' data-role='numerictextbox'>" },
{ field: "name", template:"<input data-bind='value: name' >" }
],
dataBound: function() {
var rows = this.tbody.children();
var dataItems = this.dataSource.view();
for (var i = 0; i < dataItems.length; i++) {
kendo.bind(rows[i], dataItems[i]);
}
}
});
http://jsbin.com/ApoFobA/2/edit?html,js,output
Is there any method like that dataSource.getFieldType(field) in datasource:
var dataSource = new kendo.data.DataSource({
// somethings here,
schema : {
model : {
post_id : {type: "number" },
post_title : {type:"string"},
post_date : {type:"date"}
}
}
});
var fieldType = dataSource.getFieldType("post_title"); // it should return string
You should define a getFieldType function as:
function getFieldType(dataSource, field) {
return dataSource.options.schema.model.fields[field].type;
}
and using it would be:
var fieldType = getFieldType(dataSource, "post_title");
Alternatively, you can extend KendoUI DataSource for defining a new method called getFieldType by doing:
kendo.data.DataSource.prototype.getFieldType = function(field) {
return this.options.schema.model.fields[field].type;
}
and using it would be:
var fieldType = dataSource.getFieldType("post_title");
Check here the version using DataSource extension:
$(document).ready(function() {
kendo.data.DataSource.prototype.getFieldType = function(field) {
return this.options.schema.model.fields[field].type;
}
$("#show").on("click", function() {
var ds = $("#grid").data("kendoGrid").dataSource;
alert("Freight: " + ds.getFieldType("Freight"));
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
pageable: true,
columns: [
{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShipCity",
title: "Ship City"
}
]
});
});
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<button id="show" class="k-button">Show Freight type</button>
<div id="grid"></div>
I am using a Kendo UI grid, which looks like this:
function refreshGrid()
{
$(".k-pager-refresh.k-link").click();
}
var editWindow;
var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
var gridColumns =
[{
width: 90,
command: {
name: "edit",
text: "Edit",
click: function(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
editWindow = $("#edit").kendoWindow({
title: "Edit User",
modal: true,
visible: false,
resizable: false,
width: 800,
height: 400,
content: 'myediturl' + dataItem.ID
});
editWindow.data("kendoWindow").center().open();
return false;
}
}
},
{
width: 90,
command: {
name: "delete",
text: "Delete",
click: function(e) {
//alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
if (confirm("Are you sure you want to delete this user?"))
{
$.ajax({
type: 'POST',
url: '#Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
success: function (param) { refreshGrid(); },
async: false
});
}
return false;
}
}
},
{
field: "FullName",
title: "Full Name",
type: "string"
},
{
field: "Email",
title: "Email",
type: "string"
},
{
field: "LogCreateDate",
title: "Created",
type: "date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
}];
//getSorts the columns of the grid
function getColumns() {
//Parsing the set of columns into a more digestable form
var columns = "";
for (var col in gridColumns) {
if (!!gridColumns[col].field)
{
if (columns.length > 0) {
columns += ";";
}
columns += gridColumns[col].field + "," + gridColumns[col].type;
}
}
return columns;
}
function getSorts(sortObject) {
if (!(sortObject)) {
return "";
}
//Getting the row sort object
var arr = sortObject;
if ((arr) && (arr.length == 0)) {
return "";
}
//Parsing the sort object into a more digestable form
var columnSet = getColumns();
var returnValue = "";
for (var index in arr) {
var type = "";
for (var col in gridColumns) {
if (gridColumns[col].field === arr[index].field) {
type = gridColumns[col].type;
}
}
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
}
return returnValue;
}
var grid;
$(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "mydatasourceurl",
type: "POST",
},
parameterMap: function (data, type) {
data.filters = JSON.stringify(data.filter);
data.columns = JSON.stringify(getColumns());
data.sorts = JSON.stringify(getSorts(data.sort));
console.log(data);
return data;
}
},
schema: {
fields: fields,
data: "Data",
total: "Total"
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
toolbar: [{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}],
height: 392,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: gridColumns
});
grid = $("#grid").data("kendoGrid");
});
My create toolbar action is not triggered on click. How can I resolve this problem, is Kendo UI able to handle toolbar click events? The best solution I came up with looks like this:
$(".k-button.k-button-icontext.k-grid-add").click(function () {
//If the window doesn't exist yet, we create and initialize it
if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
grids[gridContainerID].addWindow.kendoWindow({
title: "Add " + entityName,
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: addUrl
});
}
//Otherwise we just open it
else {
grids[gridContainerID].addWindow.data("kendoWindow").open();
}
//Centralizing and refreshing to prepare the layout
grids[gridContainerID].addWindow.data("kendoWindow").center();
grids[gridContainerID].addWindow.data("kendoWindow").refresh();
return false;
});
Thanks in advance.
Instead of using that complex selector use the one that Kendo UI creates from name:
toolbar: [
{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}
],
and then:
$(".k-grid-Add", "#grid").bind("click", function (ev) {
// your code
alert("Hello");
});
In kendogrid docs here shows that there is no click configuration for grid toolbar buttons like grid.colums.commands.
To solve this problem you can reference following steps:
create a template for toolbar
<script id="grid_toolbar" type="text/x-kendo-template">
<button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>
apply tempate to toolbar
toolbar:[{text:"",template: kendo.template($("#grid_toolbar").html())}]
add event listener to button
$("#grid_toolbar_queryBtn").click(function(e) {
console.log("[DEBUG MESSAGE] ", "query button clicked!");
});