[RESOLVED]Pros and cons of using Web grids inside asp.net vmc web applications

In my previous asp.net mvc web projects, I use to manually do column sorting, filtering , search , etc.

But now I read about available web grids plugins, such as jqGrid, jtable, etc. and it can save me a lot of time to deliver sort, filter, paging features. But I have a couple of questions about using these web grids inside asp.net mvc views, as it seems that
I will lose important asp.net mvc features when using these web grids.

  • For example when building a jqgrid, i will be writing something such as the following inside my razor view:-
    <script type="text/javascript">
        jQuery("#jQGridDemo").jqGrid({
            url: '',
            datatype: "json",
            colNames: ['Id','First Name', 'Last Name', 'Last 4 SSN', 'Department', 
                    'Age', 'Salary',  "Address",'Marital Status'],
            colModel: [
            { name: '_id', index: '_id', width: 20, stype: 'text' },
            { name: 'FirstName', index: 'FirstName', width: 150 },
            { name: 'LastName', index: 'LastName', width: 150 },
               { name: 'LastSSN', index: 'LastSSN', width: 100 },
            { name: 'Department', index: 'Department', width: 80, align: "right" },
            { name: 'Age', index: 'Salary', width: 80, align: "right" },
            { name: 'Salary', index: 'Salary', width: 80, align: "right" },
            { name: 'Address', index: 'Address', width: 150, sortable: false },
            { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
          ],
            rowNum: 10,
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption: "List Employee Details"
        });
    </script>

So in this case i am manually writing the column names such as “FirstName”, “LastName” , etc , instead of relying on html templeted helpers such as Html.DisplayFor(modelitem=>modelitem.FirstName) . so I will lose the benefits of having strongly typed views.
also the generated field names and their values will not be based on what has been defined inside the data annotation such as [DisplayName("First Name")] . So does this mean if I use jqGrid or other web grids, i will lose the effect of any data annotations
such as DisplayName, since I will be manually writing the field names on each view ?.

  • Also all the examples which i read about jqGrid pass json to the Grid. So does jqGrid accept Model objects passed from action methods to view or it only work with json ?

  • Now when I create a new item inside the jqGrid, I will do this inside a jquery dialog and not inside normal view.so this means that the Data annotation used for validation which I define inside my model class such as [Required], [Length] will not have any
    effect inside the jquery dialogs , is this correct ?. Because from my current experience with jquery dialogs they will ignore DataAnnotation defined inside the Model class, also if I add error inside ModelState provided by asp.net mvc , then I will not be
    able to show the modelstate errors inside the dialog if an exception occurred in the Post Create action method , ?

Can anyone advice on these points and if they are valid when using web grids with asp.net mvc ?

There is a MVC webgrid that enables you to use the MVC style of helpers

WebGrid in ASP.NET
MVC4

pprasannak

There is a MVC webgrid that enables you to use the MVC style of helpers

WebGrid in ASP.NET
MVC4

thanks for the reply. but can i know if you have use it before and how did you find it compared to other grids such as jqGrid, SlickGrid.

Second question. is there other MVC-based grids which i can use?

Thanks a lot for the help…

johnjohn123123

but can i know if you have use it before and how did you find it compared to other grids such as jqGrid,

SlickGrid

I used MVC WebGrid and JqGrid. It all depends on what functionality you are looking. If you need a simple grid with basic functionality like sorting, paging then go for webgrid. Is there a specific functionality you are looking in JqGrid

johnjohn123123

is there other MVC-based grids which i can use?

I really like DataTables, it has so many functionalities. There is also an MVC extension for this. Please take a look at their website

DataTables | Table plug-in for jQuery

Strongly typed datatable example

first thanks a lot for your help.

pprasannak

It all depends on what functionality you are looking. If you need a simple grid with basic functionality like sorting, paging then go for webgrid. Is there a specific functionality you are looking in JqGrid

I mainly want these main features; paging, column based sort, column based filter, search , export to csv files and ability for the grid to work with model objects in-addition to json. an optional feature is column based edit .

pprasannak

I really like DataTables, it has so many functionalities. There is also an MVC extension for this. Please take a look at their website

for sure i will read these links, but if i am not wrong , jqGrid does not have an mvc extension , is this correct?

I checked the strongly typed datatable on this link
http://mvcjquerydatatables.apphb.com/
, and the controller will be as follow:-

public class SomeController : Controller 
{
    ...
    public DataTablesResult<UserView> GetUsers(DataTablesParam dataTableParam)
    {
        IQueryable<User> users = ... //take a queryable from your database...
        var userViews = users.Select(u => new UserView(u)); //...transform it into a view object ...
        return DataTablesResult.Create(userViews, dataTableParam)  //...and return a DataTablesResult
    }
}

so if i am not wrong i will be sending all the objects from the database to the client and then do paging and filtering on the client side ? as in the above code they are not passing any paging and filtering info ? can you advice if dataTables supports server
side paging and filtering ?

Thanks

johnjohn123123

can you advice if dataTables supports server side paging and filtering ?

Server-side processing in DataTables

How to Create Server-Side Paging for DataTables.Net with ASP.Net

Glad to see the last comment use the word "Server Side" turns out there are a number of client side grids too…. in particular DataTables.NET which is as simple and functional as they get.  It allows you to either bind directly to it via Javascript and
JSON objects, or you can use MVC model binding to create the well-formed table and write the proper javascript so it’s recognized by DataTables.js

Leave a Reply