Wednesday, December 9, 2015

Multi Selection Dropdown in Dojo

CSS:
------

  <link rel="stylesheet" href="@Url.Content("~/Dojo/dojox/form/resources/CheckedMultiSelect.css")" media="screen">

Html:
------

<div id="Departments"></div>

Script
------
 var departmentsStore = new Memory({
                idProperty: "id",
                data: []
            });

    @foreach (var item in Model.Departments)
            {
                <text>
                departmentsStore.put({ type: 'options', id: '@item.DepartmentID', text: '@item.Name' });
                </text>
            }

 var dataStore = new DataStore({
                    objectStore: departmentsStore,
                    labelProperty: "text"
                });

  var MyCheckedMultiSelect = declare(CheckedMultiSelect, {

                    startup: function () {
                        this.inherited(arguments);
                        setTimeout(lang.hitch(this, function () {
                            this.dropDownButton.set("label", this.label);
                        }));
                    },

                    _updateSelection: function () {
                        this.inherited(arguments);
                        if (this.dropDown && this.dropDownButton) {
                            var label = "";
                            array.forEach(this.options, function (option) {
                                if (option.selected) {
                                    label += (label.length ? ", " : "") + option.label;
                                }
                            });

                            this.dropDownButton.set("label", label.length ? label : this.label);
                        }
                    }

                });

                var checkedDepartmentMultiSelect = new MyCheckedMultiSelect({
                    dropDown: true,
                    multiple: true,
                    label: "Select Departments",
                    store: dataStore
                }, "Departments");
                checkedDepartmentMultiSelect.startup();

No comments:

Post a Comment