Css – Set webgerid column width in MVC3

asp.net-mvcasp.net-mvc-3css

I Have define one WebGrid Control and I want to set column width hence i set the column width in following way

Grid.Column("Details", canSort: false, format: (item) =>
Html.ActionLink("Details", "Details", new { id =
item.CompetitiveExam.CompetitiveExamId }),style:"details")

and my css class is like…

.details{ width:100px; }

this above code properly working but I dont want use separate css class.

and im also trying in following code using embeded css but it dont work…..

Grid.Column("Details", canSort: false, format: (item) =>
Html.ActionLink("Details", "Details", new { id =
item.CompetitiveExam.CompetitiveExamId }),style:"width:100px")

please any one can help me…………..

Best Answer

The parameter name "style" was an unfortunate choice. It is only used for the class name and not for inline style declarations.

Option 1.

If you really want to change your column width without css, there is another override for Html.ActionLink that takes htmlAttributes as a fourth parameter. It will render out these attributes on every row, so it's not the most efficient, but it works.

new { style = "display:inline-block; width:100px;" }

Here's the full line

Grid.Column("Details", 
            canSort: false, 
            format: (item) => Html.ActionLink("Details", 
                        "Details", 
                        new { id = item.CompetitiveExam.CompetitiveExamId }, 
                        new { style = "display:inline-block; width:100px;" }
                    )
           )


Option 2.

For the more general case where you want any column type to contain formatting, just include wrapper html with the desired formatting. Again though, this makes your document larger than it needs to be:

format: ((item) => new MvcHtmlString("<div style='width:100px;'>" + 
                   "your content here" + 
                   "</div>"))
Related Topic