Second command in row breaks grid

[Mike]

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))
           )
  )

[Iliana Dyankova]

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