Custom design using webgrid

Question

I need to show records some thing like thing. Please check the Image give below. I need to show the records in webgrid.

@{ 
  MalayaleeTech.Models.NewLIst newsL = new MalayaleeTech.Models.NewLIst(); 
} 
@{ 
  var grid = new WebGrid(Model.News, canPage: true, rowsPerPage: 10, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
  grid.Pager(WebGridPagerModes.NextPrevious); 
} 



@grid.GetHtml(tableStyle: "webGrid",
                                    headerStyle: "header",
                                    mode: WebGridPagerModes.All,
                                    numericLinksCount: 10,
                                    firstText: "<<",
                                    previousText: "<",
                                    nextText: ">",
                                    lastText: ">>",
                                    displayHeader:false,
                                    footerStyle: "webgrid-footer",
                                    columns: grid.Columns(
                                    grid.Column("NewsID", "News ID", style: "gridrow"),
                                    grid.Column("NewsHeader", "News Header", style: "gridrow")

                             ))   

Answer 1

My initial response is that actually, you DON'T want to use a WebGrid for the scenario outlined in your image. The WebGrid renders an HTML table which is designed for the display of tabular data - columns and rows (which is why the WebGrid includes column sorting features).

However, you can pass any HTML template to the format parameter of the WebGrid column. So this could provide a starting point for you:

var grid = new WebGrid(Model.News)
@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("", "SPORTS", format: @<div>
                                     <h1>@item.Headline</h1>
                                     <div class="block">
                                         <img src="@item.Image" />
                                     </div>
                                     <div class="block">@item.Text</div>
                                 </div>)))

You will need to change the property names to match those of your model and you will also need to apply some CSS to style this correctly - I recommend using display:inline-block for the block CSS class.

If you decide not to use the Webgrid for this but still want to be able to use paging, I have written an article about how to do that. It's for Web Pages, but it still uses the Razor syntax: http://www.mikesdotnetting.com/Article/150/Web-Pages-Efficient-Paging-Without-The-WebGrid