devextreme-tabpanel-customize-view-content/jQuery/src/index.js at 25.1.3+ · DevExpress-Examples/devextreme-tabpanel-customize-view-content · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
$(() => {
  $('#tabpanel-container').dxTabPanel({
    width: 800,
    items: [{
      title: 'Data Grid',
      icon: 'rowfield',
      template: (itemData, itemIndex, element) => {
        const dataGridDiv = $('<div>');
        dataGridDiv.appendTo(element);
        dataGridDiv.dxDataGrid({
          dataSource: customers,
          columns: ['CompanyName', 'City', 'State', 'Phone', 'Fax'],
        });
      },
    }, {
      title: 'Chart',
      icon: 'chart',
      template: (itemData, itemIndex, element) => {
        const chartDiv = $('<div>');
        chartDiv.appendTo(element);
        chartDiv.dxChart({
          dataSource: populationData,
          series: {
            type: 'bar',
          },
          title: 'World Population by Decade',
        });
      },
    }, {
      title: 'Form',
      icon: 'floppy',
      template: (itemData, itemIndex, element) => {
        const formDiv = $('<div>');
        formDiv.appendTo(element);
        formDiv.dxForm({
          colCount: 2,
          formData: employee,
          items: formItems,
        }).dxForm('instance');
      },
    }, {
      title: 'Scheduler',
      icon: 'event',
      badge: '1',
      template: (itemData, itemIndex, element) => {
        const schedulerDiv = $('<div>');
        schedulerDiv.appendTo(element);
        schedulerDiv.dxScheduler({
          dataSource: data,
          views: ['week', 'month'],
          currentView: 'week',
          currentDate: new Date(2017, 4, 25),
          startDayHour: 9,
          height: 600,
        });
      },
    }],
    animationEnabled: true,
    swipeEnabled: true,
  }).dxTabPanel('instance');

  const formItems = [{
    dataField: 'FirstName',
    editorOptions: {
      disabled: true,
    },
  }, {
    dataField: 'Position',
    editorType: 'dxSelectBox',
    editorOptions: {
      items: positions,
      value: '',
    },
    validationRules: [{
      type: 'required',
      message: 'Position is required',
    }],
  }, {
    dataField: 'LastName',
    editorOptions: {
      disabled: true,
    },
  }, {
    dataField: 'HireDate',
    editorType: 'dxDateBox',
    editorOptions: {
      value: null,
      width: '100%',
    },
    validationRules: [{
      type: 'required',
      message: 'Hire date is required',
    }],
  }, {
    dataField: 'BirthDate',
    editorType: 'dxDateBox',
    editorOptions: {
      disabled: true,
      width: '100%',
    },
  }, 'Address', {
    colSpan: 2,
    dataField: 'Notes',
    editorType: 'dxTextArea',
    editorOptions: {
      height: 90,
    },
  }, {
    dataField: 'Phone',
    editorOptions: {
      mask: '+1 (X00) 000-0000',
      maskRules: { 'X': /[02-9]/ },
    },
  }, 'Email'];
});