This is a migrated thread and some comments may be shown as answers.

Second command in row breaks grid

1 Answer 2 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 08 Sep 2013, 03:31 AM

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

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 09 Sep 2013, 03:37 PM
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!
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or