How to create a DataGrid with only edit view?

Jan 22, 2013 at 4:07 PM

Hello Frank,

I'm really happy with MVC controls mainly with the DataGridFor.

I want to do is to make my users life easier and avoid having to click a lot. Is it possible to start the DataGrid always in edit mode? My DataGrids normally doesn't have more than 15 rows.

Thanks in advance for your help.

Best regards,


Jan 22, 2013 at 8:23 PM

There are several ways to solve your problem. However consider that submitting a row in edit mode means that the changes tracking system consider that row as changed, so you will perform more updates to the db than it is necessary.

The simplest way to do this is to let the grid "think" each item has been previously modified. Infact in this case it will render the row already in edit mode in order to allowt the user to continue its previous editing. It is is enough to put the Changed property of the tracker to true The tracker has a constructor that allows this.


Another solution is just to use a simplre grid WITHOUT changes tracking: the SortableListFor. If mouse dragging sorting is disabled it works as a grid that has a single working mode. If you put in each colum a textbox...the mode would be edit. You can also use a TypedEditDisplay that when clicked turns itself into a textbox.

However, this control has no changes tracking, so it is more difficult to understand if a new row has been inserted or will get just all rows ...and discovering how they changed form the original up to you....If no insert or delete is allowed this control is an easy to use solution.

Apr 22, 2013 at 9:27 AM
Edited Apr 22, 2013 at 9:54 AM
Hi Frank. I tried your first suggestion with setting the property of the tracker to true in the constructor. It works for the most part, however, @item.ImgDataButton(DataButtonType.Delete, ...) does not work in the edit template, at least not when specifying the template inline via _S.H(). There appears to be no straightforward way to allow deletes in edit mode. I'm currently using a delete icon to cancel edit mode and go back to view mode, and I changed the view mode to pretend to be a delete confirmation, however, this is a rather hackish solution. Is there any way to do this properly?

Additionally, @Html.ManipulationButton(ManipulationButtonType.ResetGrid, ...) not just undos the changes but sets everything to view mode which is not what I want.

The SortableListFor solution doesn't work for me either as I need the changes tracking as certain edits actually require a delete + insert combination instead of just an update.

Lastly, you also mentioned using a TypedEditDisplay which I'm not yet familiar with. Does this allow change tracking?
Apr 22, 2013 at 8:49 PM
Edited Apr 22, 2013 at 8:50 PM
You can use the grid client api to delete the grid item. The api is more powerful than the buttons.

Do the following:
  1. Put a css class in the root of each grid item, so you can easily find the root from any descendant with the .closest kquery function. Say the class name is 'item-root'
  2. Add a custom button that can be either an html < image button or whatever you like. Add the Html5 attribute data-operation='remove' to this button
  3. Put an handler for the click event in an Html node that contains the whole grid as descendant.
  4. In the click handler if the original source of the event has the data-operation='remove' attribute you know you must perform a delete, otherwise return true without performing any action.
  5. In case you have to perform a remove in the click handler, do: var myItem=MyClickSource.closest('.item-root'), where MyClickSource is the soriginal click event source.
  6. Now you can call the grid client api to delete the the item: MvcControlsToolkit_DataButton_Click(myItem[0], DataButtonDelete), where myItem[0] extracts the html node from the jQuery object that represents the root of the item you found previously, and DataButtonDelete is a javascript constant that represents the remove operation