Exemplary configuration:
@(Html.Kendo().Grid<MyApp.Models.SampleTable>()
.Name("grid")
.ColumnMenu()
.Scrollable(s => s.Enabled(true).Height("auto"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.PrimaryKey))
.Read(read => read.Action("Read", "Home"))
.Sort(sort => sort.Add("ColumnDate").Descending())
)
.Resizable(resize => resize.Columns(true))
.Columns(columns =>
{
columns.Select().Width(60);
columns.Group(group => group
.HeaderTemplate(@<text><a class='k-link myHeaderTemplate' href=''>@ViewBag.MyHeaderTitle</a></text>)
.Columns(c =>
{
c.Bound(x => x.Field1).Width("10%");
c.Bound(x => x.Field2).Width("15%");
})
);
columns.Bound(c => c.Field3)
.Filterable(ftb => ftb.Operators(op => op.ForString(str => str.Clear().Contains("Contains"))));
columns.Bound(c => c.Field4);
columns.Bound(c => c.Field5).Hidden(true).Format("{0:dd-MM-yyyy hh:mm:ss tt}").Filterable(f => f.UI("dateFilter").Cell(cell=>cell.ShowOperators(false)));
columns.Bound(c => c.Field5).HtmlAttributes(new {style="text-align:right" })
.Filterable(f=> f.Cell(c=>c.Template("intFilter")))
.HeaderHtmlAttributes(new { style="text-align:right" });
columns.Bound(c => c.Field6).Filterable( f=>f.Cell(cell=>cell.ShowOperators(false).Operator("contains")));
columns.Bound(c => c.Field7);
columns.Bound(c => c.Field8);
})
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.PersistSelection()
.Pageable(pager => pager
.PageSizes(new int[] { 10, 20, 30 })
)
.Sortable()
.Filterable()
.Editable(e => e.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false))
.Excel(excel => excel
.FileName("Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
)
For a sample project, contact Ivan Danchev or Georgi Yankov.
If one of the columns (e.g. Field6) has a long header title calling the autoFitColumn and passing the column to it does not properly resize the column. The column remains narrow and its header text remains cut off.
Similarly, the method does not have the expected effect on columns with shorter text in the header, i.e. they remain wide instead of shrinking to the text length.
Incorrect column resizing.
Correct column resizing.