how to align detailTemplate button on the far right

2 posts, 0 answers
  1. Kalli Kaldi
    Kalli Kaldi avatar
    30 posts
    Member since:
    Oct 2011

    Posted 10 May 2016 Link to this post

    hello

    I´m wondering how I make the detail template button appear on the far right in each row instead of it displaying on the left

    best regards from Iceland

     

  2. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 12 May 2016 Link to this post

    Hello Kalli,

    The task can be divided into two parts:

    1) use a custom expand/collapse button(s) in a column template on the right side of the Grid. The button(s) should rely on the Grid public API for expanding and collapsing master rows. You can use built-in Kendo UI icons if you like.

    column template
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template
     
    expandRow
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-expandRow
     
    collapseRow
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-collapseRow

    icons
    http://demos.telerik.com/kendo-ui/styling/icons

    2) hide the native expand/collapse buttons by shrinking the expand/collapse column to zero width.

     
    .k-grid .k-hierarchy-col,
    .k-grid .k-hierarchy-cell {
      width: 0;
      overflow: hidden;
    }


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top