[Solved] Replacing columns widths to css

[Kiran]

Hi, 
I want to move all the grid styling to a separate css. Is there a way to move the column widhts to css [ widht(30)] ?

Thank you 
Kiran

tags :
 column
width
css 
moving
replacing

[Dimo]

Hello Kiran,

Theoretically, table column widths can be set by specifying width styles to the <col> elements:

.t-grid  col
{
      width:400px;
}

However, the problem is that these <col> elements cannot be referenced in the Grid declaration, and it is also hard to manipulate them with cross-browser CSS selectors, e.g. :nth-child(). The only option that will work in all browsers is to add custom CSS classes client-side and define the column widths using these classes. I am not sure this will bring any real benefit to your application, so I advise you to use declarative column widths that will render the width styles to the <col> elements automatically.

Greetings,
Dimo
the Telerik team

[Kiran]

Thank you for the quick response. If I understood this correctly.
If I have code like
  columns.Bound(m => m.Description).Width(250).Title("Description");

the equivalent css would be

.t-grid  Description 
{


      width:400px;

}

Is this right?

Thanks,
Kiran

[Dimo]

Hello Kiran,

No, the CSS code is not an equivalent to the width declaration in the server code, because the CSS selector is invalid. The "Description" work in it is neither a CSS class, nor an ID, so the style will not be applied.

As I said, there is no easy way to set column widths via CSS only.

Greetings,
Dimo
the Telerik team

[Kiran]

Could you be more clear please?

Also, you mentioned declarative column widths in the first reply. What do you meant by that? A more clear concise e.g would help me understand.
I have a mandate to move all UI controllable attributes to css. Only pending is column widths

Thanks
Kiran

[Dimo]

Hello Kiran,

By declarative column widths I mean including the width in the Grid column declaration like this:

columns.Bound(m => m.Description).Width(250).Title("Description");

What I have tried to explain so far is that currently this is the only reasonable way to set column widths and you should not put efforts in using an alternative approach.

All the best,
Dimo
the Telerik team

[Kiran]

Well, I want to at least try the hard way first and see if its viable or not.

As such, I tried placing css for each columns. What I get is only the header column inherits the width and not the data columns.

e.g.  columns.Bound(cds => cds.Id).Title("Id").HtmlAttributes(new { @class = "trn_Id" });

and my css looks like 
.trn_Id 
{
     width :3px;
}


Please let me know.

Thanks

[Dimo]

Hi Kiran,

If Grid scrolling is enabled, you should apply the CSS class in both the HtmlAttributes() and the HeaderHtmlAttributes() fluent methods. This will work, however, it will add a class attribute to every Grid table cell. In case you really want to increase several times the Grid's HTML footprint - feel free to use this approach.

Regards,
Dimo
the Telerik team

[Kiran]

Thanks for the reply. It worked. 

Is there a way to set scroll-able height in css? The HTMLAttributes has not effect on the height. 

From 
.Scrollable(s=>s.Height(400)) 
TO
 .HtmlAttributes(new { @class = "gridcss" })
didn't work.

Please let me know

-Kiran

[Dimo]

Hi Kiran,

You can use:

.t-grid-content
{
       height: .... !important ;
}

The !important clause is required because the element has an inline height style by default (200px), even if you don't set it explicitly.

You can also add the Grid's ID to the above selector.

All the best,
Dimo
the Telerik team

[Mahesh]

Hi  Telerik Team,

I am facing problem that.....
On resizing of one column  (of Telerik mvc grid )  other columns are also resizing  ....How to avoid this.... or else pls tell me how to get width of the column  in the client events of grid or in javascript........
Pls inform me....I am waiting for your reply  


Thanks & Regards,
Mahesh