JS to Auto-resize Grid Columns to fit text

Jaymer

This uses the default CRM app. - data is from the Customer Tab
I'm sure many of us have a screen like this - the Address column isn't wide enough:

Tip # 1 - This is cool, but not really the biggie.
Did you know you can double-click on the column divider line and Kendo will AUTO-FIT the column data just like Excel and other programs?

Now it should look like this:
[attachment=1]img2.png[/attachment]

HOW WOULD YOU LIKE FOR KENDO TO DO THIS AUTOMATICALLY FOR YOU ON GRIDS?
Tip # 2:
In the CRM example, we can easily change the Query by adding some simple Javascript to the Render Script of the Query.

Copy this text:

var grid = widget;
grid.bind("dataBound", autoS);

function autoS(e) {
grid.autoFitColumn("Address");
grid.autoFitColumn("FirstName");
}

Edit this query in the CRM and paste this text as shown. Then restart the CRM.
See this pic:
[attachment=0]img3.png[/attachment]

I gave you an example of how to AutoFit 2 columns.
If you don't need a 2nd columns, just delete that line.
(And I think there is a way to do it all on 1 line.)

And of course you can do this in your own Query - the name needs to be the exact as the data source name from Aware, not the column heading. Enjoy and have a great week!

—> JaymerTip

ACDC

nice one Jaymer, an excellent discovery HAPPY MONDAY 😃

Jhstephenson

Great find Jaymer.

Now, it would be nice if there was just a checkbox on the Query definition for each column that says AutoFit.

Then we wouldn't have to mess with JavaScript at all.

Jaymer

Cannot agree enough with that statement Jim.
Now you have something to add to the wish list.

karelh

YAY! Thank you. This will already improve it.

johntalbott

Be judicious about auto-fitting.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/autofitcolumn

The method ignores and does not resize hidden columns. Auto-fitting all columns at once is a resource-intensive operation and is not recommended. A better option is to auto-fit only a few columns that have the most variable content in terms of length. Alternatively, disable scrolling and allow the browser to adjust all column widths automatically, according to their content. Use autoFitColumn only after the Grid has been databound. Executing the method immediately after Grid initialization makes no sense and can lead to undesired behavior.

syndeo

Jaymer wrote
This uses the default CRM app. - data is from the Customer Tab
I'm sure many of us have a screen like this - the Address column isn't wide enough:
img1.png

Tip # 1 - This is cool, but not really the biggie.
Did you know you can double-click on the column divider line and Kendo will AUTO-FIT the column data just like Excel and other programs?

Now it should look like this:
img2.png

HOW WOULD YOU LIKE FOR KENDO TO DO THIS AUTOMATICALLY FOR YOU ON GRIDS?
Tip # 2:
In the CRM example, we can easily change the Query by adding some simple Javascript to the Render Script of the Query.

Copy this text:
var grid = widget;
grid.bind("dataBound", autoS);

function autoS(e) {
grid.autoFitColumn("Address");
grid.autoFitColumn("FirstName");
}
Edit this query in the CRM and paste this text as shown. Then restart the CRM.
See this pic:
img3.png

I gave you an example of how to AutoFit 2 columns.
If you don't need a 2nd columns, just delete that line.
(And I think there is a way to do it all on 1 line.)

And of course you can do this in your own Query - the name needs to be the exact as the data source name from Aware, not the column heading. Enjoy and have a great week!

—> JaymerTip

Hi Jaymer,

Any experience with a grid inside a tabstrip? I'm finding that the autofit fires before the grid is populated. I note that I do have it in the render script.

the script does work if the form/query is opened in the default panel, but not within a tab. I've found this on web, but unsure if it is related:

https://www.telerik.com/forums/displaying-grid-within-tab-is-causing-the-grids-scroll-bar-to-appear-and-overflow

syndeo

syndeo wrote
Hi Jaymer,
Any experience with a grid inside a tabstrip? I'm finding that the autofit fires before the grid is populated. I note that I do have it in the render script.

the script does work if the form/query is opened in the default panel, but not within a tab. I've found this on web, but unsure if it is related:

https://www.telerik.com/forums/displaying-grid-within-tab-is-causing-the-grids-scroll-bar-to-appear-and-overflow

Ok so I have worked it out. The smart people in the room may have a better way, but it works.

The issue is when creating a new tab, the render script of a grid is fired before the tab, the grid is contained in is visible. Any styling of the grid, from what I can understand doesn't work until the tab is visible.

Once the tab is visible and if you save the form, the render script of the grid will run as expected. This is because by that time, the tab is visible.

var grid = widget; //get the grid
var gID = grid.element.context.id; //find the id of the grid
var gridElement = document.getElementById(gID); //get the DOM element of the grid

//I've used the closest to find the the class of tabstrip element that the gird is contained in
var closest =gridElement.closest(".k-content");

//change the tab element's display to block,
closest.style.display="block";

//perform the intended function to autofit the columns in the grid
grid.bind("dataBound", autoS);

function autoS(e) {
grid.autoFitColumn("Attribute1");
grid.autoFitColumn("Attribute2");
grid.autoFitColumn("AttributeN");
}

Jaymer

I was trying to do some styling on a scheduler window this week. And even though the code did not throw exceptions in the console, it just wasn’t doing anything.
This may shed some light on that. Thanks.