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

Special autoFit Column for only a fews rows?

9 Answers 493 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Robert Madrian asked on 08 May 2017, 01:26 PM

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

Sort by
0
Georgi
Telerik team
answered on 11 May 2017, 12:53 PM
Hi Robert,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 11 May 2017, 01:00 PM

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

0
Georgi
Telerik team
answered on 16 May 2017, 01:01 PM
Hello 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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 25 May 2017, 03:30 PM

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

0
Georgi
Telerik team
answered on 30 May 2017, 10:46 AM
Hi Robert Madrian,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 31 May 2017, 09:22 AM

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

0
Georgi
Telerik team
answered on 02 Jun 2017, 11:38 AM
Hello 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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
answered on 14 Jun 2017, 12:11 PM

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

0
Accepted
Georgi
Telerik team
answered on 19 Jun 2017, 08:53 AM
Hi 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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Answers by
Georgi
Telerik team
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Share this question
or