devextreme-dropdownbox-search-in-treelist/ASP.NET Core/Views/Home/Index.cshtml at 26.1.2+ · DevExpress-Examples/devextreme-dropdownbox-search-in-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
@using ASP_NET_Core.Models
    <div class="row">
        <p>DropDownBox with search and embedded TreeList</p>
        <div>
        @(Html.DevExtreme().DropDownBox()
            .ID("treeBox")
            .ShowClearButton(true)
            .Width("40vw")
            .Value(22)
            .AcceptCustomValue(true)
            .OpenOnFieldClick(false)
            .ValueChangeEvent("")
            .Height("100%")
            .ValueExpr("Task_ID")
            .DisplayExpr(new JS("displayExpr"))
            .DataSource(d => d.Mvc()
                .Controller("SampleData")
                .LoadAction("GetTasks")
                .Key("Task_ID")
            )
            .OnInput("dropDownBoxOnInput")
            .OnOpened("dropDownBoxOnOpened")
            .OnOptionChanged("dropDownBoxOnOptionChanged")
            .OnValueChanged("dropDownBoxOnValueChanged")
            .OnKeyDown("dropDownBoxOnKeyDown")
            .OnClosed("dropDownBoxOnClosed")
            .ContentTemplate(@<text>
                @(Html.DevExtreme().TreeList()
                    .DataSource(d => d.Mvc()
                        .Controller("SampleData")
                        .LoadAction("GetTasks")
                        .Key("Task_ID")
                    )
                    .DataSourceOptions(o => o.PostProcess("postProcess"))
                    .ParentIdExpr("Task_Parent_ID")
                    .HasItemsExpr("Has_Items")
                    .RemoteOperations(r => r.Filtering(true).Sorting(true).Grouping(true))
                    .ColumnAutoWidth(true)
                    .WordWrapEnabled(true)
                    .ShowBorders(true)
                    .Height(400)
                    .Width("100%")
                    .FocusedRowEnabled(true)
                    .FocusedRowKey(new JS("component.option('value')"))
                    .Selection(s => s.Mode(SelectionMode.Single))
                    .SelectedRowKeys(new JS("[component.option('value')]"))
                    .Scrolling(s => s.Mode(TreeListScrollingMode.Virtual))
                    .OnContentReady("treeListOnContentReady")
                    .OnFocusedRowChanged("treeListOnFocusedRowChanged")
                    .OnKeyDown("treeListOnKeyDown")
                    .OnSelectionChanged("treeListOnSelectionChanged")
                    .OnInitialized("treeListOnInitialized")
                    .Columns(c => {
                        c.Add().DataField("Task_ID");
                        c.Add().DataField("Task_Assigned_Employee_ID")
                            .Caption("Employee")
                            .MinWidth(120)
                            .Lookup(l => l
                                .DataSource(ds => ds.Mvc()
                                    .Controller("SampleData")
                                    .LoadAction("GetEmployees")
                                )
                                .ValueExpr("ID")
                                .DisplayExpr("Name")
                            );
                        c.Add().DataField("Task_Subject").Width(300);
                        c.Add().DataField("Task_Start_Date").Caption("Start Date").DataType(GridColumnDataType.Date);
                        c.Add().DataField("Task_Status").Caption("Status");
                        c.Add().DataField("Task_Due_Date").Caption("Due Date").DataType(GridColumnDataType.Date);
                    })
                )
            </text>)
        )
        </div>
    </div>

    <div class="options">
        <div class="caption">Search Options</div>
        <div class="option">
            <div>Search Expression</div>
            @(Html.DevExtreme().SelectBox()
                .ID("searchExprOption")
                .DataSource(new[] {
                    new { Name = "'Employee'", Value = "Employee" },
                    new { Name = "['Employee','Task_ID']", Value = "Employee,Task_ID" },
                    new { Name = "['Employee','Task_Subject']", Value = "Employee,Task_Subject" }
                })
                .DisplayExpr("Name")
                .ValueExpr("Value")
                .Value("Employee")
                .OnValueChanged("onSearchExprChanged")
            )
        </div>
        <div class="option">
            <div>Search Timeout</div>
            @(Html.DevExtreme().NumberBox()
                .ID("searchTimeoutOption")
                .Min(0)
                .Max(10000)
                .Value(1000)
                .ShowSpinButtons(true)
                .Step(100)
                .OnValueChanged("onSearchTimeoutChanged")
            )
        </div>
    </div>

<script src="~/js/drop-down-box.js"></script>