How Do I Create Data Aware Data Grid with ASP.NET MVC

Question

I would like to create a table of data that whenever there's a mouse-over event on cell/row, I will be able to pop-up a context menu/buttons for actions that are relevant to the data in the cell.

Example: If I have a username in the a column, whenever user moves the mouse over that cell, it will display the buttons "Detail", "Update" and "Remove". If I have an address column, whenever user moves the mouse over that address cell, I will pop-up a say... google map or something else.

I'm going to implement this using ASP.NET MVC 4 with Ext.NET or JQuery. Either examples are welcome. Thanks!

NOTE: Don't need detailed code, but snippets are welcome.

Giedrius · Accepted Answer · 2013-10-02 07:05:19Z

First of all, I don't think from usability perspective it is not very good idea to show action buttons on hover - because you need to hover to find out that there's actions - some people may look into the table and have no idea what to do next, and just accidently find out that actually there are some buttons hidden.

I would think about using one of existing grids - Telerik's grids for mvc are awesome - especially because they have good client side API - which you could use to achieve what you wish, though costs money - but it is really worth to check it out - http://demos.kendoui.com/web/grid/index.html.

Also there's Grid.Mvc - which is open source and is usable, though client API is weaker: http://gridmvc.codeplex.com/wikipage?title=Client%20side%20%28javascript%29&referringTitle=Documentation

To implement what you need, you need to split it to tasks:

1) detect hover event, for this you can use jQuery - http://api.jquery.com/hover/
2) detect what column you're in, probably would use some data attributes for this on table header, you can find column header using jQuery like this:

var $th = $td.closest('tbody').prev('thead').find('> tr > th:eq(' + $td.index() + ')');

3) switch your logic depending on what column you're in
4) make it reusable :)

Collectives™ on Stack Overflow

How Do I Create Data Aware Data Grid with ASP.NET MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related