Giving format to a single column on WebGrid MVC 3

Question

I have an stored procedure from my DB and I transform it into a WebGrid in my Web application. The problem is that, since the columns I got from the stored procedure are dynamic (it means I don't how many columns are and each one's name) I don't specify the columns variable in grid.GetHtml() function, I have something like this:

@grid.GetHtml(fillEmptyRows: false,
        tableStyle: "table table-hover",
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: "< Back",
        nextText: "Next >",
        lastText: "Last >>"
        )

And that's it!

So, the question is, How can I give style to just one column?, for example I know that at least one column is "Name" and I want it to have "width:100px" Because if I just specify one column it will show just that column! Please I hope you guys can help me. Thanks in advance.

Answer 1

You can do this using Javascript -- I'm not sure if there's a way to do it using strictly the WebGrid / CSS.

First, make the WebGrid table render with a client ID so that you can target it:

 @grid.GetHtml(
     // code here
     htmlAttributes: new { id = "mygrid" }
 )

Now add the styles using JQuery with the :contains selector:

<script>
    // select the column named "Name" and update its width
    var idx = $("#mygrid th:contains('Name')").attr("width", 100);
</script>