How to change the icon of detail row indicator in kendogrid

6 posts, 0 answers
  1. Arathi
    Arathi avatar
    4 posts
    Member since:
    Sep 2014

    Posted 01 Oct 2014 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8418 posts

    Posted 02 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Bharadwaja
    Bharadwaja avatar
    1 posts
    Member since:
    Feb 2017

    Posted 27 Feb 2017 in reply to Dimo Link to this post

    Please provide an example.
  4. Dimo
    Admin
    Dimo avatar
    8418 posts

    Posted 28 Feb 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Alan
    Alan avatar
    34 posts
    Member since:
    Jan 2011

    Posted 09 Apr in reply to Dimo Link to this post

    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

  6. Dimo
    Admin
    Dimo avatar
    8418 posts

    Posted 10 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top