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>