Inline editing

simonagren

Hi!
I have made a simple MVC project. I was using the "makeEditable()" before and got that to work, but when I added the expandable child row function, it didnt work anymore.

I dont know if there's a way of combining these?

Now I'm trying to get the newer "editor" to work, and I have tried this(I'm not able to edit, but the child row function works fine):
So any help regarding helping me edit my table would be most helpful!

editor = new $.fn.dataTable.Editor({
        ajax: "kliniker/UpdateData"
        table: "#example"
          
        });

$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

My table looks like this:

table class="table table-striped table-bordered table-hover" id="example" width="100%"
                        thead
                            tr
                                th width="10%">/th
                                th width="15%">Perspektiv</th
                                <th width="15%">Nyckeltal</th
                                <th width="15%">Tidsperiod /th
                         
                            /tr
                       </thead
                        tbody
                            @foreach (var item in Model)
                            {
                                <tr id="@item.ID">
                                    <td class="details-control"></td>
                                    <td>@item.Name</td>
                                    <td>@item.Address</td>
                                    <td class="test">@item.Town</td>
                                </tr>
                            }
                        </tbody>

                    </table>

simonagren

Hmm, messy. But you get the point. Sry!

allan

Hi,

Are you able to link to the page so I can debug the issue? What you have for Editor looks like it should work okay.

Allan

simonagren

Hey!

Sry, its just on localhost.

I get this:" Uncaught Unable to automatically determine field from source. Please specify the field name."

allan

There is a full description of that message here. If that doesn't help I would need to be able to see the full Javascript you are using to create the DataTable and Editor.

Allan

simonagren

Ok, thanks.
I might be a bit slow here but...
My data is coming from the MVC controller and is not specified as a column.
Am I supposed to do something like this? var table = $('#example').DataTable({
columns: [ { }, { }, { }, { editField: "some_name" },
]
});
And use this "some_name" in my editor?

Because now no "fields" are specified in the editor, because I dont know what "name" to use, when I render the data like this, and not via "columns"

tangerine

If that doesn't help I would need to be able to see the full Javascript you are using to create the DataTable and Editor.

allan

editField - as noted in the documentation, is only available in Editor 1.4 which is not released yet. The documentation there is a little ahead of itself. I can send you a beta copy if you need, but as noted, it would be useful to see the full code.

Allan

simonagren

Just for you to see the code:
http://jsfiddle.net/a4p59qby/

This is an Index view that uses a _layout.
So the css and js files are included in the layout

allan

I don't see any fields defined in the Editor instance. Is that intentional? At the moment it isn't finding a field to edit, as there are no fields to edit!

Allan

simonagren

Ok.
Earlier I've used the same "name" as in the Datatables column.
But since I dont use: "data": "somename".

Im not sure what to use in the editor.

allan

There are two options:

1. Since DataTables 1.10.3 you are able to use the columns.data property as you note, and DataTables will read the data into an object which you can then use with Editor as you normally would. That is probably the easiest way of doing it.
2. You can specify fields.name as an integer to read from the array of data that DataTables creates. This example shows that in practice - note that when I release Editor 1.4 that example will be updated to use the first method suggested.

Allan

simonagren

Thank you Allan!