Expand/Collapse Detail with Custom Button

2 posts, 1 answers
  1. Michael
    Michael avatar
    19 posts
    Member since:
    Dec 2011

    Posted 26 Jan 2017 Link to this post

    my requirement is to have a custom button on each data row.

    When a user clicks the button the detail row expands for that specific row only.

    I am able to expand and collapse using the button, but its doing it for the entire grid. 

    What do i need to do to keep it to the current(selected) row.

    command.Custom("View Classes").Click("showClasses");

    function showClasses(e)

    {

        var grid = $("#Grid").data("kendoGrid");

          if ("tr.k-state-selected")

               {
                   var $link = grid.tbody.find("td.k-hierarchy-cell .k-icon");
                    $link.click();
                }

    }

  2. Answer
    Eyup
    Admin
    Eyup avatar
    4075 posts

    Posted 30 Jan 2017 Link to this post

    Hi Michael,

    Your current selector gets all of the expand/collapse icons and simulates click to all of them. Instead, you will need to call this only for the corresponding row element:
    function showClasses(args) {
        var row = $(args.target).parents("tr").first();
        var icon = row.find(".k-hierarchy-cell>a.k-icon");
        icon.click();
    }

    If you will remove the built-in button column, you can also achieve this requirement using the expandRow and collapseRow methods accordingly:
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-expandRow

    I hope this will prove helpful.

    Regards,
    Eyup
    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.
Back to Top