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

Control all column widths

4 Answers 170 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gerry
Top achievements
Rank 1
Veteran
Gerry asked on 12 Jun 2017, 08:56 PM

I have several tables that have different numbers of columns, but I want to columns widths of the tables to be the same.

I have achieved this by setting all the columns widths, but with one empty column at the end (without a column width) - see attached image. What is the best way to do this, without having to add any empty columns?

4 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 14 Jun 2017, 02:01 PM
Hi Gerry,

When all columns have pixel widths, if the sum is less than the width of the Grid, the column widths are ignored and and all columns expand.

A workaround in your case is to have at least one column without a specified width, so that it can adjust freely.

You can get more detailed information about column widths in the following article:



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
Gerry
Top achievements
Rank 1
Veteran
answered on 15 Jun 2017, 05:00 PM
Let's say I wanted the (last) variable-with column to be hidden, or less noticeable, is there an easy way to do that?
0
Gerry
Top achievements
Rank 1
Veteran
answered on 15 Jun 2017, 07:11 PM

I have tried 

#mygridid > table /* header + data table */ {
    table-layout: fixed;
}

but that doesn't work - the table is still set to width: 100%. If use the browser dev tools to remove the 100% width it looks like in the attached image.

0
Georgi
Telerik team
answered on 19 Jun 2017, 11:42 AM
Hi Gerry,

It is possible to set the width of the grid element dynamically when it is bound to its data. You simply set the sum of all column widths as the width of the grid in the event handler of dataBound event.

The following dojo is illustrates a situation similar to the one you have:



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
Gerry
Top achievements
Rank 1
Veteran
Answers by
Georgi
Telerik team
Gerry
Top achievements
Rank 1
Veteran
Share this question
or