MVC Webgrid with paging and sorting - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

MVC Webgrid with paging and sorting

Introduction: In this article today I am going to explain how to implement the sorting and paging in MVC webgrid

Description:
In the last article I explained
To implement the sorting and paging in Webgrid we have to assign the canSort, canPage and rowsPerPage parameter. In this example I want to display the 2 rows per page.


WebGrid grid = new WebGrid(Model,canSort:true,canPage:true,rowsPerPage:2);

Index.cshtml :-
@model IEnumerable<UserRegistration.Models.User_Registration>

@{
    ViewBag.Title = "Users Detail";
    WebGrid grid = new WebGrid(Model,canSort:true,canPage:true,rowsPerPage:2);
}
<style type="text/css">
table
{
width:100%;
}
th
{
padding: 2px 2px 2px;
}
td
 {
  text-align:center;
}
</style>
<h2>Users Detail</h2>

@grid.GetHtml(
    tableStyle: "table",
    fillEmptyRows: true,    
    headerStyle: "false",  
    footerStyle: "false",
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Previous",
    nextText: "Next >",
    lastText: "Last >>",
   
    columns: new[]
    {
        //the model fields to display
        grid.Column("User_Name","UserName"),
        grid.Column("First_Name","First Name"),
        grid.Column("Last_Name","Last Name"),
        grid.Column(header:"Profile Image", format: @<text><img src="@Url.Content(item.Profile_Image)" alt="Image" height="100px" width="100px" /></text>),
        grid.Column("EmailId","EmailId"),
        grid.Column("Sex","Sex"),
        grid.Column("Master_Qualification.Qualification","Qualification"),
        grid.Column("Master_Country.Country_Name","Country Name"),
        grid.Column("Phone_No","Phone No"),
   }
) 

Build the project and run.

 Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+

1 comments:

Hi
How to pass the data collection from my controller here only client side code have . i need how to pass the value from the server side.can u send me?


EmoticonEmoticon