Grid Columns Jumping on resize

2 posts, 0 answers
  1. Justin
    Justin avatar
    12 posts
    Member since:
    Feb 2015

    Posted 01 Sep 2015 Link to this post

    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")
                          )
                )
  2. Dimo
    Admin
    Dimo avatar
    8449 posts

    Posted 03 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top