Editor. Having issues in keeping dynamically populated select options in sync with correct row.

drgrieve

For each row some columns have a unique list of options to select from. The data for this select can be determined from ajax data returned by the server.

This works for while, but after changing a few values (not worked out the exact sequence), eventually this column starts submitting data for the wrong row.

I couldn't find an example on dynamically populating the select options so I think my attempt is just doing something fundamently wrong.

       $('.js-missing-table tbody').on('click', 'td.editable', function (e) {
           var api = missingTable.api();
           var cellIndex = api.cell(this).index()
           var data = api.row(this).data();
           var entities = [{ label: data.policyData.primaryEntity.name, value: data.policyData.primaryEntity.name }];
           data.policyData.additionalEntities.forEach((x) => entities.push({ label: x.name, value: x.name }))
           editor.field('policyData.primaryEntity.name').update(entities);
           editor.inline(cellIndex, {
               onBlur: 'submit'
           });
       });

I've tried only populating the entities only when this column is clicked - instead of everytime, but this had issues of the data not being seeded, and editor sending values when modifiying other columns.

Is there an example of changing the select options for every row for a column?

        var editor = new DataTable.Editor({
            ajax: '@Mvc.Partner.Campaign_Prefilled_Review_EditTable.Url(Url)',
            idSrc: 'id',                
            fields: [
                {
                    name: 'policyData.primaryEntity.name',
                    type: 'select',
                    options: [
                        { label: '', value: '' }
                    ]
                },

I'd prefer using the cached data instead of rolling my own cache, or loading the data via ajax on every click.

allan

Your approach looks like it should work to me. It is all synchronous, so the normal suspect of async Ajax isn't going to be an issue.

Are you able to PM me a link to the page perhaps?

There is an example here that is relevant - it doesn't use select, but rather datatable, but the premise is the same. When editing is triggered it will get a list of options and populate them into the field's option list. I've done it on initEdit there, which you could try as well, but I'd be mildly surprised if that resolved the problem.

Allan

drgrieve

@allan Thank you!

This resolved the issue I was having. It also has made the code simpler.

        $('.js-missing-table tbody').on('click', 'td.editable', function (e) {
            var api = missingTable.api();
            var cellIndex = api.cell(this).index()
            editor.inline(cellIndex, {
                onBlur: 'submit'
            });
        });

        editor.on('initEdit', function (e, node, data, items, type) {
            var entities = [{ label: data.policyData.primaryEntity.name, value: data.policyData.primaryEntity.name }];
            data.policyData.additionalEntities.forEach((x) => entities.push({ label: x.name, value: x.name }))
            editor.field('policyData.primaryEntity.name').update(entities);
        });