ej2-javascript-samples/src/menu/api.js at master · jesusarockias/ej2-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/**
 * Menu API sample
 */

this.default = function() {
    //Menu datasource
    var data = [
        {
            header: 'Events',
            subItems: [
                { text: 'Conferences' },
                { text: 'Music' },
                { text: 'Workshops' }
            ]
        },
        {
            header: 'Movies',
            subItems: [
                { text: 'Now Showing' },
                { text: 'Coming Soon' }
            ]
        },
        {
            header: 'Directory',
            subItems: [
                { text: 'Media Gallery' },
                { text: 'Newsletters' }
            ]
        },
        {
            header: 'Queries',
            subItems: [
                { text: 'Our Policy' },
                { text: 'Site Map'},
                { text: '24x7 Support'}
            ]
        },
        { header: 'Services' }
    ];

    //Menu fields definition
    var menuFields = {
        text: ['header', 'text', 'value'],
        children: ['subItems', 'options']
    };

    //Menu initialization
    var menuObj = new ej.navigations.Menu({ items: data, fields: menuFields }, '#menu');

    //DropDownList initialization
    new ej.dropdowns.DropDownList(
    {
        value: 'Horizontal',
        popupHeight: '200px',
        change: function (args) {
            menuObj.orientation = args.value;
        }
    },
    '#ddl');
    var headerData = [{ text: 'Events' }, { text: 'Movies'}, { text: 'Directory' }, { text: 'Queries' }, { text: 'Services' }];

    //MultiSelect initialization
    new ej.dropdowns.MultiSelect(
    {
        dataSource: headerData,
        popupHeight: '250px',
        width: '160px',
        mode: 'CheckBox',
        allowFiltering: false,
        placeholder: 'Select item',
        showDropDownIcon: true,
        change: function (args) {
            if (args.value) {
                menuObj.enableItems(['Events', 'Movies', 'Directory', 'Queries', 'Services'], true);
                menuObj.enableItems(args.value, false);
            }
        }
    },
    '#enableDisable');

    //CheckBox initialization
    new ej.buttons.CheckBox(
    {
        checked: false,
        change: function (args) {
            menuObj.showItemOnClick = args.checked;
        }
    },
    '#show-btn');
};