New to Kendo UI for jQuery? Start a free 30-day trial
Update and Add Text to the Expand and Collapse Icons in the Hierarchy Grid
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I change the Expand and Collapse icons in the Kendo UI for jQuery Hierarchy Grid and add text to the icons?
Solution
To achieve the desired scenario:
- Update the Expand and Collapse icons by using the following CSS rules. For the full list of the Kendo UI Web Font Icons, refer to the list of Font icons.
html
<style>
.k-i-expand:before {
content: "\e11e";
}
.k-i-collapse:before {
content: "\e121";
}
</style>- To add text to the icons, write custom logic in the
dataBound,detailExpand, anddetailCollapseevent handlers.
The following example demonstrates the full implementation of the suggested approach.
<div id="grid"></div>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: "https://demos.telerik.com/service/v2/odata/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.tbody.find('.k-hierarchy-cell').each(function(_,x){
x= $(x);
x.prepend("<span class='expand'>Expand</span>")
});
},
detailExpand: function(e) {
this.tbody.find('.expand').each(function(_,x){
x= $(x);
x.text("Collapse");
x.removeClass("expand").addClass("collapse");
});
},
detailCollapse: function(e) {
this.tbody.find('.collapse').each(function(_,x){
x= $(x);
x.text("Expand");
x.removeClass("collapse").addClass("expand");
});
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title",
width: "110px",
}
]
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: "https://demos.telerik.com/service/v2/odata/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "110px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address", width: "110px" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
<style>
/* Update Expand icon */
.k-i-expand:before {
content: "\e11e";
}
/* Update Collapse icon */
.k-i-collapse:before {
content: "\e121";
}
/* Set a width for the hierarchy column, otherwise the column you swap it with will be shrunk. */
.k-grid .k-hierarchy-col {
width: 60px;
}
/* Set inline display to the icon to have the text and the icon on the same line */
.k-grid .k-hierarchy-cell>.k-icon{
display: inline;
}
</style>