Render Command Buttons on a Single Line

3 posts, 0 answers
  1. Anthony
    Anthony avatar
    5 posts
    Member since:
    Mar 2015

    Posted 20 Apr 2015 Link to this post

    How do I prevent the command buttons from wrapping in the command column on each of the grid rows? I want them to render in a straight, horizontal line even if they extend past the edge of the grid.

     like this:

    + ---------------------------------------------------------+
    |  column 1 | ... | column n | [btn1] [btn2] [btn3] [btn4] |
    + ---------------------------------------------------------+

    instead of:

    + -------------------------------------------+
    | column 1 | ... | column n | [btn1] [btn2]  |
    |          |     |          | [btn3] [btn4]  |
    + -------------------------------------------+

  2. Anthony
    Anthony avatar
    5 posts
    Member since:
    Mar 2015

    Posted 21 Apr 2015 in reply to Anthony Link to this post

    bump
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 22 Apr 2015 Link to this post

    Hi Anthony,

    In order to ensure the buttons won't wrap I would suggest to set column width equal to or greater than the sum of all button widths and make the grid scrollable. For example: 
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()   
      .Name("Grid")
      .Columns(columns => {
         columns.Bound(e => e.FirstName).Width(800);
         columns.Bound(e => e.LastName).Width(700);
         columns.Bound(e => e.Title);
         columns.Command(command => {
             command.Custom("ViewDetails");
             command.Custom("ViewDetails");
             command.Custom("ViewDetails");
             command.Custom("ViewDetails");
          }).Width(500);
        })   
      .Scrollable()
      //....
    )


    Regards,
    Iliana Nikolova
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top