Second command in row breaks grid

2 posts, 0 answers
  1. Mike
    Mike avatar
    4 posts
    Member since:
    Sep 2013

    Posted 07 Sep 2013 Link to this post

    I have a server bound grid that is working well until I add a second command button to a row. When I do this the formatting is thrown off and a second grid is placed at the bottom of the first. Does anyone recognize the problem?

    @(Html.Kendo().Grid<TimeAndAttendance.Models.DaysActivityViewModel>(Model.DayActivities)
           .Name("DaysActivities")
           .Columns(columns =>
           {
               columns.Bound(da => da.Facility);
               columns.Bound(da => da.Position);
               columns.Bound(da => da.Shift);
               columns.Bound(da => da.Paycode);
               columns.Bound(da => da.Hours);
               columns.Bound(da => da.Notes);
               columns.Command(command => { command.Edit().Text("");  });
           })
           .Scrollable()
           .HtmlAttributes(new { style = "height:200px;" })
           .DataSource(dataSource => dataSource
               .Server()
               .Update(update => update.Action("Edit", "IndividualTimeEntry"))
               .Destroy(destroy => destroy.Action("Delete", "IndividualTimeEntry"))
               .Model(model => model.Id(da => da.ID))
               )
      )
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Sep 2013 Link to this post

    Hi Mike,

    Basically when scrolling is enabled the table-layout is set to fixed. I.e. all columns with no explicit widths become equally wide. In order to avoid the illustrated outcome you could: 

    • Disable scrolling - in this case the table layout will be reverted to "auto" and the browsers will size columns accordingly to their content;
    • Set explicit width to the "Command" column: 
      @(Html.Kendo().Grid(Model) 
        //....
        .Columns(columns => { 
           //....
           columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
        })
      )

    Regards,

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