Recommended approach to implementing inline editin

Question

I am using MVC3, C#, Razor, EF4.1

I have implemented grids in their most simple form ie Razor Tables. At present I have implemented editing of record fields off page ie Click "Edit" and the edit page appears, one then fills in data then save which returns user to main grid page.

I need an inline solution where only 1 or 2 fields need updating. Typically the user would either click on the row or on "edit" link and the row would change to "edit mode". One would then edit the data. One would then click on "Save" and the row would resort to read only, or the grid would refresh. Can you recommend a simple and robust solution for this. At present I am not thinking about 3rd party component solutions such as Telerik Kendo UI Grids , although in the near future I will no doubt upgrade to something like this. At present I want to keep it really simple.

Thoughts, wisdom, recommendations appreciated.

Many thanks.

EDIT:

Thanks all. I am going to give these suggestions a try.

Answer 1

I have implemented exactly what you are asking for, but I cannot assure you that it is robust. It definitely is not simple. Based on the article Get the Most out of WebGrid in ASP.NET MVC by Stuart Leeks I have created an MVC project which I have heavily modified with my own javascript. In the end I have come up with a solution that works but could be vastly improved. Took me at least a week to implement.

Answer 2

I write tutorial for implementing inline editable grid using mvc, knockoutjs with source code: http://www.anhbui.net/blog?id=kojs-1

Answer 3

Using knockout.js is my preferred approach, and in my opinion, is simple to get started with but flexible enough to keep up with project demands.

Here are examples:

http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

http://knockoutjs.com/examples/gridEditor.html

If you think this is for you then take an hour or two and go through the tutorials, it's well worth the time:

http://learn.knockoutjs.com/

Answer 4

Well in that case I will suggest you to add a div with a unique id with each grid row. and on the click of edit button insert a row having text boxes with value using java script.

Answer 5

Here is simplest way of doing it, see fiddle.

Save all your data using JSON web service. You'll end up having either array of cells or array of array of cells. (Alternatively you can put JSON in a hidden input box)

Use $.data api and put all information needed for server to save in data attributes.

You'll endup having something simple as

var f=$('#myform')
  , t = $('table')
  , inputs = t.find('input')
  , b1 = $('button.save1')
  , b2 = $('button.save2')
  , ta = $('#save')

// update data-val attribute when value changed 
t.on('change', 'input', (e) => $(e.target).data('val', e.target.value))

// store everything in $.data/data-* attributes
b1.on('click', () => {
  	var data = []
  	inputs.each((i,inp) => data.push($(inp).data()) )
	ta.text(JSON.stringify(data))
})

// use $.serialize
b2.on('click', () => {      	
    var data = f.serializeArray()
	ta.text(JSON.stringify(data))
})

input {border : 1px solid #fff;margin:0; font-size:20px; }
input:focus { outline: 1px solid #eee; background-color:#eee; }
table { border : 1px solid #999; border-collapse:collapse;border-spacing:0; }
table td { padding:0; margin:0;border:1px solid #999; }
table th { background-color: #aaa; min-width:20px;border:1px solid #999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='myform' id='myform'>
<table>
    <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr data-row="0">
        <th>1</th>
        <td><input type="text" data-row="0" data-col="0" data-val="a" value="a" name='data[0][0]'/></td>
        <td><input type="text" data-row="0" data-col="1" data-val="b" value="b" name='data[0][1]'/></td>
        <td><input type="text" data-row="0" data-col="2" data-val="c" value="c" name='data[0][2]'/></td>
    </tr>
    <tr data-row="1">
        <th>2</th>
        <td><input type="text" data-row="1" data-col="0" data-val="d" value="d" name='data[1][0]'/></td>
        <td><input type="text" data-row="1" data-col="1" data-val="e" value="e" name='data[1][1]'/></td>
        <td><input type="text" data-row="1" data-col="2" data-val="f" value="f" name='data[1][2]'/></td>
    </tr>
    <tr data-row="2">
        <th>3</th>
        <td><input type="text" data-row="2" data-col="0" data-val="g" value="g" name='data[2][0]' /></td>
        <td><input type="text" data-row="2" data-col="1" data-val="h" value="h" name='data[2][1]' /></td>
        <td><input type="text" data-row="2" data-col="2" data-val="i" value="i" name='data[2][2]' /></td>
    </tr>
</table>
</form>
<div name="data" id="save" cols="30" rows="10"></div>
<button class='save1'>Save 1</button>
<button class='save2'>Save 2</button>

Given that you generate your table in Razor view and don't need to load data into table. So you "loading" data on the server and saving changes with tiny JS snippet above.

You can also style your input cells in the table so they would look different when with focus and not, making it look like Excel spreadsheet (without fancy Excel features though, just look).