syn.uicontrols.$multiselect

select 태그에 통합되어 있는 다중 선택을 지원하는 컨트롤입니다. tail.select.js를 이용하여 개발됩니다.

<div>
    <select id="ddlFileExtension" syn-options="{dataSourceID: 'CH000', parameters: '@GROUPCODE:MS001;', local: false, toSynControl: true, required: false}" multiple style="width: 200px; height: 23px;"></select>
    <select id="ddlBusinessRank" syn-options="{dataSourceID: 'CH000', parameters: '@GROUPCODE:MS002;', local: false, toSynControl: false, required: false}" multiple style="width: 200px; height: 200px;"></select>
</div>
<div>
    <input type="button" id="btnGetValue" value="getValue" syn-events="['click']" />
    <input type="button" id="btnSetValue" value="setValue" syn-events="['click']" />
    <input type="button" id="btnClear" value="clear" syn-events="['click']" />
    <input type="button" id="btnLoadData" value="loadData" syn-events="['click']" />
    <input type="button" id="btnControlReload" value="controlReload" syn-events="['click']" />
    <input type="button" id="btnGetSelectedIndex" value="getSelectedIndex" syn-events="['click']" />
    <input type="button" id="btnSetSelectedIndex" value="setSelectedIndex" syn-events="['click']" />
    <input type="button" id="btnGetSelectedValue" value="getSelectedValue" syn-events="['click']" />
    <input type="button" id="btnGetSelectedText" value="getSelectedText" syn-events="['click']" />
    <input type="button" id="btnSetSelectedValue" value="setSelectedValue" syn-events="['click']" />
    <input type="button" id="btnSetSelectedText" value="setSelectedText" syn-events="['click']" />
    <input type="button" id="btnGetControl" value="getControl" syn-events="['click']" />
    <input type="button" id="btnDataRefresh" value="dataRefresh" syn-events="['click']" />
</div>

'use strict';
let $dropdownchecklist = {
    event: {
        btnGetValue_click() {
            syn.$l.eventLog('btnGetValue_click', JSON.stringify(syn.uicontrols.$multiselect.getValue('ddlFileExtension')));
        },

        btnSetValue_click() {
            syn.uicontrols.$multiselect.setValue('ddlFileExtension', ['02', '05']);
        },

        btnClear_click() {
            syn.uicontrols.$multiselect.clear('ddlFileExtension');
        },

        btnLoadData_click() {
            var dataSource = {
                CodeColumnID: 'CodeID',
                ValueColumnID: 'CodeValue',
                DataSource: [
                    {
                        CodeID: '0',
                        CodeValue: '남자'
                    },
                    {
                        CodeID: '1',
                        CodeValue: '여자'
                    },
                    {
                        CodeID: '2',
                        CodeValue: '공개안함'
                    }
                ]
            };

            syn.uicontrols.$multiselect.loadData('ddlFileExtension', dataSource, true);
        },

        btnControlReload_click() {
            syn.uicontrols.$multiselect.controlReload('ddlFileExtension');
        },

        btnGetSelectedIndex_click() {
            syn.$l.eventLog('btnGetSelectedIndex_click', syn.uicontrols.$multiselect.getSelectedIndex('ddlFileExtension'));
        },

        btnSetSelectedIndex_click() {
            syn.uicontrols.$multiselect.setSelectedIndex('ddlFileExtension', 3);
        },

        btnGetSelectedValue_click() {
            syn.$l.eventLog('btnGetSelectedValue_click', syn.uicontrols.$multiselect.getSelectedValue('ddlFileExtension'));
        },

        btnGetSelectedText_click() {
            syn.$l.eventLog('btnGetSelectedText_click', syn.uicontrols.$multiselect.getSelectedText('ddlFileExtension'));
        },

        btnSetSelectedValue_click() {
            syn.uicontrols.$multiselect.setSelectedValue('ddlFileExtension', '1');

            setTimeout(function () {
                var values = [];
                values.push('1');
                values.push('2');
                values.push('3');
                values.push('4');
                syn.uicontrols.$multiselect.setSelectedValue('ddlFileExtension', values);
            }, 10000);
        },

        btnSetSelectedText_click() {
            syn.$l.eventLog('btnSetSelectedText_click', syn.uicontrols.$multiselect.setSelectedText('ddlFileExtension', '중2'));

            setTimeout(function () {
                var values = [];
                values.push('초4');
                values.push('초5');
                values.push('초6');
                syn.uicontrols.$multiselect.setSelectedText('ddlFileExtension', values);
            }, 10000);
        },

        btnGetControl_click() {
            var picker = syn.uicontrols.$multiselect.getControl('ddlFileExtension');
        },

        btnDataRefresh_click() {
            syn.uicontrols.$multiselect.dataRefresh('ddlBusinessRank', {
                dataSourceID: 'ZCB001',
                parameters: '@CodeGroupID:CMM013;',
                local: false,
                toSynControl: false,
                required: true,
                selectedValue: ['2', '5', '7']
            });
        }
    }
}