locked
Grid Helper RRS feed

  • Question

  • User2129316869 posted

    Please when using the grid helper, how can i specify the table head titles beacuse it automatically generates the titles used in the database and it doesnt look good. Thanks

    Monday, May 12, 2014 10:39 AM

Answers

  • User-821857111 posted

    Use the "header" parameter: 

    grid.Column("DatabaseFieldName", header: "Your Custom Column Header")



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 12, 2014 11:06 AM
  • User938738290 posted

    If you're already using a WebGrid, it probably looks something like the following:

    @{   
        var grid = new WebGrid(source: data, 
                               defaultSort: "Name",  
                               rowsPerPage: 3); 
    }
    
    @grid.GetHtml( 
        tableStyle: "grid", 
        headerStyle: "head", 
        alternatingRowStyle: "alt", 
        columns: grid.Columns( 
            grid.Column("Name", "Product", style: "product"), 
            grid.Column("Description", format:@<i>@item.Description</i>), 
            grid.Column("Price", format:@<text>$@item.Price</text>) 
        ) 
    ) 

    Whenever you create a column using "grid.Column()", you can specify the header string.  For example, the first column above is bound to the "name" column in the DB, but will display "Product" in the header.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 12, 2014 11:09 AM

All replies

  • User938738290 posted

    MSDN has resources for the built-in helpers, including the WebGrid helper.  If you look at this page (http://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid.column(v=vs.111).aspx) on the WebGrid.Column() method, you'll see it allows you to specify the string that appears in the header for each column.

    EDIT: Fixed link.

    Monday, May 12, 2014 10:54 AM
  • User2129316869 posted

    Which method exactly would help. Thanks

    Monday, May 12, 2014 11:04 AM
  • User-821857111 posted

    Use the "header" parameter: 

    grid.Column("DatabaseFieldName", header: "Your Custom Column Header")



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 12, 2014 11:06 AM
  • User938738290 posted

    If you're already using a WebGrid, it probably looks something like the following:

    @{   
        var grid = new WebGrid(source: data, 
                               defaultSort: "Name",  
                               rowsPerPage: 3); 
    }
    
    @grid.GetHtml( 
        tableStyle: "grid", 
        headerStyle: "head", 
        alternatingRowStyle: "alt", 
        columns: grid.Columns( 
            grid.Column("Name", "Product", style: "product"), 
            grid.Column("Description", format:@<i>@item.Description</i>), 
            grid.Column("Price", format:@<text>$@item.Price</text>) 
        ) 
    ) 

    Whenever you create a column using "grid.Column()", you can specify the header string.  For example, the first column above is bound to the "name" column in the DB, but will display "Product" in the header.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 12, 2014 11:09 AM
  • User2129316869 posted

    Ok Thanks. What about the width of the columns?

    Monday, May 12, 2014 11:20 AM
  • User-821857111 posted

    You specify that via CSS:

    grid.Column("DatabaseName", "Your Name", style: "myStyle")

    Then in your css file:

    .myStyle{
        width: 200px;
    }

    Here's an article that explores all aspects of the WebGrid: http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid

    Monday, May 12, 2014 11:43 AM