Grid Layout in MVC

Question

I have a requirement to display data in a grid format in MVC web application. The grid or table showing the data should have below listed features:

Grid or Html table with sorting and custom paging logic
Data in tabular format should be displayed using Bootsrap css so that in a mobile view, data from each column should be wrapped down instead of having a horizontal scroll bar to see all column details
Ability to enable/disable sorting for required columns
Nice styling for paging links
Able to provide an option for page size (like 10, 50, 100, 200 in a drop-down)
No third-party components are allowed
No client-side plugins allowed ( like jquery DataTable )

The environment restricts the usage of client-side libraries so majority of the work should be done on server-side. This has to be achieved using a minimal javascript code if required.

Can anyone help on this with an example?

Your support is highly appreciated.

Sri Ram · Answer

Thanks a lot everyone for all of your responses. As of now we use bootstrap css and jquery library to bring-in the responsive design for all screens as much as possible. Client doesn't like to use much of client-side libraries or don't want to depend on them since the users might be using older versions of browsers and also its a restricted environment. Client will approve any components from Microsoft or custom logic with full server-side support. This requirement is for building an enterprise level application so much of the work should be done on server-side as per client. Hence we can't use external packages like pagedlist.mvc grid.mvc angular/knockout libraries etc. In this regard it looks like this could be possible using the custom logic and bootstrap css. If anyone has a good reference or solution considering all these things please let me know. It would be very much helpful for our team.

Thiruppathi R · Answer

Refer the below URLs https://github.com/prmces/Grid.Mvc.Redux.IdeaMatrix http://gridmvc.codeplex.com/ https://github.com/prmces/Grid.Mvc.Ajax.IdeaMatrix http://grid.tesseris.com/

Thiruppathi R · Answer

Without client side libraries we can't achive the responable UI.But anyway my suggestion better you can try angular table or angular UI Grid...

Sri Ram · Answer

Hi Manikandan thanks for your response. The link you have referenced points to Grid.MVC external package which can't be considered in our scenario. Anything from Microsoft or custom code would be approved to include in the solution.

Sri Ram · Answer

Hi Sundar thanks for your response. The link you have referenced points to pagedList.MVC external package which can't be considered in our scenario.

Manikandan Murugesan · Answer

Refer this article : http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-grid-in-mvc-using-grid-mvc/

Sundar · Answer

Follow this link this will help you thanks in advance http://www.c-sharpcorner.com/UploadFile/4b0136/perform-paging-searching-sorting-in-Asp-Net-mvc-5/