Available web grids for my new asp.net mvc 5 web application which allow; paging, column level filter & sort, export to excel, multiple delete.

I want to start a new Asp.net mvc5 web application. On my previous projects I use to implement the following manually:-

-        Column level sort

-        Column level filter.

-        Export to excel.

While I use the PagedList.Mvc for doing the paging.

Now I am looking for a package that can do the following , with minimal code:-

  1. Paging (using ajax)
  2. Column level sorting(ajax).
  3. Column level filter (ajax).
  4. Basic search using certain column.
  5. Export to excel for selected rows.
  6. Multiple delete, based on user selection.

And I am going to use this in almost all my index views.

so can anyone advice on some tools and packages that have the above 6 main features?.

Thanks a lot for any help.

 

johnjohn123123

so can anyone advice on some tools and packages that have the above 6 main features?.

Kendo. Not free though

ignatandrei

johnjohn123123

so can anyone advice on some tools and packages that have the above 6 main features?.

Kendo. Not free though

is there free layouts that offer similar functionalists ?

almost all the javascript grids do this and work with MVC. google for a list. most common on this forum are: slickgrid, jqgrid, datatables and flexigrid. I have used jqGrid and slickgrid, but prefer slickgrid. 

bruce (sqlwork.com)

jqGrid

I read about jqGrid, but seems that it  does not provide Export To Excel capabilities and it does not provide column level filtering … can you advice if there is a way to have these features inside jqGrid?

bruce (sqlwork.com)

almost all the javascript grids do this and work with MVC. google for a list. most common on this forum are: slickgrid, jqgrid, datatables and flexigrid. I have used jqGrid and slickgrid, but prefer slickgrid. 

thanks for the reply, but which grid is better for asp.net mvc web applications; jqGrid or slickgrid,?

second question i have read an article on the web that using grids inside asp.net mvc web applications will not support data annotations such as [Datetype.Date] & [Required], and will make maintaining my views very hard, comparing to not using any grid ?

can you advice on the above please?

My advice is to use datatables www.datatables.net  .. This supports both client side paging, sorting, filtering and also server side. If your record count will be <= 10000, then go for client side else server side
(Using ajax). I think this tool is free, but not sure pls visit their site for details. Its a fantastic one with minimal code. its works upon your plain html table. its not a grid. it has wonderful look and feel (by using jQuery UI theme), very fast  and many
more features. Just visit their site and reply me your experience with datatable . I hope all your needs can be achieved using datatable. 

so you mean by client side paging is that the grid will load all the records from the database , then do the paging on the client, while server side paging will only retrive the required number of items as defined in the page size ? is this what you mean
?

second question do the other tools for example jqgrid support only one type of paging not client & server paging ?

bruce (sqlwork.com)

almost all the javascript grids do this and work with MVC. google for a list. most common on this forum are: slickgrid, jqgrid, datatables and flexigrid. I have used jqGrid and slickgrid, but prefer slickgrid. 

i read some articles about jqGrid, but i have the following concerns if anyone can advice :-

1. when building the grid i will be writing something such as :-

<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 will be manually writing the column names such as FirstName, LastName , etc . while using normal razor view i simply write Html.DisplayFor(modelitem=>modelitem.FirstName) and i can benefit from the strongly typed view, to reference the
field names. and the field name and value will be based on what has been defined inside the data annotation such as [DisplayName("First Name")] . so does this mean if i use jqGrid i will lose the effect of any data annotations such as DisplayName ?.

2. also all the examples which i read about jqGrid pass json to the Grid. so does jqGrid accept Model objects or it only work with json ?

3. also when creating new record using the dialog provided by the jqGrid, seems that the Data annotation such as [Required], [Length] will not have any effect , is this correct ? , because i will not be rendering normal views rather i will be entering fields
inside dialog boxes , which will not benefit from any data annotations used for validation (client and server side validations)?

Leave a Reply