JS to Auto-resize Grid Columns to fit text

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

JS to Auto-resize Grid Columns to fit text

Post by 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:
The attachment img1.png is no longer available
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:
The attachment img2.png is no longer available
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:

Code: Select all

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:
img1.png
img1.png (180.24 KiB) Viewed 9066 times
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
Last edited by Jaymer on Tue Oct 29, 2019 11:19 pm, edited 2 times in total.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
ACDC
Posts: 1138
Joined: Sat Jun 30, 2007 5:03 pm
Location: California, USA

Re: OMG! Happy Monday. THIS will blow your mind ! ! !

Post by ACDC »

nice one Jaymer, an excellent discovery HAPPY MONDAY :D
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: OMG! Happy Monday. THIS will blow your mind ! ! !

Post by 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
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: OMG! Happy Monday. THIS will blow your mind ! ! !

Post by Jaymer »

Cannot agree enough with that statement Jim.
Now you have something to add to the wish list.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
karelh
Posts: 86
Joined: Wed Oct 26, 2016 10:20 pm

Re: OMG! Happy Monday. THIS will blow your mind ! ! !

Post by karelh »

YAY! Thank you. This will already improve it.
johntalbott
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: OMG! Happy Monday. THIS will blow your mind ! ! !

Post by johntalbott »

Be judicious about auto-fitting.

https://docs.telerik.com/kendo-ui/api/j ... ofitcolumn

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.
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
syndeo
Posts: 10
Joined: Mon Jun 07, 2021 1:43 am

Re: JS to Auto-resize Grid Columns to fit text

Post by syndeo »

Jaymer wrote: Mon Sep 23, 2019 4:28 am 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:

Code: Select all

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/displayi ... d-overflow
syndeo
Posts: 10
Joined: Mon Jun 07, 2021 1:43 am

Re: JS to Auto-resize Grid Columns to fit text

Post by syndeo »

syndeo wrote: Sun Jan 21, 2024 12:52 am 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/displayi ... d-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.

Code: Select all

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
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: JS to Auto-resize Grid Columns to fit text

Post by 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.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Post Reply