Trouble getting inline editor values

Trouble getting inline editor values

SurgeSurge Posts: 6Questions: 2Answers: 1

Hi. I'm having trouble using the client libraries for DataTables and Editor with ASP.NET MVC. I am unable to get more than the id field from the table. I want to get the edited values when you edit a cell, then hit enter. I'm trying to get a hard-coded table working before incorporating my data.

Here's my table:

<table id="example" class="display" cellspacing="0">
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extension</th>
            <th width="18%">Start date</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <td>1</td>
            <td>Tim</td>
            <td>Weathersby</td>
            <td>Software Dev</td>
            <td>Home</td>
            <td>x1234</td>
            <td>2016-08-01</td>
            <td>300000</td>
        </tr>
        <tr>
            <th></th>
            <td>2</td>
            <td>Jane</td>
            <td>Meyer</td>
            <td>President</td>
            <td>Home</td>
            <td>x1213</td>
            <td>2016-08-01</td>
            <td>3000000</td>
        </tr>
    </tbody>
</table>

Here's my js:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
    editor = new $.fn.dataTable.Editor({
        ajax: {
            edit: {
                type: 'POST',
                url: '/Home/SaveEmployee?id=_id_'
            }
        },
        table: '#example',
        idSrc: 'Id',
        fields: [{
            label: "Id:",
            name: "Id"
        }, {
            label: "First name:",
            name: "first_name"
        }, {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "Position:",
            name: "position"
        }, {
            label: "Office:",
            name: "office"
        }, {
            label: "Extension:",
            name: "extn"
        }, {
            label: "Start date:",
            name: "start_date",
            type: "datetime"
        }, {
            label: "Salary:",
            name: "salary"
        }
        ]
    });

    // Activate an inline edit on click of a table cell
    $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
        editor.inline(this, {
            submit: 'all'
        });
    });

    $('#example').DataTable({
        dom: "Bfrtip",    
        order: [[1, 'asc']],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "Id" },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [
                    { extend: "remove", editor: editor }
        ]
    });
});

Here's my controller POST method:

[HttpPost]
        public ActionResult SaveEmployee(int id, string action, object data)
        {
            var testy = data;

            return RedirectToAction("InlineEditing");
        }

What an I missing? Thanks for the help.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 46,189Questions: 1Answers: 6,410 Site admin

    That looks like it should be working I must confess. Are you able to give me a link to the page so I can try to trace it through please?

    Allan

  • SurgeSurge Posts: 6Questions: 2Answers: 1

    Hello, Allan! I do not have this in a live site yet, but you can build it in your local dev environment if you copy the code. Are you able to do that?

  • allanallan Posts: 46,189Questions: 1Answers: 6,410 Site admin

    Looking into it:

    return RedirectToAction("InlineEditing");

    will return a 302 as I understand it. But Editor expects valid JSON (probably with a 200 code, but that doesn't matter as much as the JSON data).

    Is the server responding with an empty 302 at the moment? If so, that's the issue.

    Allan

  • SurgeSurge Posts: 6Questions: 2Answers: 1

    It does return a 302, but my problem seems to lie in the POST method:

    [HttpPost]
    public ActionResult SaveEmployee(int id, string action, object data)
    

    I can see the value for id and action, but data is empty. In the headers, I see the following:

    action:edit
    data[1][Id]:1
    data[1][first_name]:Timo
    data[1][last_name]:Weathersby
    data[1][position]:Software Dev
    data[1][office]:Home
    data[1][extn]:x1234
    data[1][start_date]:2016-08-01
    data[1][salary]:300000
    

    I edited the first_name from "Tim" to "Timo". How can I get the form data?

  • allanallan Posts: 46,189Questions: 1Answers: 6,410 Site admin

    You'd need to parse it from the incoming data (Request.Form). The DataTables.dll in the Editor .NET package has a DtRequest class which can be used to do that if you want.

    Allan

  • SurgeSurge Posts: 6Questions: 2Answers: 1
    Answer ✓

    Thanks again, Allan. Your last response triggered my memory. I am able to get the form values using these arguments in my method:

    [HttpPost]
    public ActionResult SaveEmployee(int id, string action, FormCollection form)
    

    Thanks for the help!

Sign In or Register to comment.