How do I populate a dropdown in table edit?

chris_r

Debugger code: uzesas

I have a flat JSON structure I am sending to the table editor. I can get the table to populate but when I edit a row the dropdown ("ComparisonOperatorID") is empty. The text fields are as expected. Any suggestions are appreciated.

Here is my JSON

{
   "data":[
      {
         "TriggerText":"High - Asthma - Patient(s) using a long-acting beta2-agonist inhaler in combination with an inhaled corticosteroid.",
         "TriggerActionDefinitionId":2,
         "TriggerTypeId":2,
         "TriggeredKeyId1":289,
         "TriggerHelpText":null,
         "ComparisonOperatorID":1,
         "TriggerId":39447,
         "OperatorId":1,
         "CoDisplayText":"=",
         "ActionId":2,
         "TaDescription":"Add Required Careplan Issue",
         "triggerId":289,
         "protocolText":"Issue: Adherence - medication administration"
      },
      {
         "TriggerText":"High - Asthma - Pediatric patient(s) with presumed persistent asthma using an inhaled corticosteroid or acceptable alternative.",
         "TriggerActionDefinitionId":2,
         "TriggerTypeId":2,
         "TriggeredKeyId1":289,
         "TriggerHelpText":null,
         "ComparisonOperatorID":1,
         "TriggerId":39448,
         "OperatorId":1,
         "CoDisplayText":"=",
         "ActionId":2,
         "TaDescription":"Add Required Careplan Issue",
         "triggerId":289,
         "protocolText":"Issue: Adherence - medication administration"
      },
      {
         "TriggerText":"High - Asthma - Patient(s) with an asthma related hospitalization or ER encounter in last 3 reported months or frequently using short-acting beta2-agonist inhalers that had an office visit in last 3 reported months.",
         "TriggerActionDefinitionId":2,
         "TriggerTypeId":2,
         "TriggeredKeyId1":512,
         "TriggerHelpText":null,
         "ComparisonOperatorID":1,
         "TriggerId":39449,
         "OperatorId":1,
         "CoDisplayText":"=",
         "ActionId":2,
         "TaDescription":"Add Required Careplan Issue",
         "triggerId":512,
         "protocolText":"Issue: Adherence - respiratory symptom management"
      }
   ],
   "options":{
      "ComparisonOperatorID":[
         {
            "label":"=",
            "value":1
         },
         {
            "label":"<>",
            "value":2
         },
         {
            "label":">",
            "value":3
         },
         {
            "label":">=",
            "value":4
         },
         {
            "label":"<",
            "value":5
         },
         {
            "label":"<=",
            "value":6
         },
         {
            "label":"Between",
            "value":7
         },
         {
            "label":"Is Null",
            "value":8
         },
         {
            "label":"Is Not Null",
            "value":9
         }
      ]
   }
}

And here are my data table functions. I've tried setting the data source to just "dataSource " and the table doesn't populate at all.

<script>
    var editor;

    //dattables debugger --- not for production
    (function () {
        var url = 'https://debug.datatables.net/bookmarklet/DT_Debug.js';
        if (typeof DT_Debug != 'undefined') {
            if (DT_Debug.instance !== null) {
                DT_Debug.close();
            } else {
                new DT_Debug();
            }
        } else {
            var n = document.createElement('script');
            n.setAttribute('language', 'JavaScript');
            n.setAttribute('src', url + '?rand=' + new Date().getTime());
            document.body.appendChild(n);
        }
    })();

    //this is the table editor
    $(document).ready(function () {

        var dataSource = <%= DataTableJson %>;

        editor = new $.fn.dataTable.Editor({
            data: dataSource.data,
            idSrc: "TriggerId",
            table: '#ProtocolTriggerTable',
            fields: [{
                name: "ComparisonOperatorID",
                type: "select"
            }, {
                name: "TriggerText",
                type: "textarea",
                width: "100%"
            }, {
                name: "TaDescription",
            }, {
                name: "protocolText",
            }, {
                name: "TriggerHelpText",
            }]
        });

        // New record
        $('#newRow').on('click', function () {
            editor.inlineCreate('end');
        });

        // Edit record
        $('#ProtocolTriggerTable').on('click', 'td.editor-edit', function (e) {
            e.preventDefault();

            editor.edit($(this).closest('tr'), {
                title: 'Edit record',
                buttons: 'Update'
            });
        });

        // Delete a record
        $('#ProtocolTriggerTable').on('click', 'td.editor-delete', function (e) {
            e.preventDefault();

            editor.remove($(this).closest('tr'), {
                title: 'Delete record',
                message: 'Are you sure you wish to remove this record?',
                buttons: 'Delete'
            });
        });

        //this is the table template
        var protocolTriggerTable = $('#ProtocolTriggerTable').DataTable({
            dom: "Bfrtip",
            data: dataSource.data,
            columns: [
                {
                    data: null,
                    defaultContent: '<i class="fa fa-pencil"/>',
                    className: "dt-center editor-edit",
                    orderable: false
                },
                {
                    data: null,
                    defaultContent: '<i class="fa fa-trash"/>',
                    className: "dt-center row-remove",
                    orderable: false
                },
                { data: "CoDisplayText" },
                { data: "TriggerText" },
                { data: "TaDescription" },
                { data: "protocolText" },
                { data: "TriggerHelpText" }
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [{
                extend: "createInline",
                editor: editor,
                formOptions: {
                    submitTrigger: -2,
                    submitHtml: '<i class="fa fa-play"/>'
                }
            }]
        });
    });
</script>

chris_r

FYI, I tried creating a test case but can't figure out where to put the JSON to populate the table.

allan

Hi Chris,

The issue here is that you are using data to populate the table rather than the ajax option. Editor listens for the DataTables' xhr event and checks to see if there are is an options object on the returned JSON. However, that event never fires in this case as DataTables isn't making an Ajax request. So Editor never sees the options.

What you'd need to do is:

editor.field('ComparisonOperatorID').update(dataSource.options.ComparisonOperatorID);

which would tell Editor where to find the options and update them.

Regards,
Allan