Toggle Content of Cell on Click
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I toggle the cell content of a Grid between two different properties of the DataItem just by clicking the cell?
Solution
Use such a Kendo UI template for the cell that it shows different properties depending on the value of a Boolean field. When clicked, the provided value gets changed and the template will update automatically.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: {
type: "string"
},
UnitPrice: {
type: "number"
},
UnitsInStock: {
type: "number"
},
Discontinued: {
type: "boolean"
},
QuantityPerUnit: {
type: "string"
}
}
},
parse: function(response) {
var products = [];
for (var i = 0; i < response.length; i++) {
var product = {
ProductName: response[i].ProductName,
UnitPrice: response[i].UnitPrice,
UnitsInStock: response[i].UnitsInStock,
Discontinued: false,
QuantityPerUnit: response[i].QuantityPerUnit
};
products.push(product);
}
return products;
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [{
field: "ProductName",
template: "<div onclick='cellClick(this)'><a>#if(Discontinued){# - <b>Quantity per unit:</b> #: QuantityPerUnit # #}else{# #: ProductName # #}#</a></div>",
title: "<b>Product Name</b> (Click to see quantity per unit)"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "230px"
},
{
field: "UnitsInStock",
title: "Units In Stock",
width: "230px"
},
{
field: "Discontinued",
hidden: true
},
{
field: "QuantityPerUnit",
hidden: true
}
]
});
});
//We use the discontinued variable to Toggle between properties in cell
function cellClick(e) {
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem($(e).closest("tr"));
if (dataItem.Discontinued) {
dataItem.set("Discontinued", false);
} else {
dataItem.set("Discontinued", true);
}
}
</script>
</div>