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: 1828
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:
img1.png
img1.png (180.24 KiB) Viewed 3999 times
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
img2.png (144.97 KiB) Viewed 3999 times
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
img3.png (125.26 KiB) Viewed 3999 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: 973
Joined: Sat Jun 30, 2007 5:03 pm

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

Post by ACDC »

nice one Jaymer, an excellent discovery HAPPY MONDAY :D
Jhstephenson
Posts: 180
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: 1828
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: 68
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: 586
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, NE

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.

Services:
-Web/Mobile App Design/Development
-Project Management - Agile, Scrum, Kanban
-Business Analysis
-Testing
Post Reply