Updating Select Options In Inline Editing

rbicard

I have a DataTables table with an Editor set for inline editing. One of the fields being edited is a drop down list (<select>). I set the value of each cell based on data passed back from the server and add all possible options to the select element in the editor. If I select the field to inline edit and select and option from the list it works fine. However, when editing a different field in the row it sends the first selected option from the edior's select control instead of the value that was set when the table was loaded. Any ideas on how to approach this?

```
$(document).ready(function () {

    var editor = new $.fn.dataTable.Editor({
        ajax: {
            url: pthPost
        },
        table: '#exampleTable',
        idSrc: 'Id',
        fields: [
            {
                label: "Unique Id",
                name: "Id",
                visible: false
            },
            {
                "label": "Field 1:",
                "name": "field_1"
            },
            {
                "label": "Edit Field 1:",
                "name": "edit_field_1"
            },
            {
                "label": "Edit Field 2:",
                "name": "wbs_name_1",
                type: 'select',
                options: ['Choice 1', 'Choice 2', 'Choice 3']
            }
        ]
    });

        $('#exampleTable').on('click', 'tbody td:nth-child(2)', function (e) {
            editor.inline(this);
        });

$('#exampleTable').on('click', 'tbody td:nth-child(3)', function (e) {
editor.inline(this);
});

    var table = $('#exampleTable').DataTable({
        dom: 'Bfrtip',
        ajax: {
            url: pthGet,
            dataSrc: ''
        },
        rowId: 'Id',
        scrollX: true,
        columns: [
            {
                data: "Id",
                visible: false
            },
            {
                data: "field_1"
            },
            {
                data: "editfield_1"
            },
            {
                data: "editfield_2"
            }
        ],
        pageLength: 100,
        paging: false,
        select: true,
        lengthChange: false,
        select: true,
        buttons: [
            { extend: 'remove', editor: editor },
            { extend: 'excel', editor: editor }
        ]
    });

});

```
Let's say I have two rows here:

Unique Id | Field 1 | Edit Field 1 | Edit Field 2
1 "hello" "world" Choice 2
2 "foo" "bar" Choice 3

If I update Edit Field 2 of row 1 to Choice 3 it works as expected and it now looks like this:
Unique Id | Field 1 | Edit Field 1 | Edit Field 2
1 "hello" "world" Choice 3
2 "foo" "bar" Choice 3

If I update Edit Field 1 of row two to "BAR" it now looks like this:
Unique Id | Field 1 | Edit Field 1 | Edit Field 2
1 "hello" "world" Choice 2
2 "foo" "BAR" Choice 1

allan

Hi,

Interesting one! I'm afraid I don't have an immediate answer, but rather a return question.

What happens if you reload the page immediately after the first edit (i.e. from Choice 2 to Choice 3)? Does the value revert to Choice 2 or does it stay at Choice 3?

Any chance of a link to the page so I can debug it directly?

Allan

rbicard

It stays at Choice 3. There is an api controller on the back end that stores the submitted value to a SQL database. So it reloads that stored value which in your example is Choice 3. Unfortunately I can't publicly share the referred to page.

allan

Are you able to share it with me directly? You can PM me by clicking my name above and then "Send message".

I don't know of any reason why the value would revert. That's really odd!

Allan

rbicard

Unfortunately I don't have a way for you to access it externally and it would take forever to try and package it up. Essentially what it looks like is the editor is always defaulting the selected option of the select control to the first option and not to the data that is in that field (understandable). So the problem is if I inline edit another field in the same row it submits that first option in the select control as the data for that field (which wasn't edited). Thereby changing the value that was there. So my goal was to change the order of the options in the select control based on the value of that field. For Example: The options for Edit Field 2 are set to ['Choice 1', 'Choice 2', 'Choice 3']. The value of Edit Field 2 in row 1 is 'Choice 2'. So when I click on that cell or any other in the row to edit it I want the options to look like ['Choice 2', 'Choice 3', 'Choice 1'].
I have found something that helps me achieve this. I used the dependent method to change the order of the options. The only problem is this method is firing over a hundred times a second and I'm not sure how to stop it.

    editor.dependent('edit_field_2', function (val, data, callback) {
            if (data.row.edit_field_2 === 'Choice 1') {
                console.log('changing select options');
                return { "options": { "edit_field_2": ['Choice 1', 'Choice 2', 'Choice 3'] }}
            }
            if (data.row.edit_field_2 === 'Choice 2') {
                console.log('changing select options');
                return { "options": { "edit_field_2": ['Choice 2', 'Choice 3', 'Choice 1'] } }
            }
            if (data.row.edit_field_2 === 'Choice 3') {
                console.log('changing select options');
                return { "options": { "edit_field_2": ['Choice 3', 'Choice 1', 'Choice 2'] } }
            }
            return;
        });

allan

This example shows inline editing with a join (using select) and it doesn't show that issue.

Are you using dependent() else where to change the options? Or any other event handler that is changing the options or the value of the fields?

Allan

rbicard

I wrapped the data into a view so I could use the Editor. I couldn't before because I was just populating it from a stored procedure. Is there anyway you could translate the options part of the server side code in the example you linked to C#? So far I have:

    [Route("api/example/{idnumber}")]
        [HttpGet]
        public IHttpActionResult example(int idnumber)
        {
            var request = HttpContext.Current.Request;
            string dbConnectionString = 
    ConfigurationManager.ConnectionStrings["DataContext"].ConnectionString;
            string dbType = "sqlserver";

            var db = new Database(dbType, dbConnectionString);
                var response = new Editor(db, "vwExample", "Id")
                    .Model<vwExample>()
                    .Where("Id", idnumber, "=")
                    .Process(request)
                    .Data();

                return Json(response);
        }

I'm not sure where the Field part of it would go.
PS. Let's say the table I'm joining to is called "ChoiceOptions"

allan

Hi,

It would typically go immediately after the .Model() method call, but it could go anywhere in the chain as long as it is before .Process().

The .NET documentation for Editor includes examples of how it might work.

Regards,
Allan