Simple and most effective approach for grids in MVC3? - asp.net-mvc

I am using webgrid at present, but finding limitations so seeking you experience on a good self contained solution that fit the MVC model neatly and simple especially model binding and validation annotations.
My options at present are:
1) Server based: Syncfusion HTML Helper server grid controls.
2) Telerik Kendo Client side JQuery controls
3) Other Telerik controls.
4) Standard JQuery grids.
Thanks.

I always use this:
jqGrid: jQuery Grid Plugin or
DataTables (table plug-in for jQuery)

Related

Knockoutjs Editable Grid

Are there any samples or examples of standard Grids/tables created by Knockoutjs that are sortable on their columns and editable on a row level.
That is the rows are a normal table until you click and then you can edit them and save them back to the server using Ajax? Is there any examples of integrating Knockout with for example a JQuery UI editable grid like Wijmo grid or any other. I guess any JS grid that takes JSON could work?
I have a requirement to implement an editable table and would rather use Knockoutjs. Especially with Upshot.js and MVC4 on the way.
Thanks
KoGrid is a pretty good option.
It allows you to define cell and row templates where you can do exactly what you're saying. There is some documentation on the wiki
There are also various Knockout addons for datatables discussion here http://datatables.net/forums/discussion/4969/knockoutjs/p1 and the implementation here http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings/
Wijmo recently added support for Knockout in v2.1 of their framework a example can be seen here http://wijmo.com/grid-with-knockout-viewmodel-loading-remote-data/
Also Kendo UI can easily integrate with Knockout
New version of datatables 1.10 is going to have support

ASP.Net MVC 3 Grids

I see that there is the Telerik Grid, jqGrid and WebHelper WebGrid as part of the framework. Am I missing any others?
Which one works best on a commercial application with thousands of rows and master/detail relationships for ASP.Net MVC 3?
I have used the Telerik MVC grid in production. Take a look at the grid at an online Diamond store. It works the same with even 50k+ rows as it only sends the current page to the browser + it has many cool features like Filters, Ajax binding etc.
No idea on the master details front. You could find more info about it on Telerik's Site
there is also grid supplied by mvccontrib. I personally use telerik grid having some cool features and scale for large data Q3 2010 has some good improvements such as inline editing etc. For MVC 3 grid i am waiting for rtm of mvc 3 coming in January
If you're using Telerik for a commercial project, then you will need to buy it. Check this link: http://www.telerik.com/products/aspnet-mvc/getting-started/licensing.aspx.
We're using the jQuery in our project, so the jqGrid is most suitable for us. It's powerfull, has a lot of plugins and completely free, but little bit more complicated in use than Telerik.
jqGrid usage example:
[view]
http://xenta.codeplex.com/SourceControl/changeset/view/11214#118453
[controller]
http://xenta.codeplex.com/SourceControl/changeset/view/11214#118416

Why should I not use an ASP.NET datagrid control in MVC

I don't want to make this into a "which is better... MVC or WebForms" type of question. Im sure that has been asked a bunch of times here already.
My Question: If I am building a MVC web project, why should I not use an ASP.NET datagrid control on one of my "Views" .aspx pages?
The control relies on Viewstate which isn't available in MVC. In addition, all the behavior is predicated on the WebForms event and postback model which you'd have to recreate in MVC to get them to work. You could search for alternate, MVC-friendly grids (perhaps jQuery-based). I know that Telerik has released a set of MVC controls under open source that might be helpful to you.
you can't use web forms controls in MVC because they depend on view state. Use the data grid of the Mvc Controls toolkit instead. It has paging, insert delete and update capabilities and it is completely templated (you can shap it as you like). Look at it here
The datagrid control depends on postback events which does not fit into the MVC way of thinking (the postback goes to the page code behind rather than the controller). You could use one without any postback features, i believe, but you may as well craft something directly.
Because the ASP.NET DataGrid / GridView has too much responsibility to fit into the MVC pattern. You'll have to add some code-behind to your view to databind the grid - code that belongs in the controller.
Anything that uses postback won't work with MVC, so the DataGrids paging and sorting won't be any good to you. So there really isn't any benefit to using it.
If you're looking for a flexible grid 'control' (MVC prefers the term HTML Helper), the MvcContrib grid is pretty good.

Quickest way to add a DataGrid to an MVC.NET app: ASP.NET AJAX or jQuery?

I have an ASP.NET MVC application which uses plain HTML. I quickly need to add tabs and a datagrid to it. I've been evaluating ASP.NET AJAX and jQuery, but am running out of time to make a decision.
If I needed to add these 2 features quickly, how should I proceed? ASP.NET AJAX or jQuery?
If you are adding a grid to MVC, your best bet is JQuery. The ASP.NET DataGrid is not going to work with MVC, because MVC doesn't support postbacks. The ASP.NET AJAX tabs may not work either.
Here is a plugin for the tabs:
http://stilbuero.de/jquery/tabs_3/
And here is a plugin for the Grid:
http://www.trirand.com/blog/
If you want to roll-your-own server-side GridView control for MVC, see here:
http://stephenwalther.com/blog/archive/2008/06/25/asp-net-mvc-tip-9-create-a-gridview-view-user-control.aspx
There is also a Grid Component in MVCContrib:
http://mvccontrib.codeplex.com/Wiki/View.aspx?title=Grid&referringTitle=Home
jQuery UI Extensions for ASP.NET MVC contains tabs:
http://jmvcui.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33636

ASP.NET MVC & Ajax Control Toolkit

One of the things I like about coding "old skool" (web forms) is the AJAX Control Toolkit.
I saw on the Microsoft Storefront video 14, Rob Conery uses the TextboxWatermark control.
When I downloaded the code though, I couldn't find any reference to the Watermark control or any other control from the toolkit nor could I get it to work.
So my question is, does the AJAX Control Toolkit even work in an MVC / AJAX / JQuery type world without viewstate. What do you use for "simple" controls such as Calendar & Watermarks?
jQuery UI has a calendar and other UI components. Also check out the vast number of jQuery plugins.
I've been looking into this question recently and what I've found is that the AJAX Control Toolkit is not easy to use in the "JavaScript only" manner that you'd want to use for ASP.NET MVC. In fact it's a real pain. Here are two examples:
Example 1 - Popup Calendar
Example 2 - Auto Complete Text Field
Neither are easy.
You can give your MVC pages a code-behind and use the AJAX Control Toolkit as you would in regular ASP.NET, but that really violates the whole idea of MVC, so I wouldn't advise it.
My suggestion would be to follow Fredrik Kalseth's advice and use jQuery UI or one of the many plugins. Telerik also has some good looking Open Source MVC Controls that are based on jQuery.
Most of the AJAX Control Toolkit is available in MVC-friendly javascript form off the MS AJAX CDN. These can be used using a jquery plug-in syntax as well.

Resources