Show DataItem Property as Command Button Text
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | 2018.2.516 |
Description
How can I add a column with custom command buttons in which the text corresponds to a property of the row DataItem?
Solution
- Add a custom command column.
- Go through every row during the
dataBound
event to change its custom command text.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<div id="details"></div>
<script>
var wnd,
detailsTemplate;
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
dataBound: onDataBound,
columns: [{
field: "FirstName",
title: "First Name",
width: "140px"
},
{
field: "LastName",
title: "Last Name",
width: "140px"
},
{
field: "Title"
},
{
command: {
text: "",
click: showDetails,
name: "command"
},
title: " ",
width: "180px"
}
]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function onDataBound(e) {
var data = this.dataSource.view();
for (var i = 0; i < data.length; i++) {
var uid = data[i].uid;
var row = this.table.find("tr[data-uid='" + uid + "']");
if (data[i].LastName) {
row.find(".k-command-cell").contents().last()[0].textContent = data[i].LastName;
} else {
row.find(".k-command-cell").contents().hide();
}
}
}
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
<style type="text/css">
#details-container {
padding: 10px;
}
#details-container h2 {
margin: 0;
}
#details-container em {
color: #8c8c8c;
}
#details-container dt {
margin: 0;
display: inline;
}
</style>
</div>