How to change the icon of detail row indicator in kendogrid

[Arathi]

Hi All,

By default the kendoGrid detailRow indicator is shown as arrow in kendoGrid. Can any one help how to change the icon to plus/minus instead od showing default arrows?

Arathi

[Dimo]

Hello Arathi,

The default Grid expand/collapse icons can be changed by applying custom background styles to the following CSS classes:

k-minus
k-plus

Don't forget to reset the background-position styles, which are currently configured in accordance with the Kendo UI theme sprite.

Regards,
Dimo
Telerik

 

 

[Bharadwaja]

Please provide an example.

[Dimo]

Hi Bharadwaja,

Please inspect the following demo.

http://dojo.telerik.com/ihoJI

If needed, I can recommend the following resources on CSS selectors and specificity.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Regards,
Dimo
Telerik by Progress

[Alan]

Using this dojo as a starter http://dojo.telerik.com/ihoJI

Is it possible to add a 2nd clickable icon in the same detail row indicator's area. In the UX designers layout they want a pencil icon when clicked which would launch a edit modal?

Hoping for the best.

Thanks

[Dimo]

Hello Alan,

The hierarchy expand/collapse column is generated automatically by the Grid, so it is not present in the columns configuration array and does not have a declarative template.

In order to inject additional content in this column, you will need to use the Grid's dataBound event and programmatic DOM manupulation. This is a little more complex than necessary for such a simple goal, so what I would do in your shoes, is to add one more adjacent column like this:

http://dojo.telerik.com/OjEhegOc

This is the column declaration:

{
  template: "<button class='myCustomButton k-button k-button-icon k-bare'><span class='k-icon k-i-pencil'></span></button>",
  width: 40
}

This is the click handler, which is attached after Grid initialization:

var grid = $("#grid").data("kendoGrid");
grid.tbody.on("click", ".myCustomButton", function(args) {
  var EmployeeID = grid.dataItem(args.target.closest("tr")).get("EmployeeID");
  alert("Custom button clicked, EmployeeID: " + EmployeeID);
});

Regards,
Dimo
Progress Telerik