
Hello,
I know that it is possible to use "autoFitColumn" to size the columns in a scrollable grid but it is slow for many rows - disable Scrolling is not an Option.
Is there a possibility (Javascript) to resize the columns only for the content of the first few (10) rows, so that it is faster?
(loop through the first rows and resize all coumns...)
function
gridDataBound(e) {
var
grid = $(
"#gridEQ"
).data(
"kendoGrid"
);
for
(
var
i = 0; i < grid.columns.length; i++) {
grid.autoFitColumn(i);
}
}
9 Answers, 1 is accepted
I am afraid that such functionality is not available out of the box. In order to use similar feature you would need to implement custom code.
With that said, have in mind that if only some of the rows are resized this would cause the columns to be misaligned.
If you would like more information on column widths for the Grid component you would find the article below interesting.
Regards,
Georgi
Telerik by Progress

Hi Georgi,
Is it possible to set the width of a column of the grid with Javascript i.e in onDatabound event?
I use columns.AutoGenerate(true) and if there are to many columns they are very small so I want to set them to MinWidth...
robert
I am afraid that setting minimum width for table cells is not available out of the box. However, you can achieve it using JavaScript. Setting width to the col elements in the table will get the job done.
With that said, have in mind that you should leave one column without specified width. Otherwise the browser will resize the columns and override the defined settings.
The dojo bellow illustrates the mentioned above approach.
Georgi
Telerik by Progress

Hello Georgi,
Thanks a lot - it works - but is there a possibility to find out which type of column is it (text, number, date)?
I want to set the width different for textcolumns and Integers or Date...
robert
It is possible to set the width according to the datatype of the cell. All the datatypes are accessible in the property grid.options.dataSource.schema.model.fields. Please check out the dojo bellow where I set specific width for columns except for Date type cells.
Regards,
Georgi
Progress Telerik

Hello Georgi,
Might it be possible that this doesn't work in a Grid with columns.AutoGenerate(true)?
<!--Grid-->
@(Html.Kendo().Grid<dynamic>()
.Name(
"gridEQ"
)
.Columns(columns =>
{
columns.AutoGenerate(
true
);
})
.Pageable()
.Sortable()
.Scrollable()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.NoRecords()
.Filterable(f => f.Enabled(
false
))
.AutoBind(
false
)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action(
"Read"
,
"Home"
))
)
)
<!--End Grid-->
I get the following error in the line: var keys = Object.keys(gridEQ.options.dataSource.schema.model.fields);
Error: Object.keys: The argument is not an object
gridEQ.bind(
"dataBound"
,
function
(e) {
var
headerCols = gridEQ.thead.parent().find(
"col"
);
var
keys = Object.keys(gridEQ.options.dataSource.schema.model.fields);
console.log(keys)
for
(
var
i = 0; i < headerCols.length - 1; i++) {
console.log(gridEQ.options.dataSource.schema.model.fields[keys[i]].type);
if
(grid.options.dataSource.schema.model.fields[keys[i]].type ==
'date'
) {
headerCols.eq(i).addClass(
"gridDateCol"
);
}
else
{
headerCols.eq(i).addClass(
"gridDefaultCol"
);
}
}
var
bodyCols = gridEQ.tbody.parent().find(
"col"
);
for
(
var
i = 0; i < bodyCols.length - 1; i++) {
if
(gridEQ.options.dataSource.schema.model.fields[keys[i]].type ==
'date'
) {
bodyCols.eq(i).addClass(
"gridDateCol"
);
}
else
{
bodyCols.eq(i).addClass(
"gridDefaultCol"
);
}
}
});
regards robert
When using the ASP.NET Core wrappers the schema of the Kendo Grid is created automatically. If you open DevTools in your browser, you can inspect the grid object and check if there is such an object. The following screenshot illustrates the schema of a grid with auto-generated columns and the property grid.options.dataSource.schema.model.fields is an object.
Regards,
Georgi
Progress Telerik

Hi,
it seems that the list of fields is not availible of the grid is used with @(Html.Kendo().Grid<dynamic>()
and columns.AutoGenerate(true)
see Picture...
robert
Unfortunately when you use dynamic the fields have no type. So in order to check for the type you will have to implement custom logic.
If using dynamic is not a must I suggest you to create model and use it in order to set types of the columns and exploit approach from the previous answer.
Regards,
Georgi
Progress Telerik