Show data on display in dialog

Question

For a dynamically created multiselect, when we set the value via:

document.getElementById("role").ej2_instances[0].value = e.result.split(",");

The options are selected but the nothing displays in the box. Its just blank. How do we dynamically bind to that? This is being used in a kanban and is a direct result of my previous question for it, because the options provided for binding to a foreign key did not work as provided. This is working perfectly, but we can't get the results to show in the initial box. Clicking in the box to show your multiselect options shows they are already checked.

This is the function that creates the multiselect:

function onBeforeOpenRole(args) {
    var roleElement = document.getElementById("role");
    if (!roleElement.classList.contains('e-multiselect')) {
        var roleDropDownList = new ej.dropdowns.MultiSelect({
            dataSource: [
                {'text': 'Team Lead', 'value': 'lockon_team_lead'},
                {'text': 'Office Lead', 'value': 'lockon_office_lead'},
            ],
            mode: 'CheckBox',
            showSelectAll: true,
            fields: {text: 'text', value: 'value'},
            floatLabelType: 'Always', placeholder: 'Role',
        });
        roleDropDownList.appendTo(roleElement);
    }
}

This is the one that sets the values:

function dialogOpen(args) {
    roleDialog.show();
    document.getElementById("role").ej2_instances[0].selectAll(false);
    roleDialog.header = "Edit "+args.data.display_name;
    document.getElementById('role_member_id').value = args.data.id;
    document.getElementById("role").ej2_instances[0].showSpinner();
    jQuery.ajax({
        type : "post",
        dataType : "json",
        url : lockonreportScript.ajaxurl,
        data : {_ajax_nonce: lockonreportScript.nonce, action: "lockonreport_get_roles", member_id:args.data.id},
        success: function(e) {
            if(e.result) {
                //jQuery('.e-delim-view .e-delim-values').text = e.result.replace("lockon_","").replace("_"," ");
                document.getElementById("role").ej2_instances[0].value = e.result.split(",");
            }
        },
        error: function (e){
            jQuery('#lorMessage').html(e.responseText).show();
            document.getElementById("role").ej2_instances[0].hideSpinner();
        },
        complete: function (e){
            document.getElementById("role").ej2_instances[0].hideSpinner();
        }
    });
    args.cancel = true;

}

Hareesh Balasubramanian · Answer

Hi Mark, 

Greetings from Syncfusion Support. 

We have validated your shared code snippet at our end. We suspect that your requirement is to render the MultiSelect component inside the Kanban and for that, we have prepared a sample using template property and the sample can be viewed from the following link. 

Code snippet: 




    function onDialogOpen(args) { 
        if (args.requestType !== 'Delete') { 
            var curData = args.data; 
            var filledTextBox = new ej.inputs.TextBox({}); 
            filledTextBox.appendTo(args.element.querySelector('#Id')); 
            var numericObj = new ej.inputs.NumericTextBox({ 
                value: curData.Estimate, placeholder: 'Estimate', 
            }); 
            numericObj.appendTo(args.element.querySelector('#Estimate')); 
            var statusDropObj = new ej.dropdowns.DropDownList({ 
                value: curData.Status, popupHeight: '300px', 
                dataSource: statusData, fields: { text: 'Status', value: 'Status' }, placeholder: 'Status' 
            }); 
            statusDropObj.appendTo(args.element.querySelector('#Status')); 
            var assigneeDropObj = new ej.dropdowns.DropDownList({ 
                value: curData.Assignee, popupHeight: '300px', 
                dataSource: assigneeData, fields: { text: 'Assignee', value: 'Assignee' }, placeholder: 'Assignee' 
            }); 
            assigneeDropObj.appendTo(args.element.querySelector('#Assignee')); 
            var priorityObj = new ej.dropdowns.MultiSelect({ 
                value: curData.Priority, popupHeight: '300px', 
                dataSource: priorityData, fields: { text: 'Priority', value: 'Priority' }, placeholder: 'Priority' 
            }); 
            priorityObj.appendTo(args.element.querySelector('#Priority')); 
            var textareaObj = new ej.inputs.TextBox({ 
                placeholder: 'Summary', 
                multiline: true 
            }); 
            textareaObj.appendTo(args.element.querySelector('#Summary')); 
        } 
    } 

Sample: https://stackblitz.com/edit/zrq7kr?file=index.js 

And for further reference, kindly refer the below UG link, 
https://ej2.syncfusion.com/javascript/documentation/kanban/dialog/?no-cache=1#dialog-template 

Kindly try the above solution and revert us if you have any further assistance. 

Regards, 
Hareesh

Mark · Answer

Thank you, I was just saying we were popping a dialog from kanban and were having issues getting multiselect to show correctly.  I thought it may be related to the resize / refresh issue that is commonly posted, but the issue was that the multiselect needs its value set with an array.

Vengatesh Maniraj · Answer

Hi Mark,Thanks for the update.We can reproduce the issue while showing the Multiselet value in Kanban dialog. Currently, we are validating this problem at our end and we will update further details on May 26, 2020. We appreciate your valuable patience.Regards,Vengatesh

Mark · Answer

Not certain what we did to fix it, but this is working correctly (I think it was the initializing it by doing selectAll(false):

var dialog = new ej.popups.Dialog({
    allowDragging: true,
    enableResize: true,
    isModal:false,
    position: { X: 'center', Y: 'center' },
    showCloseIcon: true,
    visible: false,
    beforeOpen: onBeforeOpen,
    content: '<input id="team"><input id="member_id" type="hidden"><input id="role">',
    target: document.getElementById("body"),
    width: '350px',
    buttons: [
        {
            'click': teamSave,
            buttonModel: {
                isPrimary: true,
                content: 'Save'
            }
        },

    ]
});

dialog.appendTo('#dialog');

function onBeforeOpen(args) {
    var roleElement = document.getElementById("role");
    if (!roleElement.classList.contains('e-multiselect')) {
        var roleDropDownList = new ej.dropdowns.MultiSelect({
            dataSource: [
                {'text': 'Team Lead', 'value': 'team_lead'},
                {'text': 'Office Lead', 'value': 'office_lead'},
            ],
            mode: 'CheckBox',
            showSelectAll: true,
            fields: {text: 'text', value: 'value'},
            floatLabelType: 'Always', placeholder: 'Role',
        });
        roleDropDownList.appendTo(roleElement);
    }
}

function dataBound(){
    jQuery(".e-kanban-table .e-item-count").text(function () {
        return jQuery(this).text().replace("items", "Recruiters");
    });

    var headerEle = document.querySelector('.e-header-row');
    headerEle.addEventListener("dblclick", function (e) {
        var val = jQuery(e.target).closest('th').data('key');
        if(val!=0) {
            document.getElementById('team').value = '';
            currentHeader = jQuery(e.target).closest('th').find('.header-text');
            dialog.show();
            dialog.header = "Edit " + jQuery(e.target).closest('th').find('.header-text')[0].innerText;
            var tmp = jQuery(e.target).closest('th').find('.header-text')[0].innerText.split(" - ");
            if(tmp.length>0 && jQuery(e.target).closest('th').find('.header-text')[0].innerText.includes(" - ")){
                document.getElementById('team').value = tmp[0];
            }
            document.getElementById('member_id').value = val;
            document.getElementById("role").ej2_instances[0].selectAll(false);
            jQuery.ajax({
                type : "post",
                dataType : "json",
                url : lorScript.ajaxurl,
                data : {_ajax_nonce: lorScript.nonce, action: "get_roles", member_id:val},
                success: function(e) {
                    if(e.result) {
                        document.getElementById("role").ej2_instances[0].value = e.result.split(",");
                    }
                },
                error: function (e){
                    jQuery('#lorMessage').html(e.responseText).show();
                    document.getElementById("role").ej2_instances[0].hideSpinner();
                },
                complete: function (e){
                    document.getElementById("role").ej2_instances[0].hideSpinner();
                }
            });

        }
    });

}

Hareesh Balasubramanian · Answer

Hi Mark, 

Thanks for the update. 

We have modified our previously updated sample with your shared code snippets and the sample can be viewed from the following link. 

Code snippet: 




function onDialogOpen(args) { 
  if (args.requestType !== 'Delete') { 
    var curData = args.data; 
                . 
                . 
                . 
    var priorityObj = new ej.dropdowns.MultiSelect({ 
      value: curData.Priority, popupHeight: '300px', mode: 'CheckBox', showSelectAll: true, 
      dataSource: [ 
        { 'text': 'Team Lead', 'value': 'team_lead' }, 
        { 'text': 'Office Lead', 'value': 'office_lead' }, 
      ], fields: { text: 'text', value: 'value' }, floatLabelType: 'Always', placeholder: 'Role' 
    }); 
    priorityObj.appendTo(args.element.querySelector('#Priority')); 
  } 
} 

Sample: https://stackblitz.com/edit/zrq7kr-eku9pz?file=index.js 

Kindly try the above sample and revert us if you have any further assistance. 

Regards, 
Hareesh