getting-started-with-devextreme-treelist/jQuery/src/index.js at 26.1.3+ · DevExpress-Examples/getting-started-with-devextreme-treelist · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
$(() => {
  const treeList = $('#tree-list').dxTreeList({
    dataSource: employees,
    rootValue: -1,
    keyExpr: 'ID',
    parentIdExpr: 'HeadID',
    autoExpandAll: true,
    allowColumnReordering: true,
    allowColumnResizing: true,
    columnAutoWidth: true,
    columnFixing: {
      enabled: true,
    },
    columnChooser: { enabled: true },
    columns: [{
      dataField: 'FullName',
      validationRules: [{
        type: 'required',
      }],
      fixed: true,
    }, {
      dataField: 'Position',
      validationRules: [{
        type: 'required',
      }],
    }, {
      dataField: 'BirthDate',
      dataType: 'date',
      width: 100,
      validationRules: [{
        type: 'required',
      }],
    }, {
      dataField: 'HireDate',
      dataType: 'date',
      width: 100,
      validationRules: [{
        type: 'required',
      }],
    }, 'City', {
      dataField: 'State',
      validationRules: [{
        type: 'required',
      }],
    }, {
      dataField: 'Email',
      visible: false,
    }, 'MobilePhone', 'Skype'],
    filterRow: { visible: true },
    searchPanel: { visible: true },
    sorting: { mode: 'multiple' },
    editing: {
      mode: 'popup',
      allowUpdating: true,
      allowDeleting: true,
      allowAdding: true,
    },
    selection: { mode: 'single' },
    onSelectionChanged(e) {
      e.component.byKey(e.currentSelectedRowKeys[0]).done((employee) => {
        if (employee) {
          $('#selected-employee').text(`Selected employee: ${employee.FullName}`);
        }
      });
    },
    toolbar: {
      items: [
        {
          location: 'after',
          widget: 'dxButton',
          options: {
            text: 'Collapse All',
            width: 136,
            onClick(e) {
              const expanding = e.component.option('text') === 'Expand All';
              treeList.option({
                autoExpandAll: expanding,
                expandedRowKeys: [],
              });
              e.component.option('text', expanding ? 'Collapse All' : 'Expand All');
            },
          },
        },
        {
          name: 'addRowButton',
          showText: 'always',
        },
        'exportButton',
        'columnChooserButton',
        'searchPanel',
      ],
    },
    rowDragging: {
      allowDropInsideItem: true,
      allowReordering: true,
      onDragChange(e) {
        const visibleRows = treeList.getVisibleRows();
        const sourceNode = treeList.getNodeByKey(e.itemData.ID);
        let targetNode = visibleRows[e.toIndex].node;

        while (targetNode && targetNode.data) {
          if (targetNode.data.ID === sourceNode.data.ID) {
            e.cancel = true;
            break;
          }
          targetNode = targetNode.parent;
        }
      },
      onReorder(e) {
        const visibleRows = e.component.getVisibleRows();
        const sourceData = e.itemData;
        const targetData = visibleRows[e.toIndex].data;

        if (e.dropInsideItem) {
          e.itemData.HeadID = targetData.ID;
        } else {
          const sourceIndex = employees.indexOf(sourceData);
          let targetIndex = employees.indexOf(targetData);

          if (sourceData.HeadID !== targetData.HeadID) {
            sourceData.HeadID = targetData.HeadID;
            if (e.toIndex > e.fromIndex) {
              targetIndex += 1;
            }
          }
          employees.splice(sourceIndex, 1);
          employees.splice(targetIndex, 0, sourceData);
        }
        e.component.refresh();
      },
    },
    paging: {
      enabled: true,
      pageSize: 12,
    },
    height: 800,
    scrolling: {
      mode: 'standard'
    }
  }).dxTreeList('instance');
});