Grid Columns Jumping on resize

[Justin]

I'm having an issue with grids when I re-size the columns. If my grids have 4 or fewer columns they jump to a much larger size when you try to re-size them. This also causes the grid before them to shrink. I'm wondering if this is a column width issue or something I might be missing.

 @(Html.Kendo().Grid<DST.DTOs.CoreDTO.ClassificationTypeViewModel>()
                      .Name("ClassificationTypeGrid")
                      .ToolBar(toolBar => toolBar.Template("<a class='btn btn-primary' title='Create New' onclick='classCreateItem()' href='#'>Create Classification Type</a>"))
                      .HtmlAttributes(new { style = "height:90%" })
                      .Columns(columns =>
                      {
                          columns.Bound(p => p.Id)
                              .Width(20)
                              .Filterable(false)
                              .Sortable(false)
                              .Title("Actions")
                              .IncludeInMenu(false)
                              .ClientTemplate("<a href=\"javascript: void(0);\" onclick=\"classEditItem('#: Id #');\" title=\"Edit\"><i class=\"fa fa-pencil-square-o fa-lg\"></i>     <span class=\"sr-only\"></span></a>" +
                                              " " +
                                              "# if (timesUsed == 0) { #" +
                                              "<a href=\"javascript: void(0);\" onclick=\"confirmDeleteType('#: Id #'" + "," + "'#: Title #');\" title=\"Delete\"><i class=\"fa fa-trash-o fa-lg\"></i><span class=\"sr-only\"></span></a>" +
                                              "# } else if (timesUsed > 0) { #" +
                                              "<i class=\"fa fa-trash-o fa-lg\" title=\"Classification Type is assigned to a group\"></i>" +
                                              "# } #");
                          columns.Bound(p => p.Title)
                              .Width(100)
                              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                          columns.Bound(p => p.ProtectionLevel)
                              .Width(100)
                              .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                      })
                      .Pageable(page => page
                          .Refresh(true)
                          .PageSizes(true))
                      .Sortable(sort => sort
                          .SortMode(GridSortMode.MultipleColumn))
                      .Scrollable(o => o.Height("100%"))
                      .Filterable(filter => filter.Mode(GridFilterMode.Row))
                      .ColumnMenu()
                      .Resizable(resizable => resizable.Columns(true))
                      .DataSource(data => data
                          .Ajax()
                          .Read("GetClassifications", "Classifications")
                      )
            )

[Dimo]

Hello Justin,

The observed jumping is caused by incorrect configuration. The set column widths are too small and the browser ignores them, but the widget is not aware of that. Please check the related documentation.

http://docs.telerik.com/kendo-ui/web/grid/appearance#column-widths

Regards,
Dimo
Telerik

[durby]

just add a dummy column with a width of 100%

 

 var inlineOptions = {
        dataSource: { batch: false },
        editable: { mode: "inline", createAt: createAt },
        columns: Columns.concat([{ title: "&nbsp;", width: "100%" }]),
        toolbar: ["create"]  
    };