getting-started-with-devextreme-tabpanel/jQuery/src/index.js at 25.1.3+ · DevExpress-Examples/getting-started-with-devextreme-tabpanel · 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
91
92
93
94
$(() => {
  const tabPanel = $('#tabPanel')
    .dxTabPanel({
      loop: true,
      animationEnabled: true,
      swipeEnabled: true,
      selectedIndex: 0,
      onSelectionChanged(e) {
        const selectedTab = e.addedItems[0].title;
        tabSwitcherRadioGroup.option('value', selectedTab);
      },
      items: [
        {
          title: 'Employee',
          icon: 'floppy',
          template() {
            return $("<div id='form'>").dxForm({
              formData: employeeData,
              items: [
                {
                  dataField: 'name',
                  label: {
                    template: labelTemplate('user'),
                  },
                },
                {
                  dataField: 'position',
                  label: {
                    template: labelTemplate('group'),
                  },
                },
                'hireDate',
                {
                  dataField: 'officeNumber',
                  label: {
                    template: labelTemplate('info'),
                  },
                },
              ],
            });
          },
        },
        {
          title: 'Notes',
          icon: 'comment',
          template() {
            return $("<div id='textArea'>").dxTextArea({
              value: employeeData.notes,
            });
          },
        },
        {
          title: 'Role',
          icon: 'isnotblank',
          badge: 'new',
          template() {
            return $("<div id='radioGroup'>").dxRadioGroup({
              items: employeeData.roles,
              value: employeeData.roles[0],
            });
          },
        },
      ],
    })
    .dxTabPanel('instance');

  const tabSwitcherRadioGroup = $('#radioGroupSwitcher')
    .dxRadioGroup({
      items: tabNames,
      value: tabNames[0],
      layout: 'horizontal',
      onValueChanged(e) {
        const selectedTabIndex = tabNames.indexOf(e.value);
        tabPanel.option('selectedIndex', selectedTabIndex);
      },
    })
    .dxRadioGroup('instance');

  function labelTemplate(iconName) {
    return (data) => $(`<div><i class='dx-icon dx-icon-${iconName}'></i>${data.text}</div>`);
  }
});

const employeeData = {
  name: 'John Heart',
  position: 'CEO',
  hireDate: new Date(2012, 4, 13),
  officeNumber: 901,
  notes:
        'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.',
  roles: ['Chief Officer', 'Administrator', 'Manager'],
};

const tabNames = ['Employee', 'Notes', 'Role'];