React UI Widgets

$(function () {
    $("#accordion").dxAccordion({
        dataSource: [
            { title: "Panel 1 Title", text: "Panel 1 Text Content" },
            { title: "Panel 2 Title", text: "Panel 2 Text Content" }
        ],
        collapsible: true,
        multiple: true
    });
});

<div id="accordion"></div>

<dx-accordion
    [dataSource]="accordionData"
    [collapsible]="true"
    [multiple]="true">
</dx-accordion>

import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
    accordionData = [
        { title: "Panel 1 Title", text: "Panel 1 Text Content" },
        { title: "Panel 2 Title", text: "Panel 2 Text Content" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxAccordionModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-accordion="{
        dataSource: accordionData,
        collapsible: true,
        multiple: true
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.accordionData = [
            { title: "Panel 1 Title", text: "Panel 1 Text Content" },
            { title: "Panel 2 Title", text: "Panel 2 Text Content" }
        ];
    });

<div data-bind="dxAccordion: {
    dataSource: accordionData,
    collapsible: true,
    multiple: true
}"></div>

var viewModel = {
    accordionData: [
        { title: "Panel 1 Title", text: "Panel 1 Text Content" },
        { title: "Panel 2 Title", text: "Panel 2 Text Content" }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Accordion()
    .ID("accordion")
    .DataSource(new[] {
        new { title = "Panel 1 Title", text = "Panel 1 Text Content" },
        new { title = "Panel 2 Title", text = "Panel 2 Text Content" }
    })
    .Collapsible(true)
    .Multiple(true)
)

@(Html.DevExtreme().Accordion() _
    .ID("accordion") _
    .DataSource({
        New With { .title = "Panel 1 Title", .text = "Panel 1 Text Content" },
        New With { .title = "Panel 2 Title", .text = "Panel 2 Text Content" }
    }) _
    .Collapsible(True) _
    .Multiple(True)
)

$(function () {
    $("#actionSheet").dxActionSheet({
        dataSource: [
            { text: "Command 1" },
            { text: "Command 2" },
            { text: "Command 3" },
            { text: "Command 4" }
        ],
        visible: true,
        onItemClick: function (e) {
            alert("The " + e.itemData.text + " button was clicked");
        }
    });
});

<div id="actionSheet"></div>

<dx-action-sheet
    [dataSource]="actionSheetData"
    [visible]="true"
    (onItemClick)="showAlert($event)">
</dx-action-sheet>

import { DxActionSheetModule } from "devextreme-angular";
// ...
export class AppComponent {
    actionSheetData = [
        { text: "Command 1" },
        { text: "Command 2" },
        { text: "Command 3" },
        { text: "Command 4" }
    ];
    showAlert (e) {
        alert("The " + e.itemData.text + " button was clicked");
    }
}
@NgModule({
    imports: [
        // ...
        DxActionSheetModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-action-sheet="{
        dataSource: actionSheetData,
        visible: true,
        onItemClick: showAlert
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.actionSheetData = [
            { text: "Command 1" },
            { text: "Command 2" },
            { text: "Command 3" },
            { text: "Command 4" }
        ];
        $scope.showAlert = function (e) {
            alert("The " + e.itemData.text + " button was clicked");
        };
    });

<div data-bind="dxActionSheet: {
    dataSource: actionSheetData,
    visible: true,
    onItemClick: function (e) {
        alert("The " + e.itemData.text + " button was clicked");
    }
}"></div>

var viewModel = {
    actionSheetData: [
        { text: "Command 1" },
        { text: "Command 2" },
        { text: "Command 3" },
        { text: "Command 4" }
    ]
};

ko.applyBindings(viewModel);

@(Html.DevExtreme().ActionSheet()
    .ID("actionSheet")
    .DataSource(new[] {
        new { text = "Command 1" },
        new { text = "Command 2" },
        new { text = "Command 3" },
        new { text = "Command 4" }
    })
    .Visible(true)
    .OnItemClick(@<text>
        function (e) {
            alert("The " + e.itemData.text + " button was clicked");
        }
    </text>)
)

@(Html.DevExtreme().ActionSheet() _
    .ID("actionSheet") _
    .DataSource({
        New With { .text = "Command 1" },
        New With { .text = "Command 2" },
        New With { .text = "Command 3" },
        New With { .text = "Command 4" }
    }) _
    .Visible(True) _
    .OnItemClick("button_click")
)
<script>
    function button_click (e) {
        alert("The " + e.itemData.text + " button was clicked");
    }
</script>

$(function () {
    $("#autocomplete").dxAutocomplete({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        placeholder: "Type item name..."
    });
});

<div id="autocomplete"></div>

<dx-autocomplete
    [dataSource]="autocompleteData"
    placeholder="Type item name...">
</dx-autocomplete>

import { DxAutocompleteModule } from "devextreme-angular";
// ...
export class AppComponent {
    autocompleteData = [ "Item 1", "Item 2", "Item 3" ];
}
@NgModule({
    imports: [
        // ...
        DxAutocompleteModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-autocomplete="{
        dataSource: autocompleteData,
        placeholder: 'Type item name...'
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.autocompleteData = [ "Item 1", "Item 2", "Item 3" ];
    });

<div data-bind="dxAutocomplete: {
    dataSource: autocompleteData,
    placeholder: 'Type item name...'
}"></div>

var viewModel = {
    autocompleteData: [ "Item 1", "Item 2", "Item 3" ]
};

ko.applyBindings(viewModel);

@(Html.DevExtreme().Autocomplete()
    .ID("autocomplete")
    .DataSource(new[] { "Item 1", "Item 2", "Item 3" })
    .Placeholder("Type item name...")
)

@(Html.DevExtreme().Autocomplete() _
    .ID("autocomplete") _
    .DataSource({ "Item 1", "Item 2", "Item 3" }) _
    .Placeholder("Type item name...")
)

<div id="box">
    <div id="item1" data-options="dxItem: { ratio: 1, baseSize: 10 }">
        <p>Item 1</p>
    </div>
    <div id="item2" data-options="dxItem: { ratio: 3, baseSize: 40 }">
        <p>Item 2</p>
    </div>
    <div id="item3" data-options="dxItem: { ratio: 2, baseSize: 20 }">
        <p>Item 3</p>
    </div>
</div>

$(function () {
    $("#box").dxBox({
        direction: "row",
        height: "70%",
        width: "90%"
    });
});

<dx-box
    direction="row"
    height="70%"
    width="90%">
    <dxi-item 
        id="item1"
        [ratio]="1"
        [baseSize]="10">
        <p>Item 1</p>
    </dxi-item>
    <dxi-item 
        id="item2"
        [ratio]="3"
        [baseSize]="40">
        <p>Item 2</p>
    </dxi-item>
    <dxi-item 
        id="item3"
        [ratio]="2"
        [baseSize]="20">
        <p>Item 3</p>
    </dxi-item>
</dx-box>

import { DxBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})

@(Html.DevExtreme().Box()
    .ID("box")
    .Direction(BoxDirection.Row)
    .Height("70%")
    .Width("90%")
    .Items(items => {
        items.Add().Ratio(1).BaseSize(10).Template("<p>Item 1</p>");
        items.Add().Ratio(3).BaseSize(40).Template("<p>Item 2</p>");
        items.Add().Ratio(2).BaseSize(20).Template("<p>Item 3</p>");
    })
)

@(Html.DevExtreme().Box() _
    .ID("box") _
    .Direction(BoxDirection.Row) _
    .Height("70%") _
    .Width("90%") _
    .Items(Sub(items)
        items.Add().Ratio(1).BaseSize(10).Template("<p>Item 1</p>")
        items.Add().Ratio(3).BaseSize(40).Template("<p>Item 2</p>")
        items.Add().Ratio(2).BaseSize(20).Template("<p>Item 3</p>")
    End Sub)
)

$(function () {
    $("#button").dxButton({
        text: "Click me",
        onClick: function() {
            alert("The Button was clicked");
        }
    });
});

<div id="button"></div>

<dx-button
    text="Click me"
    (onClick)="buttonClicked()">
</dx-button>

import { DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    buttonClicked() {
        alert("The Button was clicked");
    }
}
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-button="{
        text: 'Click me',
        onClick: buttonClicked
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.buttonClicked = function () {
            alert("The Button was clicked");
        };
    });

@(Html.DevExtreme().Button()
    .ID("button")
    .Text("Click me")
    .OnClick(@<text>
        function () {
            alert("The Button was clicked");
        }
    </text>)
)

@(Html.DevExtreme().Button() _
    .ID("button") _
    .Text("Click me") _
    .OnClick("button_click")
)
<script>
    function button_click() {
        alert("The Button was clicked");
    }
</script>

$(function () {
    $("#calendar").dxCalendar({
        min: new Date(2000, 1, 1),
        max: new Date(2029, 12, 31),
        firstDayOfWeek: 1,
        value: new Date()
    });
});

<div id="calendar"></div>

<dx-calendar
    [min]="minDate"
    [max]="maxDate"
    [firstDayOfWeek]="1"
    [(value)]="currentDate">
</dx-calendar>

import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
    minDate = new Date(2000, 0, 1);
    maxDate = new Date(2029, 11, 31);
    currentDate = new Date();
}
@NgModule({
    imports: [
        // ...
        DxCalendarModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-calendar="{
        min: minDate,
        max: maxDate,
        firstDayOfWeek: 1,
        bindingOptions: {
            value: 'currentDate'
        }
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.minDate = new Date(2000, 0, 1);
        $scope.maxDate = new Date(2029, 11, 31);
        $scope.currentDate = new Date();
    });

<div data-bind="dxCalendar: {
    min: new Date(2000, 1, 1),
    max: new Date(2029, 12, 31),
    firstDayOfWeek: 1,
    value: currentDate
}"></div>

var viewModel = {
    currentDate: ko.observable(new Date())
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Calendar()
    .ID("calendar")
    .Min(new DateTime(2000, 1, 1))
    .Max(new DateTime(2029, 12, 31))
    .FirstDayOfWeek(FirstDayOfWeek.Monday)
    .Value(DateTime.Now)
)

@(Html.DevExtreme().Calendar() _
    .ID("calendar") _
    .Min(New DateTime(2000, 1, 1)) _
    .Max(New DateTime(2029, 12, 31)) _
    .FirstDayOfWeek(FirstDayOfWeek.Monday) _
    .Value(DateTime.Now)
)

$(function () {
    $("#checkBox").dxCheckBox({
        text: "Toggle me",
        value: undefined,
        onValueChanged: function (e) {
            alert(e.value);
        }
    });
});

<div id="checkBox"></div>

<dx-check-box
    text="Toggle me"
    [value]="undefined"
    (onValueChanged)="checkBoxToggled($event)">
</dx-check-box>

import { DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    checkBoxToggled(e) {
        alert(e.value);
    };
}
@NgModule({
    imports: [
        // ...
        DxCheckBoxModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-check-box="{
        text: 'Toggle me',
        value: undefined,
        onValueChanged: checkBoxToggled
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.checkBoxToggled = function (e) {
            alert(e.value);
        };
    });

@(Html.DevExtreme().CheckBox()
    .ID("checkBox")
    .Text("Toggle me")
    .OnValueChanged(@<text>
        function (e) {
            alert(e.value);
        }
    </text>)
)

@(Html.DevExtreme().CheckBox() _
    .ID("checkBox") _
    .Text("Toggle me") _
    .OnValueChanged("checkBox_valueChanged")
)
<script>
    function checkBox_valueChanged(e) {
        alert(e.value);
    }
</script>

$(function () {
    $("#colorBox").dxColorBox({
        value: "rgba(255, 144, 0, 0.3)",
        editAlphaChannel: true
    });
});

<div id="colorBox"></div>

<dx-color-box
    value="rgba(255, 144, 0, 0.3)"
    [editAlphaChannel]="true">
</dx-color-box>

import { DxColorBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxColorBoxModule
    ],
    // ...
})

@(Html.DevExtreme().ColorBox()
    .ID("colorBox")
    .Value("rgba(255, 144, 0, 0.3)")
    .EditAlphaChannel(true)
)

@(Html.DevExtreme().ColorBox() _
    .ID("colorBox") _
    .Value("rgba(255, 144, 0, 0.3)") _
    .EditAlphaChannel(True)
)

$(function () {
    $("#contextMenu").dxContextMenu({
        items: [
            { text: "Hide" },
            { text: "Delete" },
            {
                text: "Clipboard",
                items: [
                    { text: "Copy" },
                    { text: "Clear" },
                    { text: "Paste" }
                ]
            }
        ],
        target: "#targetElement"
    });
});

<div id="targetElement"></div>
<div id="contextMenu"></div>

<div id="targetElement"></div>
<dx-context-menu
    [items]="contextMenuItems"
    target="#targetElement">
</dx-context-menu>

import { DxContextMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
    contextMenuItems = [
        { text: "Hide" },
        { text: "Delete" },
        {
            text: "Clipboard",
            items: [
                { text: "Copy" },
                { text: "Clear" },
                { text: "Paste" }
            ]
        }
    ];
}
@NgModule({
    imports: [
        // ...
        DxContextMenuModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div id="targetElement"></div>
    <div dx-context-menu="{
        items: contextMenuItems,
        target: '#targetElement'
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.contextMenuItems = [
            { text: "Hide" },
            { text: "Delete" },
            {
                text: "Clipboard",
                items: [
                    { text: "Copy" },
                    { text: "Clear" },
                    { text: "Paste" }
                ]
            }
        ];
    });

<div id="targetElement"></div>
<div data-bind="dxContextMenu: {
    items: contextMenuItems,
    target: '#targetElement'
}"></div>

var viewModel = {
    contextMenuItems: [
        { text: "Hide" },
        { text: "Delete" },
        {
            text: "Clipboard",
            items: [
                { text: "Copy" },
                { text: "Clear" },
                { text: "Paste" }
            ]
        }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().ContextMenu()
    .ID("contextMenu")
    .Target("#targetElement")
    .Items(items => {
        items.Add().Text("Hide");
        items.Add().Text("Delete");
        items.Add().Text("Clipboard").Items(clipboardItems => {
            clipboardItems.Add().Text("Copy");
            clipboardItems.Add().Text("Clear");
            clipboardItems.Add().Text("Paste");
        });
    })
)
<div id="targetElement"></div>

@(Html.DevExtreme().ContextMenu() _
    .ID("contextMenu") _
    .Target("#targetElement") _
    .Items(Sub(items)
        items.Add().Text("Hide")
        items.Add().Text("Delete")
        items.Add().Text("Clipboard").Items(Sub(clipboardItems)
            clipboardItems.Add().Text("Copy")
            clipboardItems.Add().Text("Clear")
            clipboardItems.Add().Text("Paste")
        End Sub)
    End Sub)
)
<div id="targetElement"></div>

$(function () {
    $("#dataGrid").dxDataGrid({
        dataSource: [{
            ID: 1,
            CompanyName: "Super Mart of the West",
            City: "Bentonville",
            State: "Arkansas"
        }, {
            ID: 2,
            CompanyName: "Electronics Depot",
            City: "Atlanta",
            State: "Georgia"
        }],
        keyExpr: "ID",
        columns: ["CompanyName", "City", "State"]
    });
});

<div id="dataGrid"></div>

<dx-data-grid 
    [dataSource]="customers"
    keyExpr="ID">            
    <dxi-column dataField="CompanyName"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
    <dxi-column dataField="State"></dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    customers = [{
        ID: 1,
        CompanyName: "Super Mart of the West",
        City: "Bentonville",
        State: "Arkansas"
    }, {
        ID: 2,
        CompanyName: "Electronics Depot",
        City: "Atlanta",
        State: "Georgia"
    }];
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-data-grid="{
        dataSource: customers,
        keyExpr: 'ID',
        columns: ['CompanyName', 'City', 'State']
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.customers = [{
            ID: 1,
            CompanyName: "Super Mart of the West",
            City: "Bentonville",
            State: "Arkansas"
        }, {
            ID: 2,
            CompanyName: "Electronics Depot",
            City: "Atlanta",
            State: "Georgia"
        }];
    });

<div data-bind="dxDataGrid: {
    dataSource: customers,
    keyExpr: 'ID',
    columns: ['CompanyName', 'City', 'State']
}"></div>

var viewModel = {
    customers: [{
        ID: 1,
        CompanyName: "Super Mart of the West",
        City: "Bentonville",
        State: "Arkansas"
    }, {
        ID: 2,
        CompanyName: "Electronics Depot",
        City: "Atlanta",
        State: "Georgia"
    }]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().DataGrid()
    .ID("dataGrid")
    .DataSource(new object[] {
        new { 
            ID = 1,
            CompanyName = "Super Mart of the West",
            City = "Bentonville",
            State = "Arkansas" 
        }, 
        new {
            ID = 2,
            CompanyName = "Electronics Depot",
            City = "Atlanta",
            State = "Georgia"
        }
    }, "ID")
    .Columns(columns => {
        columns.Add().DataField("CompanyName");
        columns.Add().DataField("City");
        columns.Add().DataField("State");
    })
)

@(Html.DevExtreme().DataGrid() _
    .ID("dataGrid") _
    .DataSource({
        New With { 
            .ID= 1,
            .CompanyName = "Super Mart of the West",
            .City = "Bentonville",
            .State = "Arkansas" 
        }, 
        New With {
            .ID = 2,
            .CompanyName = "Electronics Depot",
            .City = "Atlanta",
            .State = "Georgia"
        }
    }, "ID") _
    .Columns(Sub(columns)
        columns.Add().DataField("CompanyName")
        columns.Add().DataField("City")
        columns.Add().DataField("State")
    End Sub)
)

$(function () {
    $("#dateBox").dxDateBox({
        min: new Date(2000, 0, 1),
        max: new Date(2029, 11, 31),
        value: new Date()
    });
});

<div id="dateBox"></div>

<dx-date-box
    [min]="minDate"
    [max]="maxDate"
    [(value)]="currentDate">
</dx-date-box>

import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    minDate = new Date(2000, 0, 1);
    maxDate = new Date(2029, 11, 31);
    currentDate = new Date();
}
@NgModule({
    imports: [
        // ...
        DxDateBoxModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-date-box="{
        min: minDate,
        max: maxDate,
        bindingOptions: {
            value: 'currentDate'
        }
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.minDate = new Date(2000, 0, 1);
        $scope.maxDate = new Date(2029, 11, 31);
        $scope.currentDate = new Date();
    });

<div data-bind="dxDateBox: {
    min: new Date(2000, 0, 1),
    max: new Date(2029, 11, 31),
    value: currentDate
}"></div>

var viewModel = {
    currentDate: ko.observable(new Date())
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().DateBox()
    .ID("dateBox")
    .Min(new DateTime(2000, 1, 1))
    .Max(new DateTime(2029, 12, 31))
    .Value(DateTime.Now)
)

@(Html.DevExtreme().DateBox() _
    .ID("dateBox") _
    .Min(New DateTime(2000, 1, 1)) _
    .Max(New DateTime(2029, 12, 31)) _
    .Value(DateTime.Now)
)

<div id="deferRendering">
    <!-- Widget content -->
</div>

var readyToRender = $.Deferred();
// Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
// ...
$(function () {
    $("#deferRendering").dxDeferRendering({
        renderWhen: readyToRender.promise();
    });
});

<dx-defer-rendering
    [renderWhen]="modelReady"
>
    <!-- Widget content -->
</dx-defer-rendering>

var modelIsReady = $.Deferred();
// Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
// ...
export class AppComponent
    modelReady = modelIsReady.promise();
}

<div ng-controller="DemoController">
    <div dx-defer-rendering="{
        renderWhen: modelIsReady
    }">
        <!-- Widget content -->
    </div>
</div>

var modelIsReady = $.Deferred();
// Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
// ...
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.modelIsReady = modelIsReady.promise();
    });

<div data-bind="dxDeferRendering: {
    renderWhen: modelIsReady
}">
    <!-- Widget content -->
</div>

var modelIsReady = $.Deferred();
// Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
// ...
var viewModel = {
    modelIsReady: modelIsReady.promise()
};
ko.applyBindings(viewModel);

$(function () {
    var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
    $("#dropDownBox").dxDropDownBox({
        value: fruits[0],
        dataSource: fruits,
        contentTemplate: function (e) {
            var $list = $("<div>").dxList({
                dataSource: fruits,
                selectionMode: "single",
                onSelectionChanged: function (args) {
                    e.component.option("value", args.addedItems[0]);
                    e.component.close();
                }
            });
            return $list;
        }
    });
});

<div id="dropDownBox"></div>

<dx-drop-down-box
    [(value)]="selectedFruit"
    [(opened)]="isDropDownBoxOpened"
    [dataSource]="fruits">
    <div *dxTemplate="let contentData of 'content'">
        <dx-list 
            [dataSource]="fruits"
            selectionMode="single"
            (onSelectionChanged)="changeDropDownBoxValue($event)">
        </dx-list>
    </div>
</dx-drop-down-box>

import { DxDropDownBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
    selectedFruit = fruits[0];
    isDropDownBoxOpened = false;
    changeDropDownBoxValue = function (args) {
        selectedFruit = args.addedItems[0];
        isDropDownBoxOpened = false;
    }
}
@NgModule({
    imports: [
        // ...
        DxDropDownBoxModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-drop-down-box="{
        dataSource: fruits,
        bindingOptions: {
            value: 'selectedFruit',
            opened: 'isDropDownBoxOpened'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <div dx-list="{
                dataSource: fruits,
                selectionMode: 'single',
                onSelectionChanged: changeDropDownBoxValue
            }"></div>
        </div>
    </div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
        $scope.selectedFruit = $scope.fruits[0];
        $scope.isDropDownBoxOpened = false;
        $scope.changeDropDownBoxValue = function (args) {
            $scope.selectedFruit = args.addedItems[0];
            $scope.isDropDownBoxOpened = false;
        }
    });

<div data-bind="dxDropDownBox: {
    value: fruits[0],
    dataSource: fruits,
    opened: isDropDownBoxOpened
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <div data-bind="dxList: {
            dataSource: fruits,
            selectionMode: 'single',
            onSelectionChanged: changeDropDownBoxValue
        }"></div>
    </div>
</div>

var viewModel = function () {
    var vm = { };
    vm.fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
    vm.selectedFruit = ko.observable(vm.fruits[0]);
    vm.isDropDownBoxOpened = ko.observable(false);
    vm.changeDropDownBoxValue = function (args) {
        vm.selectedFruit(args.addedItems[0]);
        vm.isDropDownBoxOpened(false);
    }
    return vm;
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().DropDownBox()
    .ID("dropDownBox")
    .DataSource(new[] { "Apples", "Oranges", "Lemons", "Pears", "Pineapples" })
    .Value("Apples")
    .ContentTemplate(@<text>
        @(Html.DevExtreme().List()
            .DataSource(new JS("component.option('dataSource')"))
            .SelectionMode(ListSelectionMode.Single)
            .OnSelectionChanged("innerList_selectionChanged")
        )
    </text>)
)

<script>
    function innerList_selectionChanged (e) {
        var dropDownBox = $("#dropDownBox").dxDropDownBox("instance");
        dropDownBox.option("value", e.addedItems[0]);
        dropDownBox.close();
    }
</script>

@Code
    Html.DevExtreme().DropDownBox() _
        .ID("dropDownBox") _
        .DataSource({ "Apples", "Oranges", "Lemons", "Pears", "Pineapples" }) _
        .Value("Apples") _
        .ContentTemplate(Sub()
            @<text>
                @Html.DevExtreme().List() _
                    .DataSource(New JS("component.option('dataSource')")) _
                    .SelectionMode(ListSelectionMode.Single) _
                    .OnSelectionChanged("innerList_selectionChanged")
            </text>
        End Sub).Render()
End Code

<script>
    function innerList_selectionChanged (e) {
        var dropDownBox = $("#dropDownBox").dxDropDownBox("instance");
        dropDownBox.option("value", e.addedItems[0]);
        dropDownBox.close();
    }
</script>

$(function () {
    $("#fileUploader").dxFileUploader({
        accept:"image/*"
    });
});

<div id="fileUploader"></div>

<dx-file-uploader accept="image/*"></dx-file-uploader>

import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

@(Html.DevExtreme().FileUploader()
    .ID("fileUploader")
    .Accept("image/*")
)

@(Html.DevExtreme().FileUploader() _
    .ID("fileUploader") _
    .Accept("image/*")
)

$(function () {
    $("#filterBuilder").dxFilterBuilder({
        value: ["Category", "contains", "Tel"],
        fields: [{
            dataField: "Category"
        }, {
            dataField: "Shipped",
            caption: "Shipment Date",
            dataType: "date"
        }, {
            dataField: "UnitPrice",
            dataType: "number"
        }]
    });
});

<div id="filterBuilder"></div>

<dx-filter-builder
    [value]='["Category", "contains", "Tel"]'>
    <dxi-field
        dataField="Category">
    </dxi-field>
    <dxi-field
        dataField="Shipped"
        caption="Shipment Date"
        dataType="date">
    </dxi-field>
    <dxi-field
        dataField="UnitPrice"
        dataType="number">
    </dxi-field>
</dx-filter-builder>

import { DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFilterBuilderModule
    ],
    // ...
})

@(Html.DevExtreme().FilterBuilder()
    .ID("filterBuilder")
    .Value(new object[] { "CompanyName", "contains", "Tel" })
    .Fields(fields => {
        fields.Add().DataField("CompanyName");
        fields.Add().DataField("City")
            .Caption("Shipment Date")
            .DataType(FilterBuilderFieldDataType.Date);
        fields.Add().DataField("State")
            .DataType(FilterBuilderFieldDataType.Number);
    })
)

@(Html.DevExtreme().FilterBuilder() _
    .ID("filterBuilder") _
    .Value(New String() {"CompanyName", "contains", "Tel"}) _
    .Fields(Sub(fields)
        fields.Add().DataField("CompanyName")
        fields.Add().DataField("City") _
            .Caption("Shipment Date") _
            .DataType(FilterBuilderFieldDataType.Date)
        fields.Add().DataField("State") _
            .DataType(FilterBuilderFieldDataType.Number)
    End Sub)
)

var companyData = {
    id: 1,
    name: "Super Mart of the West",
    city: "Bentonville",
    state: "Arkansas",
    zip: 72716,
    phone: "(800) 555-2797",
    fax: "(800) 555-2171",
    website: "http://www.nowebsite.com"
};
$(function () {
    $("#form").dxForm({
        formData: companyData,
        items: [
            "name", {
                itemType: "group",
                caption: "Location",
                items: ["city", "state", "zip"]
            }, {
                itemType: "group",
                caption: "Contacts",
                items: ["phone", "fax", "website"]
            }
        ]
    });
});

<div id="form"></div>

<dx-form
    [formData]="companyData">
    <dxi-item dataField="name"></dxi-item>
    <dxi-item
        itemType="group"
        caption="Location">
        <dxi-item dataField="city"></dxi-item>
        <dxi-item dataField="state"></dxi-item>
        <dxi-item dataField="zip"></dxi-item>
    </dxi-item>
    <dxi-item
        itemType="group"
        caption="Contacts">
        <dxi-item dataField="phone"></dxi-item>
        <dxi-item dataField="fax"></dxi-item>
        <dxi-item dataField="website"></dxi-item>
    </dxi-item>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    companyData = {
        id: 1,
        name: "Super Mart of the West",
        city: "Bentonville",
        state: "Arkansas",
        zip: 72716,
        phone: "(800) 555-2797",
        fax: "(800) 555-2171",
        website: "http://www.nowebsite.com"
    };
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-form="{
        formData: companyData,
        items: [
            'name', {
                itemType: 'group',
                caption: 'Location',
                items: ['city', 'state', 'zip']
            }, {
                itemType: 'group',
                caption: 'Contacts',
                items: ['phone', 'fax', 'website']
            }
        ]
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.companyData = {
            id: 1,
            name: "Super Mart of the West",
            city: "Bentonville",
            state: "Arkansas",
            zip: 72716,
            phone: "(800) 555-2797",
            fax: "(800) 555-2171",
            website: "http://www.nowebsite.com"
        };
    });

<div data-bind="dxForm: {
    formData: companyData,
    items: [
        'name', {
            itemType: 'group',
            caption: 'Location',
            items: ['city', 'state', 'zip']
        }, {
            itemType: 'group',
            caption: 'Contacts',
            items: ['phone', 'fax', 'website']
        }
    ]
}"></div>

var viewModel = {
    companyData: {
        id: 1,
        name: "Super Mart of the West",
        city: "Bentonville",
        state: "Arkansas",
        zip: 72716,
        phone: "(800) 555-2797",
        fax: "(800) 555-2171",
        website: "http://www.nowebsite.com"
    }
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Form()
    .FormData(new {
        ID = 1,
        Name = "Super Mart of the West",
        City = "Bentonville",
        State = "Arkansas",
        Zip = 727161232,
        Phone = "(800) 555-2797",
        Fax = "(800) 555-2171",
        Website = "http://www.nowebsite.com"
    })
    .Items(formItems => {
        formItems.AddSimple().DataField("Name");
        formItems.AddGroup().Caption("Location").Items(locationItems => {
            locationItems.AddSimple().DataField("City");
            locationItems.AddSimple().DataField("State");
            locationItems.AddSimple().DataField("Zip");
        });
        formItems.AddGroup().Caption("Contacts").Items(contactsItems => {
            contactsItems.AddSimple().DataField("Phone");
            contactsItems.AddSimple().DataField("Fax");
            contactsItems.AddSimple().DataField("Website");
        });
    })
)

@(Html.DevExtreme().Form() _
    .FormData(New With {
        .Id = 1,
        .Name = "Super Mart of the West",
        .City = "Bentonville",
        .State = "Arkansas",
        .Zip = 727161232,
        .Phone = "(800) 555-2797",
        .Fax = "(800) 555-2171",
        .Website = "http://www.nowebsite.com"
    }) _
    .Items(Sub(formItems)
        formItems.AddSimple().DataField("name")
        formItems.AddGroup().Caption("Location").Items(Sub(locationItems)
            locationItems.AddSimple().DataField("City")
            locationItems.AddSimple().DataField("State")
            locationItems.AddSimple().DataField("Zip")
        End Sub)
        formItems.AddGroup().Caption("Contacts").Items(Sub(contactsItems)
            contactsItems.AddSimple().DataField("Phone")
            contactsItems.AddSimple().DataField("Fax")
            contactsItems.AddSimple().DataField("Website")
        End Sub)
    End Sub)
)  

$(function () {
    $("#gallery").dxGallery({
        dataSource: [
            "http://path/to/image/1.png",
            "http://path/to/image/2.png",
            "http://path/to/image/3.png"
        ],
        height: 300
    });
});

<div id="gallery"></div>

<dx-gallery
    [dataSource]="galleryData"
    [height]="300">
</dx-gallery>

import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryData = [
        "http://path/to/image/1.png",
        "http://path/to/image/2.png",
        "http://path/to/image/3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})

@(Html.DevExtreme().Gallery()
    .ID("gallery")
    .DataSource(new[] {
        "http://path/to/image/1.png",
        "http://path/to/image/2.png",
        "http://path/to/image/3.png"
    })
    .Height(300)
)

@(Html.DevExtreme().Gallery() _
    .ID("gallery") _
    .DataSource({
        "http://path/to/image/1.png",
        "http://path/to/image/2.png",
        "http://path/to/image/3.png"
    }) _
    .Height(300)
)

$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        valueType: "html",
        toolbar: {
            items: [
                "bold", "italic", "separator", {
                    formatName: "size",
                    formatValues: ["11px", "12px", "16px"]
                }, "separator", 
                "alignLeft", "alignCenter", "alignRight"
            ]
        }
    })
})

<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.light.css">
    <script type="text/javascript" src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/18.2.18/js/dx.all.js"></script>
</head>
<body>
    <div id="htmlEditorContainer">
        <p>
            <b>Lorem ipsum dolor sit amet</b>, 
            <i>consectetur adipiscing elit</i>, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</body>

<dx-html-editor
    valueType="html">
    <dxo-toolbar [items]="items"></dxo-toolbar>
    <p>
        <b>Lorem ipsum dolor sit amet</b>, 
        <i>consectetur adipiscing elit</i>, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</dx-html-editor>

import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    items: any = [
        "bold", "italic", "separator", {
            formatName: "size",
            formatValues: ["11px", "12px", "16px"]
        }, "separator", 
        "alignLeft", "alignCenter", "alignRight"
    ];
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})

<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.light.css">
    <script type="text/javascript" src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/18.2.18/js/dx.all.js"></script>
</head>
<body>
    <div ng-controller="DemoController">
        <div dx-html-editor="{
            valueType: 'html',
            toolbar: toolbarConfig
        }">
            <p>
                <b>Lorem ipsum dolor sit amet</b>, 
                <i>consectetur adipiscing elit</i>, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
    </div>
</body>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.toolbarConfig = {
            items: [
                "bold", "italic", "separator", {
                    formatName: "size",
                    formatValues: ["11px", "12px", "16px"]
                }, "separator", 
                "alignLeft", "alignCenter", "alignRight"
            ]
        };
    });

<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.light.css">
    <script type="text/javascript" src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/18.2.18/js/dx.all.js"></script>
</head>
<body>
    <div data-bind="dxHtmlEditor: {
        valueType: 'html',
        toolbar: toolbarConfig
    }">
        <p>
            <b>Lorem ipsum dolor sit amet</b>, 
            <i>consectetur adipiscing elit</i>, 
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</body>

var viewModel = {
    toolbarConfig: {
        items: [
            "bold", "italic", "separator", {
                formatName: "size",
                formatValues: ["11px", "12px", "16px"]
            }, "separator", 
            "alignLeft", "alignCenter", "alignRight"
        ]
    }
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().HtmlEditor()
    .ID("htmlEditor")
    .ValueType(HtmlEditorValueType.Html)
    .Content(@<text>
        <p><b>Lorem ipsum dolor sit amet</b>,
        <i>consectetur adipiscing elit</i>,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </text>)
    .Toolbar(t => t
        .Items(i => {
            i.Add().FormatName("bold");
            i.Add().FormatName("italic");
            i.Add().FormatName("separator");
            i.Add().FormatName("size").FormatValues(new[] { "11px", "12px", "16px" });
            i.Add().FormatName("separator");
            i.Add().FormatName("alignLeft");
            i.Add().FormatName("alignCenter");
            i.Add().FormatName("alignRight");
        })
    )
)
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

@(Html.DevExtreme().HtmlEditor() _
    .ID("htmlEditor") _
    .ValueType(HtmlEditorValueType.Html) _
    .Content(
        "<p><b>Lorem ipsum dolor sit amet</b>, " _
        & "<i>consectetur adipiscing elit</i>, " _
        & "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
    ) _
    .Toolbar(Sub(t)
        t.Items(Sub(items)
            items.Add().FormatName("bold")
            items.Add().FormatName("italic")
            items.Add().FormatName("separator");
            items.Add().FormatName("size").FormatValues({"11px", "12px", "16px"})
            items.Add().FormatName("separator");
            items.Add().FormatName("alignLeft")
            items.Add().FormatName("alignCenter")
            items.Add().FormatName("alignRight")
        End Sub)
    End Sub)
)
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

$(function () {
    $("#list").dxList({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        searchEnabled: true
    });
});

<div id="list"></div>

<dx-list
    [dataSource]="listData"
    [searchEnabled]="true">
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    listData = [ "Item 1", "Item 2", "Item 3" ];
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-list="{
        dataSource: listData,
        searchEnabled: true
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.listData = [ "Item 1", "Item 2", "Item 3" ];
    });

<div data-bind="dxList: {
    dataSource: listData,
    searchEnabled: true
}"></div>

var viewModel = {
    listData: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().List()
    .ID("list")
    .DataSource(new[] { "Item 1", "Item 2", "Item 3" })
    .SearchEnabled(true)
)

@(Html.DevExtreme().List() _
    .ID("list") _
    .DataSource({ "Item 1", "Item 2", "Item 3" }) _
    .SearchEnabled(True)
)

$(function () {
    $("#loadIndicator").dxLoadIndicator({
        visible: true
    });
});

<div id="loadIndicator"></div>

<dx-load-indicator [(visible)]="isLoadIndicatorVisible"></dx-load-indicator>

import { DxLoadIndicatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadIndicatorVisible = true;
}
@NgModule({
    imports: [
        // ...
        DxLoadIndicatorModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-load-indicator="{
        bindingOptions: {
            visible: 'isLoadIndicatorVisible'
        }
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.isLoadIndicatorVisible = true;
    });

<div data-bind="dxLoadIndicator: {
    visible: isLoadIndicatorVisible
}"></div>

var viewModel = {
    isLoadIndicatorVisible: ko.observable(true)
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().LoadIndicator()
    .ID("loadIndicator")
    .Visible(true)
)

@(Html.DevExtreme().LoadIndicator() _
    .ID("loadIndicator") _
    .Visible(True)
)

$(function () {
    $("#loadPanel").dxLoadPanel({
        closeOnOutsideClick: true,
        visible: true
    });
});

<div id="loadPanel"></div>

<dx-load-panel
    [closeOnOutsideClick]="true"
    [(visible)]="isLoadPanelVisible">
</dx-load-panel>

import { DxLoadPanelModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadPanelVisible = true;
}
@NgModule({
    imports: [
        // ...
        DxLoadPanelModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-load-panel="{
        closeOnOutsideClick: true,
        bindingOptions: {
            visible: 'isLoadPanelVisible'
        }
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.isLoadPanelVisible = true;
    });

<div data-bind="dxLoadPanel: {
    closeOnOutsideClick: true,
    visible: isLoadPanelVisible
}"></div>

var viewModel = {
    isLoadPanelVisible: ko.observable(true)
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().LoadPanel()
    .ID("loadPanel")
    .CloseOnOutsideClick(true)
    .Visible(true)
)

@(Html.DevExtreme().LoadPanel() _
    .ID("loadPanel") _
    .CloseOnOutsideClick(True) _
    .Visible(True)
)

$(function () {
    $("#lookup").dxLookup({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        placeholder: "Select an item"
    });
});

<div id="lookup"></div>

<dx-lookup
    [dataSource]="lookupDataSource"
    placeholder="Select an item">
</dx-lookup>

import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    lookupDataSource = [ "Item 1", "Item 2", "Item 3" ];
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-lookup="{
        dataSource: lookupDataSource,
        placeholder: 'Select an item'
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.lookupDataSource = [ "Item 1", "Item 2", "Item 3" ];
    });

<div data-bind="dxLookup: {
    dataSource: lookupDataSource,
    placeholder: 'Select an item'
}"></div>

var viewModel = {
    lookupDataSource: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Lookup()
    .ID("lookup")
    .DataSource(new[] { "Item 1", "Item 2", "Item 3" })
    .Placeholder("Select an item")
)

@(Html.DevExtreme().Lookup() _
    .ID("lookup") _
    .DataSource({ "Item 1", "Item 2", "Item 3" }) _
    .Placeholder("Select an item")
)

$(function () {
    $("#map").dxMap({
        provider: "bing",
        type: "roadmap",
        zoom: 10,
        center: "40.749825, -73.987963"
    });
});

<div id="map"></div>

<dx-map
    provider="bing"
    type="roadmap"
    [zoom]="10"
    center="40.749825, -73.987963">
</dx-map>

import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})

@(Html.DevExtreme().Map()
    .ID("map")
    .Provider(GeoMapProvider.Bing)
    .Type(GeoMapType.Roadmap)
    .Zoom(10)
    .Center(40.749825, -73.987963)
)

@(Html.DevExtreme().Map() _
    .ID("map") _
    .Provider(GeoMapProvider.Bing) _
    .Type(GeoMapType.Roadmap) _
    .Zoom(10) _
    .Center(40.749825, -73.987963)
)

$(function () {
    $("#menu").dxMenu({
        items: [
            { text: "Hide" },
            { text: "Delete" },
            {
                text: "Clipboard",
                items: [
                    { text: "Copy" },
                    { text: "Clear" },
                    { text: "Paste" }
                ]
            }
        ]
    });
});

<div id="menu"></div>

<dx-menu [items]="menuItems"></dx-menu>

import { DxMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
    menuItems = [
        { text: "Hide" },
        { text: "Delete" },
        {
            text: "Clipboard",
            items: [
                { text: "Copy" },
                { text: "Clear" },
                { text: "Paste" }
            ]
        }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMenuModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-menu="{
        items: menuItems
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.menuItems = [
            { text: "Hide" },
            { text: "Delete" },
            {
                text: "Clipboard",
                items: [
                    { text: "Copy" },
                    { text: "Clear" },
                    { text: "Paste" }
                ]
            }
        ];
    });

<div data-bind="dxMenu: {
    items: menuItems
}"></div>

var viewModel = {
    menuItems: [
        { text: "Hide" },
        { text: "Delete" },
        {
            text: "Clipboard",
            items: [
                { text: "Copy" },
                { text: "Clear" },
                { text: "Paste" }
            ]
        }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Menu()
    .ID("menu")
    .Items(items => {
        items.Add().Text("Hide");
        items.Add().Text("Delete");
        items.Add().Text("Clipboard").Items(clipboardItems => {
            clipboardItems.Add().Text("Copy");
            clipboardItems.Add().Text("Clear");
            clipboardItems.Add().Text("Paste");
        });
    })
)

@(Html.DevExtreme().Menu() _
    .ID("menu") _
    .Items(Sub(items)
        items.Add().Text("Hide")
        items.Add().Text("Delete")
        items.Add().Text("Clipboard").Items(Sub(clipboardItems)
            clipboardItems.Add().Text("Copy")
            clipboardItems.Add().Text("Clear")
            clipboardItems.Add().Text("Paste")
        End Sub)
    End Sub)
)

$(function () {
    $("#multiView").dxMultiView({
        items: [
            { text: "View 1" },
            { text: "View 2" },
            { text: "View 3" }
        ]
    });
});

<div id="multiView"></div>

<dx-multi-view [items]="multiViewItems"></dx-multi-view>

import { DxMultiViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    multiViewItems = [
        { text: "View 1" },
        { text: "View 2" },
        { text: "View 3" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxMultiViewModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-multi-view="{
        items: multiViewItems
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.multiViewItems = [
            { text: "View 1" },
            { text: "View 2" },
            { text: "View 3" }
        ];
    });

<div data-bind="dxMultiView: {
    items: multiViewItems
}"></div>

var viewModel = {
    multiViewItems: [
        { text: "View 1" },
        { text: "View 2" },
        { text: "View 3" }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().MultiView()
    .ID("multiView")
    .Items(items => {
        items.Add().Text("View 1");
        items.Add().Text("View 2");
        items.Add().Text("View 3");
    })
)

@(Html.DevExtreme().MultiView() _
    .ID("multiView") _
    .Items(Sub(items)
        items.Add().Text("View 1")
        items.Add().Text("View 2")
        items.Add().Text("View 3")
    End Sub)
)

$(function () {
    $("#navBar").dxNavBar({
        items: [
            { text: "Home", icon: "home" },
            { text: "About", icon: "info" },
            { text: "Favorites", icon: "favorites", badge: "new" }
        ]
    });
});

<div id="navBar"></div>

<dx-nav-bar>
    <dxi-item text="Home" icon="home"></dxi-item>
    <dxi-item text="About" icon="info"></dxi-item>
    <dxi-item text="Favorites" icon="favorites" badge="new"></dxi-item>
</dx-nav-bar>

import { DxNavBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNavBarModule
    ],
    // ...
})

@(Html.DevExtreme().NavBar()
    .ID("navBar")
    .Items(items => {
        items.Add().Text("Home").Icon("home");
        items.Add().Text("About").Icon("info");
        items.Add().Text("Favorites").Icon("favorites").Badge("new");
    })
)

@(Html.DevExtreme().NavBar() _
    .ID("navBar") _
    .Items(Sub(items)
        items.Add().Text("Home").Icon("home")
        items.Add().Text("About").Icon("info")
        items.Add().Text("Favorites").Icon("favorites").Badge("new")
    End Sub)
)

$(function () {
    $("#numberBox").dxNumberBox({
        value: 20,
        min: 16,
        max: 100,
        placeholder: "Enter your age"
    });
});

<div id="numberBox"></div>

<dx-number-box
    [value]="20"
    [min]="16"
    [max]="100"
    placeholder="Enter your age">
</dx-number-box>

import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})

@(Html.DevExtreme().NumberBox()
    .ID("numberBox")
    .Value(20)
    .Min(16)
    .Max(100)
    .Placeholder("Enter your age")
)

@(Html.DevExtreme().NumberBox() _
    .ID("numberBox") _
    .Value(20) _
    .Min(16) _
    .Max(100) _
    .Placeholder("Enter your age")
)

$(function () {
    $("#panorama").dxPanorama({
        items: [{
            title: "Item 1 Title",
            text: "Item 1 Text Content"
        }, {
            title: "Item 2 Title",
            text: "Item 2 Text Content"
        }],
        backgroundImage: {
            url: "/here/goes/your/image.png",
            height: 600,
            width: 800
        }
    });
});

<div id="panorama"></div>

#panorama {
    height: auto;
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100%;
}

<dx-panorama
    [items]="panoramaItems">
    <dxo-background-image
        url="/here/goes/your/image.png"
        [height]="600"
        [width]="800">
    </dxo-background-image>
</dx-panorama>

import { DxPanoramaModule } from "devextreme-angular";
// ...
export class AppComponent {
    panoramaItems = [{
        title: "Item 1 Title",
        text: "Item 1 Text Content"
    }, {
        title: "Item 2 Title",
        text: "Item 2 Text Content"
    }];
}
@NgModule({
    imports: [
        // ...
        DxPanoramaModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div id="panorama" dx-panorama="{
        items: panoramaItems,
        backgroundImage: {
            url: '/here/goes/your/image.png',
            height: 600,
            width: 800
        }
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.panoramaItems = [{
            title: "Item 1 Title",
            text: "Item 1 Text Content"
        }, {
            title: "Item 2 Title",
            text: "Item 2 Text Content"
        }];
    });

#panorama {
    height: auto;
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100%;
}

<div id="panorama" data-bind="dxPanorama: {
    items: panoramaItems,
    backgroundImage: {
        url: '/here/goes/your/image.png',
        height: 600,
        width: 800
    }
}"></div>

var viewModel = {
    panoramaItems: [{
        title: "Item 1 Title",
        text: "Item 1 Text Content"
    }, {
        title: "Item 2 Title",
        text: "Item 2 Text Content"
    }]
};
ko.applyBindings(viewModel);

#panorama {
    height: auto;
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100%;
}

$(function () {
    $("#pivot").dxPivot({
        items: [{
            title: "Item 1 Title",
            text: "Item 1 Text Content"
        }, {
            title: "Item 2 Title",
            text: "Item 2 Text Content"
        }, {
            title: "Item 3 Title",
            text: "Item 3 Text Content"
        }],
        height: 300
    });
});

<div id="pivot"></div>

<dx-pivot
    [items]="pivotItems"
    [height]="300">
</dx-pivot>

import { DxPivotModule } from "devextreme-angular";
// ...
export class AppComponent {
    pivotItems = [{
        title: "Item 1 Title",
        text: "Item 1 Text Content"
    }, {
        title: "Item 2 Title",
        text: "Item 2 Text Content"
    }, {
        title: "Item 3 Title",
        text: "Item 3 Text Content"
    }];
}
@NgModule({
    imports: [
        // ...
        DxPivotModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-pivot="{
        items: pivotItems,
        height: 300
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.pivotItems = [{
            title: "Item 1 Title",
            text: "Item 1 Text Content"
        }, {
            title: "Item 2 Title",
            text: "Item 2 Text Content"
        }, {
            title: "Item 3 Title",
            text: "Item 3 Text Content"
        }];
    });

<div data-bind="dxPivot: {
    items: pivotItems,
    height: 300
}"></div>

var viewModel = {
    pivotItems: [{
        title: "Item 1 Title",
        text: "Item 1 Text Content"
    }, {
        title: "Item 2 Title",
        text: "Item 2 Text Content"
    }, {
        title: "Item 3 Title",
        text: "Item 3 Text Content"
    }]
};
ko.applyBindings(viewModel);

$(function () {
    $("#pivotGrid").dxPivotGrid({
        dataSource: {
            store: {
                type: "odata",
                url: "http://url/to/the/service",
                key: "OrderID",
                keyType: "Int32"
            },
            fields: [
                { area: "column", dataField: "OrderDate", dataType: "date" },
                { area: "row", dataField: "ShipCountry" },
                { area: "row", dataField: "ShipCity" },
                { area: "row", dataField: "ShipName" },
                { area: "data", summaryType: "count" }
            ]
        }
    });
});

<div id="pivotGrid"></div>

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

import { DxPivotGridModule } from "devextreme-angular";
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: {
                type: "odata",
                url: "http://url/to/the/service",
                key: "OrderID",
                keyType: "Int32"
            },
            fields: [
                { area: "column", dataField: "OrderDate", dataType: "date" },
                { area: "row", dataField: "ShipCountry" },
                { area: "row", dataField: "ShipCity" },
                { area: "row", dataField: "ShipName" },
                { area: "data", summaryType: "count" }
            ]
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

@(Html.DevExtreme().PivotGrid()
    .ID("pivotGrid")
    .DataSource(ds => ds
        .Store(store => store.OData()
            .Url("http://url/to/the/service")
            .Key("OrderID")
            .KeyType(EdmType.Int32)
        )
        .Fields(fields => {
            fields.Add().Area(PivotGridArea.Column)
                .DataField("OrderDate")
                .DataType(PivotGridDataType.Date);
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCountry");
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCity");
            fields.Add().Area(PivotGridArea.Row).DataField("ShipName");
            fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count);
        })
    )
)

@(Html.DevExtreme().PivotGrid() _
    .ID("pivotGrid") _
    .DataSource(Sub(ds)
        ds.Store(Function(store)
            Return store.OData() _
                .Url("http://url/to/the/service") _
                .Key("OrderID") _
                .KeyType(EdmType.Int32)
            End Function) _
        .Fields(Sub(fields)
            fields.Add().Area(PivotGridArea.Column) _
                .DataField("OrderDate") _
                .DataType(PivotGridDataType.Date)
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCountry")
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCity")
            fields.Add().Area(PivotGridArea.Row).DataField("ShipName")
            fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count)
        End Sub)
    End Sub)
)

var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
    // ...
});
$(function () {
    $("#fieldChooser").dxPivotGridFieldChooser({
        dataSource: pivotGridDataSource
    });
    $("#pivotGrid").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

<div id="fieldChooser"></div>
<div id="pivotGrid"></div>

<dx-pivot-grid-field-chooser [dataSource]="pivotGridDataSource"></dx-pivot-grid-field-chooser>
<dx-pivot-grid [dataSource]="pivotGridDataSource"></dx-pivot-grid>

import { DxPivotGridFieldChooserModule } from "devextreme-angular";
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
// ...
export class AppComponent {
    pivotGridDataSource = new PivotGridDataSource({
        // ...   
    });
}
@NgModule({
    imports: [
        // ...
        DxPivotGridFieldChooserModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-pivot-grid-field-chooser="{
        dataSource: pivotGridDataSource
    }"></div>
    <div dx-pivot-grid="{
        dataSource: pivotGridDataSource
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
            // ...   
        });
    });

<div data-bind="dxPivotGridFieldChooser: {
    dataSource: pivotGridDataSource
}"></div>
<div data-bind="dxPivotGrid: {
    dataSource: pivotGridDataSource  
}"></div>

var viewModel = {
    pivotGridDataSource: new DevExpress.data.PivotGridDataSource({
        // ...
    })
};
ko.applyBindings(viewModel);

<div id="targetElement"></div>
<div id="popover">
    <p>Popover content</p>
</div>

$(function () {
    $("#popover").dxPopover({
        target: "#targetElement",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend'
    });
});

<div id="targetElement"></div>
<dx-popover
    target="#targetElement"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend">
    <div *dxTemplate="let data of 'content'">
        <p>Popover content</p>
    </div>
</dx-popover>

import { DxPopoverModule } from 'devextreme-angular'
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPopoverModule
    ],
    // ...
})

@(Html.DevExtreme().Popover()
    .ID("popover")
    .Target("#targetElement")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <p>Popover content</p>
    </text>)
)
<div id="targetElement"></div>

@Code
    Html.DevExtreme().Popover() _
        .ID("popover") _
        .Target("#targetElement") _
        .ShowEvent("dxhoverstart") _
        .HideEvent("dxhoverend") _
        .ContentTemplate(Sub()
            @<text>
                <p>Popover content</p>
            </text>
        End Sub).Render()
End Code
<div id="targetElement"></div>

<div id="popup">
    <p>Popup content</p>
</div>

$(function () {
    $("#popup").dxPopup({
        title: "Popup Title",
        visible: true
    });
});

<dx-popup
    title="Popup Title"
    [(visible)]="isPopupVisible">
        <div *dxTemplate="let data of 'content'">
            <p>Popup content</p>
        </div>
</dx-popup>

import { DxPopupModule } from "devextreme-angular"
// ...
export class AppComponent {
    isPopupVisible = true;
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-popup="{
        title: 'Popup Title',
        bindingOptions: {
            visible: 'isPopupVisible'
        }
    }">
        <p>Popup content</p>
    </div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.isPopupVisible = true;
    });

<div data-bind="dxPopup: {
    title: 'Popup Title',
    visible: isPopupVisible
}"></div>

var viewModel = {
    isPopupVisible: ko.observable(true)
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Popup()
    .ID("popover")
    .Title("Popup Title")
    .Visible(true)
    .ContentTemplate(@<text>
        <p>Popup content</p>
    </text>)
)

@Code
    Html.DevExtreme().Popup() _
        .ID("popover") _
        .Title("Popup Title") _
        .Visible(True) _
        .ContentTemplate(Sub()
            @<text>
                <p>Popup content</p>
            </text>
        End Sub).Render()
End Code

$(function () {
    $("#progressBar").dxProgressBar({
        min: 0,
        max: 100,
        value: 49
    });
});

<div id="progressBar"></div>

<dx-progress-bar
    [min]="0"
    [max]="100"
    [value]="49">
</dx-progress-bar>

import { DxProgressBarModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxProgressBarModule
    ],
    // ...
})

@(Html.DevExtreme().ProgressBar()
    .ID("progressBar")
    .Min(0)
    .Max(100)
    .Value(49)
)

@(Html.DevExtreme().ProgressBar() _
    .ID("progressBar") _
    .Min(0) _
    .Max(100) _
    .Value(49)
)

var radioGroupItems = [
    { text: "Item 1", color: "grey" },
    { text: "Item 2", color: "green" },
    { text: "Item 3", color: "yellow" },
    { text: "Item 4", color: "red" }
];
$(function () {
    $("#radioGroup").dxRadioGroup({
        dataSource: radioGroupItems,
        displayExpr: "text",
        valueExpr: "color",
        value: "green"
    });
});

<div id="radioGroup"></div>

<dx-radio-group
    [dataSource]="radioGroupItems"
    displayExpr="text"
    valueExpr="color"
    value="green">
</dx-radio-group>

import { DxRadioGroupModule } from "devextreme-angular"
// ...
export class AppComponent {
    radioGroupItems = [
        { text: "Item 1", color: "grey" },
        { text: "Item 2", color: "green" },
        { text: "Item 3", color: "yellow" },
        { text: "Item 4", color: "red" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxRadioGroupModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-radio-group="{
        dataSource: radioGroupItems,
        displayExpr: 'text',
        valueExpr: 'color',
        value: 'green'
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.radioGroupItems = [
            { text: "Item 1", color: "grey" },
            { text: "Item 2", color: "green" },
            { text: "Item 3", color: "yellow" },
            { text: "Item 4", color: "red" }
        ];
    });

<div data-bind="dxRadioGroup: {
    dataSource: radioGroupItems,
    displayExpr: 'text',
    valueExpr: 'color',
    value: 'green'
}"></div>

var viewModel = {
    radioGroupItems: [
        { text: "Item 1", color: "grey" },
        { text: "Item 2", color: "green" },
        { text: "Item 3", color: "yellow" },
        { text: "Item 4", color: "red" }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().RadioGroup()
    .ID("radioGroup")
    .DisplayExpr("text")
    .ValueExpr("color")
    .Value("green")
    .DataSource(new object[] {
        new { text = "Item 1", color = "grey" },
        new { text = "Item 2", color = "green" },
        new { text = "Item 3", color = "yellow" },
        new { text = "Item 4", color = "red" }
    })
)

@(Html.DevExtreme().RadioGroup() _
    .ID("radioGroup") _
    .DisplayExpr("text") _
    .ValueExpr("color") _
    .Value("green") _
    .DataSource({
        New With { .text = "Item 1", .color = "grey" },
        New With { .text = "Item 2", .color = "green" },
        New With { .text = "Item 3", .color = "yellow" },
        New With { .text = "Item 4", .color = "red" }
    })
)

$(function () {
    $("#rangeSlider").dxRangeSlider({
        min: 0, max: 100,
        start: 20, end: 60
    });
});

<div id="rangeSlider"></div>

<dx-range-slider
    [min]="0" [max]="100"
    [start]="20 [end]="60">
</dx-range-slider>

import { DxRangeSliderModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxRangeSliderModule
    ],
    // ...
})

@(Html.DevExtreme().RangeSlider()
    .ID("rangeSlider")
    .Min(0).Max(100)
    .Start(20).End(60)
)

@(Html.DevExtreme().RangeSlider() _
    .ID("rangeSlider") _
    .Min(0).Max(100) _
    .Start(20).End(60)
)

$(function() {
    $("#resizable").dxResizable({
        width: 200,
        height: 200,
        minWidth: 30,
        minHeight: 30,
        maxWidth: 500,
        maxHeight: 500 
    });
});

<div id="resizable">
    <div id="content"></div>
</div>

#content {
    height: 100%;
    width: 100%
}

<dx-resizable
    [width]="200"
    [height]="200"
    [minWidth]="30"
    [minHeight]="30"
    [maxWidth]="500"
    [maxHeight]="500">
        <div id="content"></div>
</dx-resizable>

#content {
    height: 100%;
    width: 100%
}

import { DxResizableModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxResizableModule
    ],
    // ...
})

<div dx-resizable="{
    width: 200,
    height: 200,
    minWidth: 30,
    minHeight: 30,
    maxWidth: 500,
    maxHeight: 500 
}">
    <div id="content"></div>
</div>

#content {
    height: 100%;
    width: 100%
}

<div data-bind="dxResizable: {
    width: 200,
    height: 200,
    minWidth: 30,
    minHeight: 30,
    maxWidth: 500,
    maxHeight: 500 
}">
    <div id="content"></div>
</div>

#content {
    height: 100%;
    width: 100%
}

@(Html.DevExtreme().Resizable()
    .ID("resizable")
    .Width(200)
    .Height(200)
    .MinWidth(30)
    .MinHeight(30)
    .MaxWidth(500)
    .MaxHeight(500)
    .Content(@<text>
        <div id="content"></div>
    </text>)
)

@Code
    Html.DevExtreme().Resizable() _
        .ID("resizable") _
        .Width(200) _
        .Height(200) _
        .MinWidth(30) _
        .MinHeight(30) _
        .MaxWidth(500) _
        .MaxHeight(500) _
        .Content(Sub()
            @<text>
                <div id="content"></div>
            </text>
        End Sub).Render()
End Code

#content {
    height: 100%;
    width: 100%
}

<html style="height:100%">
    <!-- ... -->
</html>
<body style="height:100%">
    <div id="responsiveBox">
        <div class="header" data-options="dxItem: {
            location: [
                { row: 0, col: 0 }
            ]
        }"> <p>Header</p> </div>
        <div class="content" data-options="dxItem: {
            location: [
                { row: 1, col: 0 }
            ]
        }"> <p>Content</p> </div>
        <div class="footer" data-options="dxItem: {
            location: [
                { row: 2, col: 0 }
            ]
        }"> <p>Footer</p> </div>
    </div>
</body>

$(function () {
    $("#responsiveBox").dxResponsiveBox({
        rows: [
            { ratio: 1 },
            { ratio: 2 },
            { ratio: 0.7 }
        ],
        cols: [
            { ratio: 1 }
        ]
    });
});

#responsiveBox p {
    font-size: 16px;
    padding-top: 10px;
    text-align: center;
}
.header { background: #f39e6c }
.content { background: #f5e5a6 }
.footer { background: #7b9bcf }

<dx-responsive-box>
    <dxi-row [ratio]="1"></dxi-row>
    <dxi-row [ratio]="2"></dxi-row>
    <dxi-row [ratio]="0.7"></dxi-row>
    <dxi-col [ratio]="1"></dxi-col>
    <dxi-item class="header">
        <dxi-location [row]="0" [col]="0"></dxi-location>
        <p>Header</p>
    </dxi-item>
    <dxi-item class="content">
        <dxi-location [row]="1" [col]="0"></dxi-location>
        <p>Content</p>
    </dxi-item>
    <dxi-item class="footer">
        <dxi-location [row]="2" [col]="0"></dxi-location>
        <p>Footer</p>
    </dxi-item>
</dx-responsive-box>

import { DxResponsiveBoxModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxResponsiveBoxModule
    ],
    // ...
})

<html style="height:100%">
    <!-- ... -->
</html>
<body style="height:100%">
    <div id="responsiveBox" dx-responsive-box="{
        rows: [
            { ratio: 1 },
            { ratio: 2 },
            { ratio: 0.7 }
        ],
        cols: [
            { ratio: 1 }
        ]
    }">
        <div class="header" data-options="dxItem: {
            location: [
                { row: 0, col: 0 }
            ]
        }"> <p>Header</p> </div>
        <div class="content" data-options="dxItem: {
            location: [
                { row: 1, col: 0 }
            ]
        }"> <p>Content</p> </div>
        <div class="footer" data-options="dxItem: {
            location: [
                { row: 2, col: 0 }
            ]
        }"> <p>Footer</p> </div>
    </div>
</body>

#responsiveBox p {
    font-size: 16px;
    padding-top: 10px;
    text-align: center;
}
.header { background: #f39e6c }
.content { background: #f5e5a6 }
.footer { background: #7b9bcf }

<html style="height:100%">
    <!-- ... -->
</html>
<body style="height:100%">
    <div id="responsiveBox" data-bind="dxResponsiveBox: {
        rows: [
            { ratio: 1 },
            { ratio: 2 },
            { ratio: 0.7 }
        ],
        cols: [
            { ratio: 1 }
        ]
    }">
        <div class="header" data-options="dxItem: {
            location: [
                { row: 0, col: 0 }
            ]
        }"> <p>Header</p> </div>
        <div class="content" data-options="dxItem: {
            location: [
                { row: 1, col: 0 }
            ]
        }"> <p>Content</p> </div>
        <div class="footer" data-options="dxItem: {
            location: [
                { row: 2, col: 0 }
            ]
        }"> <p>Footer</p> </div>
    </div>
</body>

#responsiveBox p {
    font-size: 16px;
    padding-top: 10px;
    text-align: center;
}
.header { background: #f39e6c }
.content { background: #f5e5a6 }
.footer { background: #7b9bcf }

<html style="height:100%">
    <!-- ... -->
</html>
<body style="height:100%">
    @(Html.DevExtreme().ResponsiveBox()
        .ID("responsiveBox")
        .Rows(rows => {
            rows.Add().Ratio(1);
            rows.Add().Ratio(2);
            rows.Add().Ratio(0.7);
        })
        .Cols(cols => {
            cols.Add().Ratio(1);
        })
        .Items(items => {
            items.Add()
                .Template("<p>Header</p>")
                .Location(locations => {
                    locations.Add().Row(0).Col(0);
                });
            items.Add()
                .Template("<p>Content</p>")
                .Location(locations => {
                    locations.Add().Row(1).Col(0);
                });
            items.Add()
                .Template("<p>Footer</p>")
                .Location(locations => {
                    locations.Add().Row(2).Col(0);
                });
        })
    )
</body>

<html style="height:100%">
    <!-- ... -->
</html>
<body style="height:100%">
    @(Html.DevExtreme().ResponsiveBox() _
        .ID("responsiveBox") _
        .Rows(Sub(rows)
            rows.Add().Ratio(1)
            rows.Add().Ratio(2)
            rows.Add().Ratio(0.7)
        End Sub) _
        .Cols(Sub(cols)
            cols.Add().Ratio(1)
        End Sub) _
        .Items(Sub(items)
            items.Add() _
                .Template("<p>Header</p>") _
                .Location(Sub(locations)
                    locations.Add().Row(0).Col(0)
                End Sub)
            items.Add() _
                .Template("<p>Content</p>") _
                .Location(Sub(locations)
                    locations.Add().Row(1).Col(0)
                End Sub)
            items.Add() _
                .Template("<p>Footer</p>") _
                .Location(Sub(locations)
                    locations.Add().Row(2).Col(0)
                End Sub)
        End Sub)
    )
</body>

#responsiveBox p {
    font-size: 16px;
    padding-top: 10px;
    text-align: center;
}
.header { background: #f39e6c }
.content { background: #f5e5a6 }
.footer { background: #7b9bcf }

$(function () {
    $("#scheduler").dxScheduler({
        dataSource: [{
            text: "Meeting customers",
            startDate: new Date(2015, 4, 10, 11, 0),
            endDate: new Date(2015, 4, 10, 13, 0)
        }, {
            text: "Summing up the results",
            startDate: new Date(2015, 4, 11, 12, 0),
            endDate: new Date(2015, 4, 11, 13, 0)
        },
        // ...
        ],
        currentDate: new Date(2015, 4, 10),
        startDayHour: 8,
        endDayHour: 19
    });
});

<div id="scheduler">

<dx-scheduler
    [dataSource]="schedulerData"
    [currentDate]="new Date(2015, 4, 10)"
    [startDayHour]="8"
    [endDayHour]="19">
</dx-scheduler>

import { DxSchedulerModule } from "devextreme-angular"
// ...
export class AppComponent {
    schedulerData = [{
            text: "Meeting customers",
            startDate: new Date(2015, 4, 10, 11, 0),
            endDate: new Date(2015, 4, 10, 13, 0)
        }, {
            text: "Summing up the results",
            startDate: new Date(2015, 4, 11, 12, 0),
            endDate: new Date(2015, 4, 11, 13, 0)
        },
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

@(Html.DevExtreme().Scheduler()
    .ID("scheduler")
    .DataSource(new object[] {
        new {
            text = "Meeting customers",
            startDate = new DateTime(2015, 5, 10, 11, 0, 0),
            endDate = new DateTime(2015, 5, 10, 13, 0, 0)
        },
        new {
            text = "Summing up the results",
            startDate = new DateTime(2015, 5, 11, 12, 0, 0),
            endDate = new DateTime(2015, 5, 11, 13, 0, 0)
        },
        // ...
    })
    .CurrentDate(new DateTime(2015, 5, 10))
    .StartDayHour(8)
    .EndDayHour(19)
)

@(Html.DevExtreme().Scheduler() _
    .ID("scheduler") _
    .DataSource({
        New With {
            .text = "Meeting customers",
            .startDate = new DateTime(2015, 5, 10, 11, 0, 0),
            .endDate = new DateTime(2015, 5, 10, 13, 0, 0)
        },
        New With {
            .text = "Summing up the results",
            .startDate = new DateTime(2015, 5, 11, 12, 0, 0),
            .endDate = new DateTime(2015, 5, 11, 13, 0, 0)
        }
    }) _
    .CurrentDate(New DateTime(2015, 5, 10)) _
    .StartDayHour(8) _
    .EndDayHour(19)
)

$(function() {
    $("#scrollView").dxScrollView({
        height: 500,
        width: 500,
        direction: "both"
    });
});

<div id="scrollView">
    <div id="content"></div>
</div>

<dx-scroll-view
    [height]="500"
    [width]="500"
    direction="both">
        <div id="content"></div>
</dx-scroll-view>

import { DxScrollViewModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxScrollViewModule
    ],
    // ...
})

@(Html.DevExtreme().ScrollView()
    .ID("scrollView")
    .Height(500)
    .Width(500)
    .Direction(ScrollDirection.Both)
    .Content(@<text>
        <div id="content"></div>
    </text>)
)

@Code
    Html.DevExtreme().ScrollView() _
        .ID("scrollView") _
        .Height(500) _
        .Width(500) _
        .Direction(ScrollDirection.Both) _
        .Content(Sub()
            @<text>
                <div id="content"></div>
            </text>
        End Sub).Render()
End Code

$(function() {
    $("#selectBox").dxSelectBox({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        searchEnabled: true
    });
});

<div id="selectBox"></div>

<dx-select-box
    [dataSource]="selectBoxDataSource"
    [searchEnabled]="true">
</dx-select-box>

import { DxSelectBoxModule } from "devextreme-angular"
// ...
export class AppComponent {
    selectBoxDataSource = [ "Item 1", "Item 2", "Item 3" ];
}
@NgModule({
    imports: [
        // ...
        DxSelectBoxModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-select-box="{
        dataSource: selectBoxDataSource,
        searchEnabled: true
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.selectBoxDataSource = [ "Item 1", "Item 2", "Item 3" ];
    });

<div data-bind="dxSelectBox: {
    dataSource: selectBoxDataSource,
    searchEnabled: true
}"></div>

var viewModel = {
    selectBoxDataSource: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().SelectBox()
    .ID("selectBox")
    .DataSource(new[] { "Item 1", "Item 2", "Item 3" })
    .SearchEnabled(true)
)

@(Html.DevExtreme().SelectBox() _
    .ID("selectBox") _
    .DataSource({ "Item 1", "Item 2", "Item 3" }) _
    .SearchEnabled(True)
)

$(function () {
    $("#slideOut").dxSlideOut({
        dataSource: [ "Item 1", "Item 2", "Item 3", "Item 4" ],
        onItemClick: function (e) {
            e.component.hideMenu();
        }
    });
});

<div id="slideOut"></div>

#slideOut {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<dx-slide-out
    [dataSource]="slideOutDataSource"
    (onItemClick)="closeSlideOut($event)">
</dx-slide-out>

import { DxSlideOutModule } from "devextreme-angular"
// ...
export class AppComponent {
    slideOutDataSource = [ "Item 1", "Item 2", "Item 3", "Item 4" ];
    closeSlideOut = function (e) {
        e.component.hideMenu();
    }
}
@NgModule({
    imports: [
        // ...
        DxSlideOutModule
    ],
    // ...
})

<div id="slideOut" dx-slide-out="{
    dataSource: slideOutDataSource,
    onItemClick: closeSlideOut
}"></div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.slideOutDataSource = [ "Item 1", "Item 2", "Item 3", "Item 4" ];
        $scope.closeSlideOut = function (e) {
            e.component.hideMenu();
        }
    });

#slideOut {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<div id="slideOut" data-bind="dxSlideOut: {
    dataSource: [ "Item 1", "Item 2", "Item 3", "Item 4" ],
    onItemClick: function (e) {
        e.component.hideMenu();
    }
}"></div>

#slideOut {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

@(Html.DevExtreme().SlideOut()
    .ID("slideOut")
    .DataSource(new[] { "Item 1", "Item 2", "Item 3", "Item 4" })
    .OnItemClick(@<text>
        function (e) {
            e.component.hideMenu();
        }
    </text>)
)

@(Html.DevExtreme().SlideOut() _
    .ID("slideOut") _
    .DataSource({ "Item 1", "Item 2", "Item 3", "Item 4" }) _
    .OnItemClick("slideOut_itemClick")
)
<script>
    function slideOut_itemClick(e) {
        e.component.hideMenu();
    }
</script>

<div id="slideOutView">
    <div data-options="dxTemplate: { name: 'view' }">
        <p>View content</p>
    </div>
    <div data-options="dxTemplate: { name: 'menu' }">
        <p>Menu content</p>
    </div>
</div>

$(function () {
    $("#slideOutView").dxSlideOutView({
        contentTemplate: "view",
        menuTemplate: "menu",
    });
});

#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<dx-slide-out-view
    id="slideOutView"
    contentTemplate="view"
    menuTemplate="menu">
        <div *dxTemplate="let viewData of 'view'">
            <p>View content</p>
        </div>
        <div *dxTemplate="let menuData of 'menu'">
            <p>Menu content</p>
        </div>
</dx-slide-out-view>

import { DxSlideOutViewModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSlideOutViewModule
    ],
    // ...
})

::ng-deep #slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<div id="slideOutView" dx-slide-out-view="{
    contentTemplate: 'view',
    menuTemplate: 'menu'
}">
    <div data-options="dxTemplate: { name: 'view' }">
        <p>View content</p>
    </div>
    <div data-options="dxTemplate: { name: 'menu' }">
        <p>Menu content</p>
    </div>
</div>

#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<div id="slideOutView" data-bind="dxSlideOutView: {
    contentTemplate: 'view',
    menuTemplate: 'menu'
}">
    <div data-options="dxTemplate: { name: 'view' }">
        <p>View content</p>
    </div>
    <div data-options="dxTemplate: { name: 'menu' }">
        <p>Menu content</p>
    </div>
</div>

#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

@(Html.DevExtreme().SlideOutView()
    .ID("slideOutView")
    .ContentTemplate(@<text>
        <p>View content</p>
    </text>)
    .MenuTemplate(@<text>
        <p>Menu content</p>
    </text>)
)

@Code
    Html.DevExtreme().SlideOutView() _
        .ID("slideOutView") _
        .ContentTemplate(Sub()
            @<text>
                <p>View content</p>
            </text>
        End Sub) _
        .MenuTemplate(Sub()
            @<text>
                <p>Menu content</p>
            </text>
        End Sub).Render()
End Code

#slideOutView {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

$(function () {
    $("#slider").dxSlider({
        min: 0, max: 100,
        value: 25
    });
});

<div id="slider"></div>

<dx-slider
    [min]="0"
    [max]="100"
    [value]="25">
</dx-slider>

import { DxSliderModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})

@(Html.DevExtreme().Slider()
    .ID("slider")
    .Min(0).Max(100)
    .Value(25)
)

@(Html.DevExtreme().Slider() _
    .ID("slider") _
    .Min(0).Max(100) _
    .Value(25)
)

$(function () {
    $("#switch").dxSwitch({
        value: true
    });
});

<div id="switch"></div>

<dx-switch [value]="true"></dx-switch>

import { DxSwitchModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSwitchModule
    ],
    // ...
})

@(Html.DevExtreme().Switch()
    .ID("switch")
    .Value(true)
)

@(Html.DevExtreme().Switch() _
    .ID("switch") _
    .Value(True)
)

var tabs = [{
    title: 'Tab 1 Title',
    text: 'Tab 1 Text Content'
}, {
    title: 'Tab 2 Title',
    text: 'Tab 2 Text Content'
}, {
    title: 'Tab 3 Title',
    text: 'Tab 3 Text Content'
}];
$(function () {
    $("#tabPanel").dxTabPanel({
        items: tabs
    });
});

<div id="tabPanel"></div>

<dx-tab-panel [items]="tabs"></dx-tab-panel>

import { DxTabPanelModule } from 'devextreme-angular'
// ...
export class AppComponent {
    tabs = [{
        title: 'Tab 1 Title',
        text: 'Tab 1 Text Content'
    }, {
        title: 'Tab 2 Title',
        text: 'Tab 2 Text Content'
    }, {
        title: 'Tab 3 Title',
        text: 'Tab 3 Text Content'
    }];
}
@NgModule({
    imports: [
        // ...
        DxTabPanelModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-tab-panel="{
        items: tabs
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.tabs = [{
            title: 'Tab 1 Title',
            text: 'Tab 1 Text Content'
        }, {
            title: 'Tab 2 Title',
            text: 'Tab 2 Text Content'
        }, {
            title: 'Tab 3 Title',
            text: 'Tab 3 Text Content'
        }];
    });

<div data-bind="dxTabPanel: {
    items: tabs
}"></div>

var viewModel = {
    tabs: [{
        title: 'Tab 1 Title',
        text: 'Tab 1 Text Content'
    }, {
        title: 'Tab 2 Title',
        text: 'Tab 2 Text Content'
    }, {
        title: 'Tab 3 Title',
        text: 'Tab 3 Text Content'
    }]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().TabPanel()
    .ID("tabPanel")
    .Items(items => {
        items.Add().Title("Tab 1 Title").Text("Tab 1 Text Content");
        items.Add().Title("Tab 2 Title").Text("Tab 2 Text Content");
        items.Add().Title("Tab 3 Title").Text("Tab 3 Text Content");
    })
)

@(Html.DevExtreme().TabPanel() _
    .ID("tabPanel") _
    .Items(Sub(items)
        items.Add().Title("Tab 1 Title").Text("Tab 1 Text Content")
        items.Add().Title("Tab 2 Title").Text("Tab 2 Text Content")
        items.Add().Title("Tab 3 Title").Text("Tab 3 Text Content")
    End Sub)
)

var tabs = [
    { text: "User", icon: "user" },
    { text: "Comment", icon: "comment" },
    { text: "Find", icon: "find", badge: "new" }
];
$(function () {
    $("#tabs").dxTabs({
        items: tabs
    });
});

<div id="tabs"></div>

<dx-tabs [items]="tabs"></dx-tabs>

import { DxTabsModule } from "devextreme-angular"
// ...
export class AppComponent {
    tabs = [
        { text: "User", icon: "user" },
        { text: "Comment", icon: "comment" },
        { text: "Find", icon: "find", badge: "new" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTabsModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-tabs="{
        items: tabs
    }"></div>
/div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.tabs = [
            { text: "User", icon: "user" },
            { text: "Comment", icon: "comment" },
            { text: "Find", icon: "find", badge: "new" }  
        ];
    });

<div data-bind="dxTabs: {
    items: tabs
}"></div>

var viewModel = {
    tabs: [
        { text: "User", icon: "user" },
        { text: "Comment", icon: "comment" },
        { text: "Find", icon: "find", badge: "new" }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Tabs()
    .ID("tabs")
    .Items(items => {
        items.Add().Text("User").Icon("user");
        items.Add().Text("Comment").Icon("comment");
        items.Add().Text("Find").Icon("find").Badge("new");
    })
)

@(Html.DevExtreme().Tabs() _
    .ID("tabs") _
    .Items(Sub(items)
        items.Add().Text("User").Icon("user")
        items.Add().Text("Comment").Icon("comment")
        items.Add().Text("Find").Icon("find").Badge("new")
    End Sub)
)

$(function() {
    $("#tagBox").dxTagBox({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        maxDisplayedTags: 2
    });
});

<div id="tagBox"></div>

<dx-tag-box
    [dataSource]="tagBoxDataSource"
    [maxDisplayedTags]="2">
</dx-tag-box>

import { DxTagBoxModule } from "devextreme-angular"
// ...
export class AppComponent {
    tagBoxDataSource = [ "Item 1", "Item 2", "Item 3" ];
}
@NgModule({
    imports: [
        // ...
        DxTagBoxModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-tag-box="{
        dataSource: tagBoxDataSource,
        maxDisplayedTags: 2
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.tagBoxDataSource = [ "Item 1", "Item 2", "Item 3" ];
    });

<div data-bind="dxTagBox: {
    dataSource: tagBoxDataSource,
    maxDisplayedTags: 2
}"></div>

var viewModel = {
    tagBoxDataSource: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().TagBox()
    .ID("tagBox")
    .DataSource(new[] { "Item 1", "Item 2", "Item 3" })
    .MaxDisplayedTags(2)
)

@(Html.DevExtreme().TagBox() _
    .ID("tagBox") _
    .DataSource({ "Item 1", "Item 2", "Item 3" }) _
    .MaxDisplayedTags(2)
)

$(function() {
    $("#textArea").dxTextArea({
        placeholder: "Type a text here..."
    });
});

<div id="textArea"></div>

<dx-text-area placeholder="Type a text here..."></dx-text-area>

import { DxTextAreaModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextAreaModule
    ],
    // ...
})

@(Html.DevExtreme().TextArea()
    .ID("textArea")
    .Placeholder("Type a text here...")
)

@(Html.DevExtreme().TextArea() _
    .ID("textArea") _
    .Placeholder("Type a text here...")
)

$(function() {
    $("#textBox").dxTextBox({
        placeholder: "Type a text here..."
    });
});

<div id="textBox"></div>

<dx-text-box placeholder="Type a text here..."></dx-text-box>

import { DxTextBoxModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextBoxModule
    ],
    // ...
})

@(Html.DevExtreme().TextBox()
    .ID("textBox")
    .Placeholder("Type a text here...")
)

@(Html.DevExtreme().TextBox() _
    .ID("textBox") _
    .Placeholder("Type a text here...")
)

$(function() {
    $("#tileView").dxTileView({
        dataSource: [
            { text: "Tile 1 Text" },
            { text: "Tile 2 Text" },
            { text: "Tile 3 Text" }
        ],
        baseItemHeight: 130,
        baseItemWidth: 180
    });
});

<div id="tileView">

<dx-tile-view
    [dataSource]="tileViewDataSource"
    [baseItemHeight]="130"
    [baseItemWidth]=180>
</dx-tile-view>

import { DxTileViewModule } from "devextreme-angular"
// ...
export class AppComponent {
    tileViewDataSource = [
        { text: "Tile 1 Text" },
        { text: "Tile 2 Text" },
        { text: "Tile 3 Text" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})

<div dx-tile-view="{
    dataSource: tileViewDataSource,
    baseItemHeight: 130,
    baseItemWidth: 180
}"></div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.tileViewDataSource = [
            { text: "Tile 1 Text" },
            { text: "Tile 2 Text" },
            { text: "Tile 3 Text" }
        ];
    });

<div data-bind="dxTileView: {
    dataSource: tileViewDataSource,
    baseItemHeight: 130,
    baseItemWidth: 180
}"></div>

var viewModel = {
    tileViewDataSource: [
        { text: "Tile 1 Text" },
        { text: "Tile 2 Text" },
        { text: "Tile 3 Text" }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().TileView()
    .ID("tileView")
    .DataSource(new[] {
        new { text = "Tile 1 Text" },
        new { text = "Tile 2 Text" },
        new { text = "Tile 3 Text" }
    })
    .BaseItemHeight(130)
    .BaseItemWidth(180)
)

@(Html.DevExtreme().TileView() _
        .ID("tileView") _
        .DataSource({
            New With { .text = "Tile 1 Text" },
            New With { .text = "Tile 2 Text" },
            New With { .text = "Tile 3 Text" }
        }) _
        .BaseItemHeight(130) _
        .BaseItemWidth(180)
)

$(function() {
    $("#toast").dxToast({
        message: "Connection problem",
        type: "error",
        displayTime: 3000
    });
    $("#button").dxButton({
        text: "Show the Toast", 
        onClick: function () {
            $("#toast").dxToast("show");
        } 
    });
});

<div id="toast"></div>
<div id="button"></div>

<dx-toast
    message="Connection problem"
    type="error"
    [displayTime]="3000"
    [(visible)]="isToastVisible">
</dx-toast>
<dx-button
    text="Show the Toast" 
    (onClick)="showToast()">
</dx-button>

import { DxToastModule } from "devextreme-angular"
// ...
export class AppComponent {
    isToastVisible = false;
    showToast() {
        this.isToastVisible = true;
    }
}
@NgModule({
    imports: [
        // ...
        DxToastModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-toast="{
        message: 'Connection problem',
        type: 'error',
        displayTime: 3000,
        bindingOptions: {
            visible: 'isToastVisible'
        } 
    }"></div>
    <div dx-button="{
        text: 'Show the Toast', 
        onClick: showToast
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.isToastVisible = false;
        $scope.showToast = function () {
            $scope.isToastVisible = true
        };
    });

<div data-bind="dxToast: {
    message: 'Connection problem',
    type: 'error',
    displayTime: 3000,
    visible: isToastVisible
}"></div>
<div data-bind="dxButton: {
    text: 'Show the Toast', 
    onClick: showToast
}"></div>

var viewModel = {
    isToastVisible: ko.observable(false),
    showToast: function (e) {
        e.model.isToastVisible(true);
    }
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Toast()
    .ID("toast")
    .Message("Connection problem")
    .Type(ToastType.Error)
    .DisplayTime(3000)
)
@(Html.DevExtreme().Button()
    .ID("button")
    .Text("Show the Toast")
    .OnClick(@<text>
        function (e) {
            $("#toast").dxToast("show")
        }
    </text>)    
)

@(Html.DevExtreme().Toast() _
    .ID("toast") _
    .Message("Connection problem") _
    .Type(ToastType.Error) _
    .DisplayTime(3000)
)
@(Html.DevExtreme().Button() _
    .ID("button") _
    .Text("Show the Toast") _
    .OnClick("button_click")    
)
<script>
    function button_click(e) {
        $("#toast").dxToast("show")
    }
</script>

$(function () {
    $("#toolbar").dxToolbar({
        items: toolbarItems
    });
});

<div id="toolbar"></div>

<dx-toolbar [items]="toolbarData"></dx-toolbar>

import { DxToolbarModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    toolbarData = toolbarItems;
}
@NgModule({
     imports: [
         // ...
         DxToolbarModule,
         DxButtonModule
     ],
     // ...
 })

<div ng-controller="DemoController">
    <div dx-toolbar="{
        items: toolbarData
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.toolbarData = toolbarItems;
    });

<div data-bind="dxToolbar: {
    items: toolbarData
}"></div>

var viewModel = {
    toolbarData: toolbarItems
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().Toolbar()
    .ID("toolbar")
    .Items(items => {
        items.Add()
            .Widget(w => w.Button()
                .Type(ButtonType.Back)
                .Text("Back"))
            .Location(ToolbarItemLocation.Before);
        items.Add()
            .Text("Add")
            .LocateInMenu(ToolbarItemLocateInMenuMode.Always);
        items.Add()
            .Text("Change")
            .LocateInMenu(ToolbarItemLocateInMenuMode.Always);
        items.Add()
            .Text("Products")
            .Location(ToolbarItemLocation.Center);
    })
)

@(Html.DevExtreme().Toolbar() _
    .ID("toolbar") _
    .Items(Sub(items)
        items.Add() _
            .Widget(Function(w)
                Return w.Button() _
                        .Type(ButtonType.Back) _
                        .Text("Back")
            End Function) _
            .Location(ToolbarItemLocation.Before)
        items.Add() _
            .Text("Add") _
            .LocateInMenu(ToolbarItemLocateInMenuMode.Always)
        items.Add() _
            .Text("Change") _
            .LocateInMenu(ToolbarItemLocateInMenuMode.Always)
        items.Add() _
            .Text("Products") _
            .Location(ToolbarItemLocation.Center)
    End Sub)
)

<div id="targetElement"></div>
<div id="tooltip">
    <p>Tooltip content</p>
</div>

$(function () {
    $("#tooltip").dxTooltip({
        target: "#targetElement",
        showEvent: "dxhoverstart",
        hideEvent: "dxhoverend"
    });
});

<div id="targetElement"></div>
<dx-tooltip
    target="#targetElement"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend">
        <p>Tooltip content</p>
</dx-tooltip>

import { DxTooltipModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTooltipModule
    ],
    // ...
})

@(Html.DevExtreme().Tooltip()
    .ID("tooltip")
    .Target("#targetElement")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <p>Tooltip content</p>
    </text>)
)
<div id="targetElement"></div>

@Code
    Html.DevExtreme().Tooltip() _
        .ID("tooltip") _
        .Target("#targetElement") _
        .ShowEvent("dxhoverstart") _
        .HideEvent("dxhoverend") _
        .ContentTemplate(Sub()
            @<text>
                <p>Tooltip content</p>
            </text>
        End Sub).Render
End Code
<div id="targetElement"></div>

$(function () {
    $("#treeList").dxTreeList({
        dataSource: [
            { key: "1", fullName: "John Heart", position: "CEO" }, 
            { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
            { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
            { key: "2", fullName: "Greta Sims", position: "HR Manager" }
        ],
        keyExpr: "key",
        parentIdExpr: "head",
        columns: ["fullName", "position"]
    });
});

<div id="treeList"></div>

<dx-tree-list 
    [dataSource]="employees"
    keyExpr="key"
    parentIdExpr="head">
    <dxi-column dataField="fullName"></dxi-column>
    <dxi-column dataField="position"></dxi-column>
</dx-tree-list>

export class AppComponent {
    employees = [
        { key: "1", fullName: "John Heart", position: "CEO" }, 
        { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
        { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
        { key: "2", fullName: "Greta Sims", position: "HR Manager" }
    ];
}

<div ng-controller="DemoController">
    <div dx-tree-list="{
        dataSource: employees,
        keyExpr: 'key',
        parentIdExpr: 'head',
        columns: ['fullName', 'position']
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.employees = [
            { key: "1", fullName: "John Heart", position: "CEO" }, 
            { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
            { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
            { key: "2", fullName: "Greta Sims", position: "HR Manager" }
        ];
    });

<div data-bind="dxTreeList: {
    dataSource: employees,
    keyExpr: 'key',
    parentIdExpr: 'head',
    columns: ['fullName', 'position']
}"></div>

var viewModel = {
    employees: [
        { key: "1", fullName: "John Heart", position: "CEO" }, 
        { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
        { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
        { key: "2", fullName: "Greta Sims", position: "HR Manager" }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().TreeList()
    .ID("treeList")
    .DataSource(new object[] {
        new { key = "1", fullName = "John Heart", position = "CEO" },
        new { key = "1_1", head = "1", fullName = "Samantha Bright", position = "COO" },
        new { key = "2_1", head = "2", fullName = "Robert Reagan", position = "CMO" },
        new { key = "2", fullName = "Greta Sims", position = "HR Manager" }
    }, "key")
    .ParentIdExpr("head")
    .Columns(columns =>
    {
        columns.Add().DataField("fullName");
        columns.Add().DataField("position");
    })
)

@(Html.DevExtreme().TreeList() _
    .ID("treeList") _
    .DataSource({
        New With { .key = "1", .fullName = "John Heart", .position = "CEO" },
        New With { .key = "1_1", .head = "1", .fullName = "Samantha Bright", .position = "COO" },
        New With { .key = "2_1", .head = "2", .fullName = "Robert Reagan", .position = "CMO" },
        New With { .key = "2", .fullName = "Greta Sims", .position = "HR Manager" }
    }, "key") _
    .ParentIdExpr("head") _
    .Columns(Sub(columns)
        columns.Add().DataField("fullName")
        columns.Add().DataField("position")
    End Sub)
)

$(function () {
    $("#treeView").dxTreeView({
        dataSource: [
            { id: "1", text: "Item 1" },
            { id: "1_1", text: "Subitem 1.1", parentId: "1" },
            { id: "1_2", text: "Subitem 1.2", parentId: "1" },
            { id: "2", text: "Item 2" },
            { id: "2_1", text: "Subitem 2.1", parentId: "2" },
            { id: "2_2", text: "Subitem 2.2", parentId: "2" }
        ],
        dataStructure: "plain"
    });
});

<div id="treeView"></div>

<dx-tree-view
    [dataSource]="treeViewDataSource"
    dataStructure="plain">
</dx-tree-view>

import { DxTreeViewModule } from "devextreme-angular"
// ...
export class AppComponent {
    treeViewDataSource = [
        { id: "1", text: "Item 1" },
        { id: "1_1", text: "Subitem 1.1", parentId: "1" },
        { id: "1_2", text: "Subitem 1.2", parentId: "1" },
        { id: "2", text: "Item 2" },
        { id: "2_1", text: "Subitem 2.1", parentId: "2" },
        { id: "2_2", text: "Subitem 2.2", parentId: "2" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

<div ng-controller="DemoController">
    <div dx-tree-view="{
        dataSource: treeViewDataSource,
        dataStructure: 'plain'
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.treeViewDataSource = [
            { id: "1", text: "Item 1" },
            { id: "1_1", text: "Subitem 1.1", parentId: "1" },
            { id: "1_2", text: "Subitem 1.2", parentId: "1" },
            { id: "2", text: "Item 2" },
            { id: "2_1", text: "Subitem 2.1", parentId: "2" },
            { id: "2_2", text: "Subitem 2.2", parentId: "2" }
        ];
    });

<div data-bind="dxTreeView: {
    dataSource: treeViewDataSource,
    dataStructure: 'plain'
}"></div>

var viewModel = {
    treeViewDataSource: [
        { id: "1", text: "Item 1" },
        { id: "1_1", text: "Subitem 1.1", parentId: "1" },
        { id: "1_2", text: "Subitem 1.2", parentId: "1" },
        { id: "2", text: "Item 2" },
        { id: "2_1", text: "Subitem 2.1", parentId: "2" },
        { id: "2_2", text: "Subitem 2.2", parentId: "2" }
    ]
};
ko.applyBindings(viewModel);

@(Html.DevExtreme().TreeView()
    .ID("treeView")
    .DataSource(new object[] {
        new { id = "1", text = "Item 1" },
        new { id = "1_1", text = "Subitem 1.1", parentId = "1" },
        new { id = "1_2", text = "Subitem 1.2", parentId = "1" },
        new { id = "2", text = "Item 2" },
        new { id = "2_1", text = "Subitem 2.1", parentId = "2" },
        new { id = "2_2", text = "Subitem 2.2", parentId = "2" }
    })
    .DataStructure(TreeViewDataStructure.Plain)
)

@(Html.DevExtreme().TreeView() _
    .ID("treeView") _
    .DataSource({
        New With { .id = "1", .text = "Item 1" },
        New With { .id = "1_1", .text = "Subitem 1.1", .parentId = "1" },
        New With { .id = "1_2", .text = "Subitem 1.2", .parentId = "1" },
        New With { .id = "2", .text = "Item 2" },
        New With { .id = "2_1", .text = "Subitem 2.1", .parentId = "1" },
        New With { .id = "2_2", .text = "Subitem 2.2", .parentId = "1" }
    }) _
    .DataStructure(TreeViewDataStructure.Plain)
)

$(function() {
    var validationGroupName = "sampleGroup";
    $("#textBox1").dxTextBox({ name: "FirstName" })
        .dxValidator({
            validationRules: [
                // ...
            ],
            validationGroup: validationGroupName
        });
    $("#textBox2").dxTextBox({ name: "LastName" })
        .dxValidator({
            validationRules: [
                // ...
            ],
            validationGroup: validationGroupName
        });
    $("#summary").dxValidationSummary({
        validationGroup: validationGroupName
    });
    $("#button").dxButton({
        validationGroup: validationGroupName
        //...
    });
});

<div id="textBox1"></div>
<div id="textBox2"></div>
<div id="summary"></div>
<div id="button"></div>

<dx-validation-group>
    <dx-text-box name="FirstName">
        <dx-validator>
            <dxi-validation-rule type="required" message="First name is required"></dxi-validation-rule>
            ...
        </dx-validator>
    </dx-text-box>
    <dx-text-box name="LastName">
        <dx-validator>
            <dxi-validation-rule type="required" message="Last name is required"></dxi-validation-rule>
            ...
        </dx-validator>
    </dx-text-box>
    <dx-validation-summary></dx-validation-summary>
    <dx-button></dx-button>
</dx-validation-group>

import { DxValidationGroupModule, DxTextBoxModule, DxButtonModule, DxValidatorModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxValidationGroupModule,
        DxTextBoxModule,
        DxButtonModule,
        DxValidatorModule
    ],
    // ...
})

using (Html.DevExtreme().ValidationGroup()) {
    @(Html.DevExtreme().TextBox()
        .Name("FirstName")
    )
    @(Html.DevExtreme().TextBox()
        .Name("LastName")
    )
    @(Html.DevExtreme().ValidationSummary())
    @(Html.DevExtreme().Button()
        .Text("Validate")
        .OnClick(@<text>
            function validate (params) {
                params.validationGroup.validate();
            }
        </text>)
    )
}

@Using (Html.DevExtreme().ValidationGroup())
    @(Html.DevExtreme().TextBox() _
        .Name("FirstName")
    )
    @(Html.DevExtreme().TextBox() _
        .Name("LastName")
    )
    @(Html.DevExtreme().ValidationSummary())
    @(Html.DevExtreme().Button() _
        .Text("Validate") _
        .OnClick("validate")
    )
End Using
<script>
    function validate(params) {
        params.validationGroup.validate();
    }
</script>

$(function() {
    var validationGroupName = "sampleGroup";
    $("#textBox1").dxTextBox({ name: "FirstName" })
        .dxValidator({
            validationRules: [
                // ...
            ],
            validationGroup: validationGroupName
        });
    $("#textBox2").dxTextBox({ name: "LastName" })
        .dxValidator({
            validationRules: [
                // ...
            ],
            validationGroup: validationGroupName
        });
    $("#summary").dxValidationSummary({
        validationGroup: validationGroupName
    });
    $("#button").dxButton({
        validationGroup: validationGroupName,
        text: "Validate",
        onClick: function validate (params) {
            params.validationGroup.validate();
        }
    });
});

<div id="textBox1"></div>
<div id="textBox2"></div>
<div id="summary"></div>
<div id="button"></div>

<dx-validation-group>
    <dx-text-box name="FirstName">
        <dx-validator>
            <dxi-validation-rule type="required" message="First name is required"></dxi-validation-rule>
            ...
        </dx-validator>
    </dx-text-box>
    <dx-text-box name="LastName">
        <dx-validator>
            <dxi-validation-rule type="required" message="Last name is required"></dxi-validation-rule>
            ...
        </dx-validator>
    </dx-text-box>
    <dx-validation-summary></dx-validation-summary>
    <dx-button
        text="Validate"
        (onClick)="validate()">
    </dx-button>
</dx-validation-group>

import { DxValidationSummaryModule, DxValidationGroupModule, DxTextBoxModule, DxButtonModule, DxValidatorModule } from "devextreme-angular"
// ...
export class AppComponent {
    validate(params) {
        params.validationGroup.validate();
    }
}
@NgModule({
    imports: [
        // ...
        DxValidationSummaryModule,
        DxValidationGroupModule,
        DxTextBoxModule, 
        DxButtonModule, 
        DxValidatorModule
    ],
    // ...
})

<div dx-validation-group="{ }" ng-controller="DemoController">
    <div dx-text-box="{ name: 'FirstName' }"
        dx-validator="{
            validationRules: [
                // ...
            ]
        }">  
    </div>
    <div dx-text-box="{ name: 'LastName' }"
        dx-validator="{
            validationRules: [
                // ...
            ]
        }">
    </div>
    <div dx-validation-summary="{  }"></div>
    <div dx-button="{
        text: 'Validate',
        onClick: validate
    }"></div>
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.validate = function validate (params) {
            params.validationGroup.validate();
        };
    });

using (Html.DevExtreme().ValidationGroup()) {
    @(Html.DevExtreme().TextBox()
        .Name("FirstName")
    )
    @(Html.DevExtreme().TextBox()
        .Name("LastName")
    )
    @(Html.DevExtreme().ValidationSummary())
    @(Html.DevExtreme().Button()
        .Text("Validate")
        .OnClick(@<text>
            function validate (params) {
                params.validationGroup.validate();
            }
        </text>)
    )
}

@Using (Html.DevExtreme().ValidationGroup())
    @(Html.DevExtreme().TextBox() _
        .Name("FirstName")
    )
    @(Html.DevExtreme().TextBox() _
        .Name("LastName")
    )
    @(Html.DevExtreme().ValidationSummary())
    @(Html.DevExtreme().Button() _
        .Text("Validate") _
        .OnClick("validate")
    )
End Using
<script>
    function validate(params) {
        params.validationGroup.validate();
    }
</script>

$(function() {
    $("#textBox1").dxTextBox({ })
        .dxValidator({
            validationRules: [
                // ...
            ]
        });
});

<div id="textBox1"></div>

<dx-text-box>
    <dx-validator>
        <dxi-validation-rule type="required" message="Value is required"></dxi-validation-rule>
    </dx-validator>
</dx-text-box>

import { DxValidatorModule, DxTextBoxModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxValidatorModule,
        DxTextBoxModule
    ],
    // ...
})

<div id="target" data-bind="dxhold: { execute: dxholdHandler, timeout: 1000 }">
    Target element
</div>

var viewModel = {
    dxholdHandler: function(viewModel, jQueryEvent) {
        alert(`The ${$(jQueryEvent.target).text()} element was held for ${jQueryEvent.data.timeout} ms.`);
    }
}

<div id="target" dx-hold="{ execute: 'dxholdHandler($event)', timeout: 1000 }">
    Target element
</div>

angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.dxholdHandler = function(jQueryEvent) {
            alert(`The ${$(jQueryEvent.target).text()} element was held for ${jQueryEvent.data.timeout} ms.`);
        }
    });