If you have worked with MVC3 and Razor view engine then you may be aware that when will you create new view for details on bases of IEnumerable Model then it
it will create cshtml code with foreach loop which will cause to render data in Grid Format as per shown in below fig.
Now if you want Paging and sorting to this data then manually you need to make lots of efforts to achieve desired result.
But Microsoft has already built very good helpers called WebGrid, to achieve this so you do not need to do that manually.
So it will look like as per below after replacing above code.
If you notice URL in above fig then you can see that it WebGrid will automatically make sorting request with proper parameter you can also change parameter
name to customize URL,e.g.
var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 2,sortFieldName:"S", sortDirectionFieldName:"SD");
Look at
it will create cshtml code with foreach loop which will cause to render data in Grid Format as per shown in below fig.
Now if you want Paging and sorting to this data then manually you need to make lots of efforts to achieve desired result.
But Microsoft has already built very good helpers called WebGrid, to achieve this so you do not need to do that manually.
So it will look like as per below after replacing above code.
If you notice URL in above fig then you can see that it WebGrid will automatically make sorting request with proper parameter you can also change parameter
name to customize URL,e.g.
var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 2,sortFieldName:"S", sortDirectionFieldName:"SD");
You can apply style to particular column by style: attribute. http://stackoverflow.com/questions/9357786/apply-specific-width-in-column-of-webgrid-in-mvc3
Look at
- Complete List of Properties
- Apply styles and customize WebGrid
- Details of Webgrid's Properties and how it works
- Inside WebGrid
No comments:
Post a Comment