Skip to content

Commit

Permalink
React: Treelist transfer to functional (#2768)
Browse files Browse the repository at this point in the history 
* React: Treelist transfer to functional

* code refactoring

* code refactoring (part 2) - replace onValueChanged -> onValueChange

---------

Co-authored-by: Alyar <>
  • Loading branch information
@ivanblinov2k17
ivanblinov2k17 authored Sep 1, 2023
1 parent 02b4621 commit e607148
Show file tree
Hide file tree
Showing 30 changed files with 1,300 additions and 1,566 deletions.
44 changes: 20 additions & 24 deletions JSDemos/Demos/TreeList/Adaptability/React/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,25 @@ import { employees } from './data.js';

const expandedRowKeys = [1];

class App extends React.Component {
render() {
return (
<TreeList
id="employees"
dataSource={employees}
showBorders={true}
columnHidingEnabled={true}
showRowLines={true}
defaultExpandedRowKeys={expandedRowKeys}
keyExpr="ID"
parentIdExpr="Head_ID"
>
<Column dataField="Title" caption="Position" />
<Column dataField="Full_Name" />
<Column dataField="City" />
<Column hidingPriority={0} dataField="State" />
<Column hidingPriority={1} dataField="Mobile_Phone" />
<Column hidingPriority={2} dataField="Hire_Date" dataType="date" />
<ColumnChooser enabled={true} mode="select" />
</TreeList>
);
}
}
const App = () => (
<TreeList
id="employees"
dataSource={employees}
showBorders={true}
columnHidingEnabled={true}
showRowLines={true}
defaultExpandedRowKeys={expandedRowKeys}
keyExpr="ID"
parentIdExpr="Head_ID"
>
<Column dataField="Title" caption="Position" />
<Column dataField="Full_Name" />
<Column dataField="City" />
<Column hidingPriority={0} dataField="State" />
<Column hidingPriority={1} dataField="Mobile_Phone" />
<Column hidingPriority={2} dataField="Hire_Date" dataType="date" />
<ColumnChooser enabled={true} mode="select" />
</TreeList>
);

export default App;
114 changes: 55 additions & 59 deletions JSDemos/Demos/TreeList/BatchEditing/React/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,65 +12,61 @@ const statuses = [
'Completed',
];

class App extends React.Component {
render() {
return (
<div id="tree-list-demo">
<TreeList
id="tasks"
dataSource={tasks}
columnAutoWidth={true}
wordWrapEnabled={true}
showBorders={true}
keyExpr="Task_ID"
parentIdExpr="Task_Parent_ID"
onInitNewRow={this.onInitNewRow}
>
<Editing
allowAdding={true}
allowUpdating={true}
allowDeleting={true}
mode="batch" />
<Column
minWidth={250}
dataField="Task_Subject">
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Assigned_Employee_ID"
caption="Assigned">
<Lookup
dataSource={employees}
valueExpr="ID"
displayExpr="Name" />
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Status"
caption="Status">
<Lookup
dataSource={statuses} />
</Column>
<Column
dataField="Task_Start_Date"
caption="Start Date"
dataType="date" />
<Column
dataField="Task_Due_Date"
caption="Due Date"
dataType="date" />
</TreeList>
</div>
);
}
const onInitNewRow = (e) => {
e.data.Task_Status = 'Not Started';
e.data.Task_Start_Date = new Date();
e.data.Task_Due_Date = new Date();
};

onInitNewRow(e) {
e.data.Task_Status = 'Not Started';
e.data.Task_Start_Date = new Date();
e.data.Task_Due_Date = new Date();
}
}
const App = () => (
<div id="tree-list-demo">
<TreeList
id="tasks"
dataSource={tasks}
columnAutoWidth={true}
wordWrapEnabled={true}
showBorders={true}
keyExpr="Task_ID"
parentIdExpr="Task_Parent_ID"
onInitNewRow={onInitNewRow}
>
<Editing
allowAdding={true}
allowUpdating={true}
allowDeleting={true}
mode="batch" />
<Column
minWidth={250}
dataField="Task_Subject">
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Assigned_Employee_ID"
caption="Assigned">
<Lookup
dataSource={employees}
valueExpr="ID"
displayExpr="Name" />
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Status"
caption="Status">
<Lookup
dataSource={statuses} />
</Column>
<Column
dataField="Task_Start_Date"
caption="Start Date"
dataType="date" />
<Column
dataField="Task_Due_Date"
caption="Due Date"
dataType="date" />
</TreeList>
</div>
);

export default App;
115 changes: 55 additions & 60 deletions JSDemos/Demos/TreeList/CellEditing/React/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,65 +12,60 @@ const statuses = [
'Completed',
];

class App extends React.Component {
render() {
return (
<div id="tree-list-demo">
<TreeList
id="tasks"
dataSource={tasks}
columnAutoWidth={true}
wordWrapEnabled={true}
showBorders={true}
keyExpr="Task_ID"
parentIdExpr="Task_Parent_ID"
onInitNewRow={this.onInitNewRow}
>
<Editing
allowAdding={true}
allowUpdating={true}
allowDeleting={true}
mode="cell" />
<Column
minWidth={250}
dataField="Task_Subject">
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Assigned_Employee_ID"
caption="Assigned">
<Lookup
dataSource={employees}
valueExpr="ID"
displayExpr="Name" />
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Status"
caption="Status">
<Lookup
dataSource={statuses} />
</Column>
<Column
dataField="Task_Start_Date"
caption="Start Date"
dataType="date" />
<Column
dataField="Task_Due_Date"
caption="Due Date"
dataType="date" />
</TreeList>
</div>
);
}

onInitNewRow(e) {
e.data.Task_Status = 'Not Started';
e.data.Task_Start_Date = new Date();
e.data.Task_Due_Date = new Date();
}
}
const onInitNewRow = (e) => {
e.data.Task_Status = 'Not Started';
e.data.Task_Start_Date = new Date();
e.data.Task_Due_Date = new Date();
};
const App = () => (
<div id="tree-list-demo">
<TreeList
id="tasks"
dataSource={tasks}
columnAutoWidth={true}
wordWrapEnabled={true}
showBorders={true}
keyExpr="Task_ID"
parentIdExpr="Task_Parent_ID"
onInitNewRow={onInitNewRow}
>
<Editing
allowAdding={true}
allowUpdating={true}
allowDeleting={true}
mode="cell" />
<Column
minWidth={250}
dataField="Task_Subject">
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Assigned_Employee_ID"
caption="Assigned">
<Lookup
dataSource={employees}
valueExpr="ID"
displayExpr="Name" />
<RequiredRule />
</Column>
<Column
minWidth={120}
dataField="Task_Status"
caption="Status">
<Lookup
dataSource={statuses} />
</Column>
<Column
dataField="Task_Start_Date"
caption="Start Date"
dataType="date" />
<Column
dataField="Task_Due_Date"
caption="Due Date"
dataType="date" />
</TreeList>
</div>
);

export default App;
Loading

0 comments on commit e607148

Please sign in to comment.