Disadvantages of using web grids such as jqGrids inside my asp.net mvc views

Question

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. as 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 the 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 ?

Answer 1

First of all you should understand that jqGrid is pure JavaScript solution. So it can't have any direct access to attributes of the data model, but you can use .NET Reflection to get the information and to provide the names to jqGrid. Exactly because jqGrid is pure JavaScript solution it can't have direct access to the metadata. On the other side it provide a lot of customization possibilities which allows to generate all required information on the server side and to return it back to jqGrid.

I see that MVC don't mean that you have to write all your View code in C#. In case of usage jqGrid you need provide an empty <table> with unique id attribute and optionally an empty <div> to the bottom pager. Additionally you have to provide an Action in a Controller which returns the data in JSON format for the grid.

The usage of template property (see the old answer) provides you the possibility to hold colModel simple and more data oriented. I recommend you to read the answer and this one where I explain how beforeProcessing callback, which uses mostly setColProp and setLabel methods, allows to create very flexible grids which model will be returned dynamically from the server. I think it's what you want to implement. Additionally you can find here beta version of addColumn method which allows to add new column to the grid dynamically.

About the validation I can confirm, that jqGrid allows you not so comfortable validation of the client side. Nevertheless the editrules allows to define any custom validation method. Moreover you can use server side validation. The server need just return an exception (set the error text in HTTP body and any HTTP error status code) with the error description. The error will be shown on the top of editing dialog and the user can fix the input data and to try to click "Submit" button once more.

All the described above feature exists not out of the box of cause, but there are some C# solution which are based on jqGrid which can simplify the work. I can mention jqSuite and Lib.Web.Mvc. I personally don't use the products so I can't provide you more details about.

UPDATED: I don't think that jqGrid break MVC architecture. The latest development of ASP.NET MVC was in direction of Web API which fits perfectly to jqGrid. I personally like Web API much more as the pure ASP.NET MVC without it. One can test any Web API very good for example, if it's required in your project. The main architecture of MVC don't have any .NET attributes like DisplayName, Required, Length and so on. It's just the part of implementation only. If I develop a solution then it's not important for me to follow one way, for example Microsoft ASP.NET MVC. I should to choose technology which more corresponds to the task. One can for example to get DisplayName information from the database where one hold the texts in different languages, one can get type, length and Required (NOT NULL) information from the corresponding table of the database too. If you start development from null you can choose Entity Framework model as the origin of the information. The best choice depend from many aspects.

In any way I find dangerous just to follow one way which suggest the manufacture of one product. Some time ago Microsoft pushed ASP.NET Web Forms. I think that one from the reason was the binding of developers to the Visual Studio GUI which generate code for you. I can imagine problems of the developers who wrote a lot of such code before. In the same way one can follow pure Microsoft ASP.NET MVC way and generate a lot of Views. What you will do in case of future migration? On the other side if you invested more in WebMethods written in ASMX which returned pure JSON you could very easy to migrate the code to SVC (ServiceModel) and then to Web API. One can write the View part in HTML with JavaScript and combine different JavaScript "libraries" depend of your requirements. jqGrid is just one component which one can use on the client side. It's the way which I personally prefer, but everybody chose his own way.