JavaScript/jQuery TreeList Options

$("#treeListContainer").dxTreeList("refresh");
// ===== or =====
const treeListDataSource = $("#treeListContainer").dxTreeList("getDataSource");
treeListDataSource.reload();

import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    refreshData () {
        this.treeList.instance.refresh();
        // ===== or =====
        const treeListDataSource = this.treeList.instance.getDataSource();
        treeListDataSource.reload();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<template>
    <DxTreeList :ref="treeListRefKey">
        <!-- ... -->
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

const treeListRefKey = "my-tree-list";

export default {
    components: {
        DxTreeList
    },
    data() {
        return {
            treeListRefKey
        }
    },
    methods: {
        refreshData() {
            this.treeList.refresh();
            // ===== or =====
            const treeListDataSource = this.treeList.getDataSource();
            treeListDataSource.reload();
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.treeListRef = React.createRef();

        this.refreshData = () => {
            this.treeList.refresh();
            // ===== or =====
            const treeListDataSource = this.treeList.getDataSource();
            treeListDataSource.reload();
        }
    }

    get treeList() {
        return this.treeListRef.current.instance();
    }

    render() {
        return (
            <TreeList ref={this.treeListRef}>
                {/* ... */ }
            </TreeList>
        );
    }
}
export default App;

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Title",
            caption: "Position"
        }, {
            dataField: "FullName",
            width: 300
        }, 
            "CompanyName",
            "City"
        ]
    });
});

<template>
    <DxTreeList ... >
        <DxColumn
            data-field="Title"
            caption="Position"
        />
        <DxColumn
            data-field="FullName"
            :width="300"
        />
        <DxColumn
            data-field="CompanyName"
        />
        <DxColumn
            data-field="City"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    // ...
}
</script>

import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

export default function App() {
    return (
        <TreeList>
            <Column
                dataField="Title"
                caption="Position"
            />
            <Column
                dataField="FullName"
                width={300}
            />
            <Column
                dataField="CompanyName"
            />
            <Column
                dataField="City"
            />
        </TreeList>
    );
}

$(function(){
    $("#treeList").dxTreeList({
        // ...
        customizeColumns: function (columns) {
            columns[0].width = 100;
            columns[1].width = 210;
        }
    })
});

<template>
    <DxTreeList ...
        :customize-columns="customizeColumns"> 
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    // ... 
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    methods: {
        customizeColumns(columns) {
            columns[0].width = 100;
            columns[1].width = 210;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    // ...
} from 'devextreme-react/tree-list';

class App extends React.Component {
    customizeColumns = (columns) => {
        columns[0].width = 100;
        columns[1].width = 210;
    }

    render() {
        return (
            <TreeList ...
                customizeColumns={this.customizeColumns}
            />
        );
    }
}
export default App;

@(Html.DevExtreme().TreeList()
    // ...
    .CustomizeColumns("customizeColumns")
)
<script>
    function customizeColumns(columns) {
        columns[0].width = 100;
        columns[1].width = 210;
    }
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    // ...
} from 'devextreme-react/tree-list';

class App extends React.Component {
    customizeColumns = (columns) => {
        // ...
        // This code does not work
        // columns[0].cellRender = cellRender;
    }

    render() {
        return (
            <TreeList ...
                customizeColumns={this.customizeColumns}
            >
                <!-- ... -->
                <Column
                    dataField="Picture"
                    cellRender={cellRender} <!-- This code works correctly -->
                />
            </TreeList>
        );
    }
}

function cellRender(data) {
    return <img src={data.value} />;
}

export default App;

$(function(){
    $("#treeListContainer").dxTreeList({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxTreeList ...
        :element-attr="treeListAttributes">
    </DxTreeList>
</template>

<script>
import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    data() {
        return {
            treeListAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    treeListAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <TreeList ...
                elementAttr={this.treeListAttributes}>
            </TreeList>
        );
    }
}
export default App;

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        filterSyncEnabled: true,
        headerFilter: { visible: true },
        filterValue: ["ID", "anyof", [500, 700]], 
    })
});

<template>
    <DxTreeList ...
        :filter-sync-enabled="true"
        :filter-value="filterValue"> 
        <DxHeaderFilter :visible="true" />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxHeaderFilter,
    // ...
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxHeaderFilter,
        // ...
    },
    data() {
        return {
            filterValue: ['ID', 'anyof', [500, 700]]
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    HeaderFilter,
    // ...
} from 'devextreme-react/tree-list';

const filterValue = ['ID', 'anyof', [500, 700]];

class App extends React.Component {
    render() {
        return (
            <TreeList ...
                filterSyncEnabled={true}
                defaultFilterValue={filterValue}>
                <HeaderFilter visible={true} />
            </TreeList>
        );
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    // ...
    .FilterSyncEnabled(true)
    .HeaderFilter(hf => hf.Visible(true))
    .FilterValue("['ID', 'anyof', [500, 700]]")
)

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        headerFilter: { visible: true },
        filterValue: ["ID", "anyof", [500, 700]], // Filter intervals are 500-600 and 700-800
        columns: [{
            dataField: "ID",
            dataType: "number",
            headerFilter: { groupInterval: 100 }
        },
        // ...
        ]
    })
});

<template>
    <DxTreeList ...
        <!-- Filter intervals are 500-600 and 700-800 -->
        :filter-value="filterValue">
        <DxHeaderFilter :visible="true" />
        <DxColumn
            data-field="ID"
            data-type="number">
            <DxColumnHeaderFilter :group-interval="100" />
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxHeaderFilter,
    DxColumnHeaderFilter,
    // ...
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxHeaderFilter,
        DxColumnHeaderFilter,
        // ...
    },
    data() {
        return {
            filterValue: ['ID', 'anyof', [500, 700]]
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    HeaderFilter,
    ColumnHeaderFilter,
    // ...
} from 'devextreme-react/tree-list';

const filterValue = ['ID', 'anyof', [500, 700]];

class App extends React.Component {
    render() {
        return (
            <TreeList ...
                {/* Filter intervals are 500-600 and 700-800 */}
                defaultFilterValue={filterValue}>
                <HeaderFilter visible={true} />
                <Column
                    dataField="ID"
                    dataType="number">
                    <ColumnHeaderFilter groupInterval={100} />
                </Column>
            </TreeList>
        );
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    // ...
    // Filter intervals are 500-600 and 700-800
    .HeaderFilter(headerFilter => headerFilter.Visible(true))
    .FilterValue("['ID', 'anyof', [500, 700]]")
    .Columns(columns => {
        columns.AddFor(m => m.ID)
            .DataType(GridColumnDataType.Number)
            .HeaderFilter(hf => hf.GroupInterval(100));
        // ...
    })
)

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onAdaptiveDetailRowPreparing: function(e) {
            e.formOptions.colCount = 2;
            e.formOptions.colCountByScreen = {
                xs: 2
            }
            e.formOptions.labelLocation = 'left';
        }
    })
})

import { useCallback } from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

export default function App() {
    const onAdaptiveDetailRowPreparing = useCallback((e) => {
        e.formOptions.colCount = 2;
        e.formOptions.colCountByScreen = {
            xs: 2
        }
        e.formOptions.labelLocation = 'left';
    }, []);

    return (
        <TreeList
            onAdaptiveDetailRowPreparing={onAdaptiveDetailRowPreparing}
        />
    );
}

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        repaintChangesOnly: true,
        onCellPrepared: function(e) {
            if(e.rowType === "data" && e.column.dataField === "ProductName") {
                e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
                // Tracks the `Amount` data field
                e.watch(function() {
                    return e.data.Amount;
                }, function() {
                    e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
                })
            }
        }
    })
})

<template>
    <DxTreeList
        :repaint-changes-only="true"
        @cell-prepared="onCellPrepared"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    methods: {
       onCellPrepared(e) {
            if(e.rowType === "data" && e.column.dataField === "ProductName") {
                e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
                // Tracks the `Amount` data field
                e.watch(function() {
                    return e.data.Amount;
                }, function() {
                    e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
                })
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    // ...
    render() {
        return (
            <TreeList
                 repaintChangesOnly={true}
                 onCellPrepared={this.onCellPrepared}
            />
        );
    }
    onCellPrepared = (e) => {
        if(e.rowType === "data" && e.column.dataField === "ProductName") {
            e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
            // Tracks the `Amount` data field
            e.watch(function() {
                return e.data.Amount;
            }, function() {
                e.cellElement.style.color = e.data.Amount >= 10000 ? "green" : "red";
            })
        }
    }
}
export default App;

@(Html.DevExtreme().TreeList()
    .ID("treeListContainer")
    // ...
    .RepaintChangesOnly(true)
    .OnCellPrepared("treeList_cellPrepared_handler")
)
<script>
    function treeList_cellPrepared_handler(e) {
        if (e.rowType === "data" && e.column.dataField === "ProductName") {
            e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
            // Tracks the `Amount` data field
            e.watch(function() {
                return e.data.Amount;
            }, function() {
                e.cellElement.css("color", e.data.Amount >= 10000 ? "green" : "red");
            })
        }
    }
</script>

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onContextMenuPreparing: function(e) { 
            if (e.target == "header") {
                // e.items can be undefined
                if (!e.items) e.items = [];

                // Add a custom menu item
                e.items.push({
                    text: "Log Column Caption",
                    onItemClick: function() {
                        console.log(e.column.caption);
                    }
                });
            } 
        }
    });
});

<template>
    <DxTreeList ...
        @context-menu-preparing="addMenuItems">
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    data() {
        return {
            // ...
        }
    },
    methods: {
        addMenuItems(e) {
            if (e.target == 'header') {
                // e.items can be undefined
                if (!e.items) e.items = [];

                // Add a custom menu item
                e.items.push({
                    text: 'Log Column Caption',
                    onItemClick: () => {
                        console.log(e.column.caption);
                    }
                });
            } 
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    addMenuItems(e) {
        if (e.target == 'header') {
            // e.items can be undefined
            if (!e.items) e.items = [];

            // Add a custom menu item
            e.items.push({
                text: 'Log Column Caption',
                onItemClick: () => {
                    console.log(e.column.caption);
                }
            });
        }
    }

    render() {
        return (
            <TreeList ...
                onContextMenuPreparing={this.addMenuItems}>
            </TreeList>
        );
    }
}
export default App;

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onFocusedCellChanging: function (e) {
            if (e.newColumnIndex == e.prevColumnIndex) {
                e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0)
            }
        }
    });
});

<template>
    <DxTreeList ...
        @focused-cell-changing="onFocusedCellChanging"
    > 
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTreeList } from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    methods: {
        onFocusedCellChanging(e) {
            if (e.newColumnIndex == e.prevColumnIndex) {
                e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0);
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ...
                onFocusedCellChanging={this.onFocusedCellChanging}
            >
            </TreeList>
        );
    }

    onFocusedCellChanging(e) { 
        if (e.newColumnIndex == e.prevColumnIndex) {
            e.newColumnIndex = (e.newColumnIndex == 0 ? e.columns.length - 1 : 0);
        }
    }
}
export default App;

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.treeListInstance = e.component;
    }

    render() {
        return (
            <div>
                <TreeList onInitialized={this.saveInstance} />
            </div>
        );
    }
}

$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: [{
            ID: 1,
            hireDate: 1491821760000,
            position: "CTO"
        }, // ...
        ],
        columns: [ "ID", {
            dataField: "hireDate",
            dataType: "date"
        }, "position" ],
        onInitNewRow: function(e) {
            e.data.hireDate = new Date();
            e.promise = getDefaultData().done(function(data) {
                e.data.ID = data.ID;
                e.data.position = data.Position;
            });
        }
    });
    function getDefaultData() {
        var promise = $.ajax({
            // The URL returns { ID: 100, Position: "Programmer" }
            url: "https://www.mywebsite.com/api/getDefaultData", 
            dataType: "json"
        });
        return promise;
    } 
})

<template>
    <DxTreeList ...
        :data-source="employees"
        @init-new-row="initNewRow">
        <DxColumn data-field="ID" />
        <DxColumn data-field="hireDate" data-type="date" />
        <DxColumn data-field="position" />
    </DxTreeList>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';
import 'whatwg-fetch';

const employees = [{
    ID: 1,
    hireDate: 1491821760000,
    position: "CTO"
}, // ...
];

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    data() {
        employees
    },
    methods: {
        initNewRow(e) {
            e.data.hireDate = new Date();
            e.promise = this.getDefaultData().then(data => {
                e.data.ID = data.ID;
                e.data.position = data.Position;
            });
        }
        getDefaultData() {
            return fetch("https://www.mywebsite.com/api/getDefaultData")
                .then(response => response.json())
                .then((data) => {
                    // "data" is { ID: 100, Position: "Programmer" }
                    return data;
                })
                .catch(() => { throw 'Data Loading Error' });
        }
    }
};
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { TreeList, Column } from 'devextreme-react/tree-list';
import 'whatwg-fetch';

const employees = [{
    ID: 1,
    hireDate: 1491821760000,
    position: "CTO"
}, // ...
];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.onInitNewRow = this.onInitNewRow.bind(this);
        this.getDefaultData = this.getDefaultData.bind(this);
    }

    onInitNewRow(e) {
        e.promise = this.getDefaultData().then(data => {
            e.data.ID = data.ID;
            e.data.position = data.Position;
        });
        e.data.hireDate = new Date();
    }

    getDefaultData() {
        return fetch("https://www.mywebsite.com/api/getDefaultData")
            .then(response => response.json())
            .then((data) => {
                // "data" is { ID: 100, Position: "Programmer" }
                return data;
            }) 
            .catch(() => { throw 'Data Loading Error' });
    }

    render() {
        return (
            <TreeList ...
                dataSource={employees}
                onInitNewRow={this.onInitNewRow}>
                <Column dataField="ID" />
                <Column dataField="hireDate" dataType="date" />
                <Column dataField="position" />
            </TreeList>
        );
    }
}
export default App;

@(Html.DevExtreme().TreeList()
    .DataSource(new JS("employees"))
    .Columns(c => {
        c.Add().DataField("ID");
        c.Add().DataField("hireDate")
            .DataType(GridColumnDataType.Date);
        c.Add().DataField("position");
    })
    .OnInitNewRow("onInitNewRow")
)
<script type="text/javascript">
    var employees = [{
        ID: 1,
        hireDate: 1491821760000,
        position: "CTO"
    }, // ...
    ];
    function onInitNewRow(e) {
        e.data.hireDate = new Date();
        e.promise = getDefaultData().done(data => {
            e.data.ID = data.ID;
            e.data.position = data.Position;
        });
    }
    function getDefaultData() {
        let promise = $.ajax({
            // The URL returns { ID: 100, Position: "Programmer" }
            url: "https://www.mywebsite.com/api/getDefaultData",
            dataType: "json",
        });
        return promise;
    }
</script>

$(function() {
    $("#treeList").dxTreeList({
        // ...
        onKeyDown(e) {
            if (e.event.ctrlKey && e.event.key === "Q") {
                console.log("Ctrl + Q was pressed"); 
            }
        }
    });
});

<template>
    <DxTreeList ...
        @key-down="onKeyDown">            
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    },
    methods: {
        onKeyDown(e) {
            if (e.event.ctrlKey && e.event.key === "Q") {
                console.log("Ctrl + Q was pressed"); 
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ...
                onKeyDown={this.onKeyDown}>
            </TreeList>
        );
    }

    onKeyDown(e) {
        if (e.event.ctrlKey && e.event.key === "Q") {
            console.log("Ctrl + Q was pressed"); 
        }
    }
}
export default App;

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxTreeList ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxTreeList from 'devextreme-vue/tree-list'; 

export default { 
    components: { 
        DxTreeList
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import TreeList from 'devextreme-react/tree-list'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <TreeList ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function(){
    $("#treeListContainer").dxTreeList({
        // ...
        onRowInserting: function(e) {
            const deferred = $.Deferred();
            const promptPromise = DevExpress.ui.dialog.confirm("Are you sure?", "Confirm changes");
            promptPromise.done((dialogResult) => {
                if (dialogResult) {
                    $.ajax({
                        url: "https://url/to/your/validation/service",
                        dataType: "json",
                        data: e.newData,
                        success: function(validationResult) {
                            if (validationResult.errorText) {
                                deferred.reject(validationResult.errorText);
                            } else {
                                deferred.resolve(false);
                            }
                        },
                        error: function() {
                            deferred.reject("Data Loading Error");
                        },
                        timeout: 5000
                    });
                } else {
                    deferred.resolve(true);              
                }
            });
            e.cancel = deferred.promise();
        }
    })
})

<template>
    <DxTreeList ...
        @row-inserting="insertRow">
    </DxTreeList>
</template>
<script>
import DxTreeList, { ... } from 'devextreme-vue/tree-list';
import { confirm } from 'devextreme/ui/dialog';
// ...

export default {
    components: {
        DxTreeList,
        // ...
    },
    // ...
    methods: {
        insertRow(e) {
            const isCanceled = new Promise((resolve, reject) => {
                const promptPromise = confirm("Are you sure?", "Confirm changes");
                promptPromise.then((dialogResult) => {
                    if (dialogResult) {
                        let params = new HttpParams();
                        for (let key in e.newData) {
                            params = params.set(key, e.newData[key]);
                        }
                        fetch(`https://url/to/your/validation/service${params}`)
                            .then((validationResult) => {
                                if (validationResult.errorText) {
                                    reject(validationResult.errorText);
                                } else {
                                    resolve(false);
                                } 
                            });
                    } else {
                        return resolve(true);
                    }
                });
            });
            e.cancel = isCanceled;
        }
    },
};
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { confirm } from 'devextreme/ui/dialog';
import TreeList, { ... } from 'devextreme-react/tree-list';

function insertRow(e) {
    const isCanceled = new Promise((resolve, reject) => {
        const promptPromise = confirm("Are you sure?", "Confirm changes");
        promptPromise.then((dialogResult) => {
            if (dialogResult) {
                let params = new HttpParams();
                for (let key in e.newData) {
                    params = params.set(key, e.newData[key]);
                }
                fetch(`https://url/to/your/validation/service${params}`)
                    .then((validationResult) => {
                        if (validationResult.errorText) {
                            reject(validationResult.errorText);
                        } else {
                            resolve(false);
                        } 
                    });
            } else {
                return resolve(true);
            }
        });
    });
    e.cancel = isCanceled;
}

function App() {
    return (
        <TreeList ...
            onRowInserting={insertRow}>
            // ...
        </TreeList>
    );
}

export default App;

$(function(){
    $("#treeListContainer").dxTreeList({
        // ...
        onRowRemoving: function(e) {
            var deferred = $.Deferred();
            $.ajax({
                url: `https://url/to/your/validation/service/${e.key}`,
                success: function(validationResult) {
                    if (validationResult.errorText) {
                        deferred.reject(validationResult.errorText);
                    } else {
                        deferred.resolve(false);
                    }
                },
                error: function() {
                    deferred.reject("Data Loading Error");
                },
                timeout: 5000
            });
            e.cancel = deferred.promise();
        },
    })
})

<template>
    <DxTreeList ...
        @row-removing="validateRemove">
    </DxTreeList>
</template>
<script>
import DxTreeList, { ... } from 'devextreme-vue/tree-list';
// ...

export default {
    components: {
        DxTreeList,
        // ...
    },
    // ...
    methods: {
        validateRemove(e) {
            const isCanceled = new Promise((resolve, reject) => {
                fetch(`https://url/to/your/validation/service/${e.key}`)
                    .then((validationResult) => {
                        if (validationResult.errorText) {
                            reject(validationResult.errorText);
                        } else {
                            resolve(false);
                        }
                    });
            });
            e.cancel = isCanceled;
        }
    },
};
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, { ... } from 'devextreme-react/tree-list';

function validateRemove(e) {
    const isCanceled = new Promise((resolve, reject) => {
        fetch(`https://url/to/your/validation/service/${e.key}`)
            .then((validationResult) => {
                if (validationResult.errorText) {
                    reject(validationResult.errorText);
                } else {
                    resolve(false);
                }
            });
    });
    e.cancel = isCanceled;
}

function App() {
    return (
        <TreeList ...
            onRowRemoving={validateRemove}>
            // ...
        </TreeList>
    );
}

export default App;

$(function(){
    $("#treeListContainer").dxTreeList({
        // ...
        onRowUpdating: function(e) {
            const deferred = $.Deferred();
            const promptPromise = DevExpress.ui.dialog.confirm("Are you sure?", "Confirm changes");
            promptPromise.done((dialogResult) => {
                if (dialogResult) {
                    $.ajax({
                        url: "https://url/to/your/validation/service",
                        dataType: "json",
                        data: e.newData,
                        success: function(validationResult) {
                            if (validationResult.errorText) {
                                deferred.reject(validationResult.errorText);
                            } else {
                                deferred.resolve(false);
                            }
                        },
                        error: function() {
                            deferred.reject("Data Loading Error");
                        },
                        timeout: 5000
                    });
                } else {
                    deferred.resolve(true);              
                }
            });
            e.cancel = deferred.promise();
        }
    })
})

<template>
    <DxTreeList ...
        @row-updating="updateRow">
    </DxTreeList>
</template>
<script>
import DxTreeList, { ... } from 'devextreme-vue/tree-list';
import { confirm } from 'devextreme/ui/dialog';
// ...

export default {
    components: {
        DxTreeList,
        // ...
    },
    // ...
    methods: {
        updateRow(e) {
            const isCanceled = new Promise((resolve, reject) => {
                const promptPromise = confirm("Are you sure?", "Confirm changes");
                promptPromise.then((dialogResult) => {
                    if (dialogResult) {
                        let params = new HttpParams();
                        for (let key in e.newData) {
                            params = params.set(key, e.newData[key]);
                        }
                        fetch(`https://url/to/your/validation/service${params}`)
                            .then((validationResult) => {
                                if (validationResult.errorText) {
                                    reject(validationResult.errorText);
                                } else {
                                    resolve(false);
                                } 
                            });
                    } else {
                        return resolve(true);
                    }
                });
            });
            e.cancel = isCanceled;
        }
    },
};
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { confirm } from 'devextreme/ui/dialog';
import TreeList, { ... } from 'devextreme-react/tree-list';

function updateRow(e) {
    const isCanceled = new Promise((resolve, reject) => {
        const promptPromise = confirm("Are you sure?", "Confirm changes");
        promptPromise.then((dialogResult) => {
            if (dialogResult) {
                let params = new HttpParams();
                for (let key in e.newData) {
                    params = params.set(key, e.newData[key]);
                }
                fetch(`https://url/to/your/validation/service${params}`)
                    .then((validationResult) => {
                        if (validationResult.errorText) {
                            reject(validationResult.errorText);
                        } else {
                            resolve(false);
                        } 
                    });
            } else {
                return resolve(true);
            }
        });
    });
    e.cancel = isCanceled;
}

function App() {
    return (
        <TreeList ...
            onRowUpdating={updateRow}>
            // ...
        </TreeList>
    );
}

export default App;

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onRowValidating: function(e) {
            if(e.newData.Email) {
                e.promise = checkEmail(e.newData.Email)
                    .done(function(result) {
                        e.errorText = result.errorText;
                        e.isValid = result.isValid;
                    });
            }
        }
    });
});
function checkEmail(email) {
    return $.ajax({
        // The url returns { errorText: "The Email address you entered already exists.", isValid: false }
        url: "https://www.mywebsite.com/api/checkEmail",
        dataType: "json",
        data: { email: email }
    });
}

<template>
    <DxTreeList ...
        @row-validating="onRowValidating">
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';
import 'whatwg-fetch';

export default {
    components: {
        DxTreeList
    },
    // ...
    methods: {
        onRowValidating(e) {
            if(e.newData.Email) {
                e.promise = this.checkEmail(e.newData.Email)
                    .then((result: any) => {
                        // "result" is { errorText: "The Email address you entered already exists.", isValid: false }
                        e.errorText = result.errorText;
                        e.isValid = result.isValid;
                    });
            }
        },
        checkEmail(email) {
            let params = '?' + 'email=' + email;
            return fetch("https://www.mywebsite.com/api/checkEmail${params}");
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';
import 'whatwg-fetch';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.onRowValidating = this.onRowValidating.bind(this);
    }

    onRowValidating(e) {
        if(e.newData.Email) {
            e.promise = this.checkEmail(e.newData.Email)
                .then((result: any) => {
                    // "result" is { errorText: "The Email address you entered already exists.", isValid: false }
                    e.errorText = result.errorText;
                    e.isValid = result.isValid;
                });
        }
    }
    checkEmail(email) {
        let params = '?' + 'email=' + email;
        return fetch("https://www.mywebsite.com/api/checkEmail${params}");
    }

    render() {
        return (
            <TreeList ...
                onRowValidating={this.onRowValidating}>
            </TreeList>
        );
    }
}
export default App;

@(Html.DevExtreme().TreeList()
    // ...
    .OnRowValidating("onRowValidating")
)

<script type="text/javascript">
    function onRowValidating(e) {
        if(e.newData.Email) {
            e.promise = checkEmail(e.newData.Email)
                .done(function(result) {
                    e.errorText = result.errorText;
                    e.isValid = result.isValid;
                });
        }
    }
    function checkEmail(email) {
        return $.ajax({
            // The url returns { errorText: "The Email address you entered already exists.", isValid: false }
            url: "https://www.mywebsite.com/api/checkEmail",
            dataType: "json",
            data: { email: email }
        });
    }
</script>

$(function() {
    $("#container").dxTreeList({
        // ...
        onToolbarPreparing: function(e) {
            let dataGrid = e.component;
            e.toolbarOptions.items.unshift({
                location: "after",
                widget: "dxButton",
                options: {
                    icon: "refresh",
                    onClick: function() {
                        dataGrid.refresh();
                    }
                }
            });
        }
    });
});