UI Widgets

Accordion

The Accordion widget contains several panels displayed one under another. These panels can be collapsed or expanded by an end user, which makes this widget very useful for presenting information in a limited amount of space.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo Watch Video

See Also

ActionSheet

The ActionSheet widget is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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");
        };
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo

See Also

Autocomplete

The Autocomplete widget is a textbox that provides suggestions while a user types into it.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#autocomplete").dxAutocomplete({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        placeholder: "Type item name..."
    });
});
<div id="autocomplete"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxAutocomplete: {
    dataSource: autocompleteData,
    placeholder: 'Type item name...'
}"></div>
var viewModel = {
    autocompleteData: [ "Item 1", "Item 2", "Item 3" ]
};

ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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...")
)

View Demo

See Also

BarGauge

The BarGauge widget contains several circular bars that each indicates a single value.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#barGauge").dxBarGauge({
        startValue: 0,
        endValue: 100,
        values: [21.3, 54.1, 30.9, 45.2, 89.41]
    });
});
<div id="barGauge"></div>
Angular
HTML
TypeScript
<dx-bar-gauge
    [startValue]="0"
    [endValue]="100"
    [values]="[21.3, 54.1, 30.9, 45.2, 89.41]">
</dx-bar-gauge>
import { DxBarGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBarGaugeModule
    ],
    // ...
})
AngularJS
HTML
<div dx-bar-gauge="{
    startValue: 0,
    endValue: 100,
    values: [21.3, 54.1, 30.9, 45.2, 89.41]
}"></div>
Knockout
HTML
<div data-bind="dxBarGauge: {
    startValue: 0,
    endValue: 100,
    values: [21.3, 54.1, 30.9, 45.2, 89.41]
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().BarGauge()
    .ID("barGauge")
    .StartValue(0)
    .EndValue(100)
    .Values(new[] { 21.3, 54.1, 30.9, 45.2, 89.41 })
)
@(Html.DevExtreme().BarGauge() _
    .ID("barGauge") _
    .StartValue(0) _
    .EndValue(100) _
    .Values({ 21.3, 54.1, 30.9, 45.2, 89.41 })
)

View Demo Watch Video

See Also

Box

The Box widget allows you to arrange various elements within it. Separate and adaptive, the Box widget acts as a building block for the layout.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
<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%"
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-box="{
    direction: 'row',
    height: '70%',
    width: '90%'
}">
    <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>
Knockout
HTML
<div data-bind="dxBox: {
    direction: 'row',
    height: '70%',
    width: '90%'
}">
    <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>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo Watch Video

See Also

Bullet

The Bullet widget is useful when you need to compare a single measure to a target value. The widget comprises a horizontal bar indicating the measure and a vertical line indicating the target value.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#bullet").dxBullet({
        startScaleValue: 0,
        endScaleValue: 35,
        value: 27,
        target: 24 
    });
});
<div id="bullet"></div>
Angular
HTML
TypeScript
<dx-bullet
    [startScaleValue]="0"
    [endScaleValue]="35"
    [value]="27"
    [target]="24">
</dx-bullet>
import { DxBulletModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBulletModule
    ],
    // ...
})
AngularJS
HTML
<div dx-bullet="{
    startScaleValue: 0,
    endScaleValue: 35,
    value: 27,
    target: 24
}"></div>
Knockout
HTML
<div data-bind="dxBullet: {
    startScaleValue: 0,
    endScaleValue: 35,
    value: 27,
    target: 24 
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Bullet()
    .ID("bullet")
    .StartScaleValue(0)
    .EndScaleValue(35)
    .Value(27)
    .Target(24)
)
@(Html.DevExtreme().Bullet() _
    .ID("bullet") _
    .StartScaleValue(0) _
    .EndScaleValue(35) _
    .Value(27) _
    .Target(24)
)

View Demo Watch Video

See Also

Button

The Button widget is a simple button that performs specified commands when a user clicks it.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#button").dxButton({
        text: "Click me",
        onClick: function() {
            alert("The Button was clicked");
        }
    });
});
<div id="button"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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");
        };
    });
Knockout
HTML
<div data-bind="dxButton: {
    text: 'Click me',
    onClick: function () {
        alert('The Button was clicked');
    }
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>
Vue
<template>
    <dx-button
        text="Click me"
        @click="buttonClicked" />
</template>
<script>
import DxButton from "devextreme-vue/button";

export default {
    components: {
        DxButton
    },
    methods: {
        buttonClicked: function() {
            alert("The Button was clicked");
        }
    }
}
</script>
React
import React from 'react';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    render() {
        return (
            <Button
                text="Click me"
                onClick={this.buttonClicked}
            />  
        );
    }

    buttonClicked() {
        alert('The Button was clicked');
    }
}

export default App;

View Demo

See Also

ButtonGroup

The ButtonGroup is a widget that contains a set of toggle buttons and can be used as a mode switcher.

Calendar

The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#calendar").dxCalendar({
        min: new Date(2000, 1, 1),
        max: new Date(2029, 12, 31),
        firstDayOfWeek: 1,
        value: new Date()
    });
});
<div id="calendar"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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();
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo Watch Video

See Also

Chart

The Chart is a widget that visualizes data from a local or remote storage using a great variety of series types along with different interactive elements, such as tooltips, crosshair pointer, legend, etc.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var fruits = [
    { fruit: 'Oranges', yield: 10, consumed: 7 },
    { fruit: 'Apples', yield: 15, consumed: 14 },
    { fruit: 'Bananas', yield: 9, consumed: 9 }
];
$(function() {
    $("#chart").dxChart({
        dataSource: fruits,
        commonSeriesSettings: {
            argumentField: "fruit",
            type: "bar"
        },
        series: [
            { valueField: "yield" },
            { valueField: "consumed" }
        ]
    });
});
<div id="chart"></div>
Angular
HTML
TypeScript
<dx-chart [dataSource]="fruits">
    <dxo-common-series-settings
        argumentField="fruit"
        type="bar">
    </dxo-common-series-settings>
    <dxi-series valueField="yield"></dxi-series>
    <dxi-series valueField="consumed"></dxi-series>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = [
        { fruit: 'Oranges', yield: 10, consumed: 7 },
        { fruit: 'Apples', yield: 15, consumed: 14 },
        { fruit: 'Bananas', yield: 9, consumed: 9 }  
    ];
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-chart="{
        dataSource: fruits,
        commonSeriesSettings: {
            argumentField: 'fruit',
            type: 'bar'
        },
        series: [
            { valueField: 'yield' },
            { valueField: 'consumed' }
        ]
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.fruits = [
            { fruit: 'Oranges', yield: 10, consumed: 7 },
            { fruit: 'Apples', yield: 15, consumed: 14 },
            { fruit: 'Bananas', yield: 9, consumed: 9 } 
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxChart: {
    dataSource: fruits,
    commonSeriesSettings: {
        argumentField: 'fruit',
        type: 'bar'
    },
    series: [
        { valueField: 'yield' },
        { valueField: 'consumed' }
    ]
}"></div>
var viewModel = {
    fruits: [
        { fruit: 'Oranges', yield: 10, consumed: 7 },
        { fruit: 'Apples', yield: 15, consumed: 14 },
        { fruit: 'Bananas', yield: 9, consumed: 9 }
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Chart()
    .ID("chart")
    .DataSource(new[] {
        new { Fruit = "Oranges", Yield = 10, Consumed = 7 },
        new { Fruit = "Apples", Yield = 15, Consumed = 14 },
        new { Fruit = "Bananas", Yield = 9, Consumed = 9 }
    })
    .CommonSeriesSettings(c => c
        .ArgumentField("Fruit")
        .Type(SeriesType.Bar)
    )
    .Series(series => {
        series.Add().ValueField("Yield");
        series.Add().ValueField("Consumed");
    })
)
@(Html.DevExtreme().Chart() _
    .ID("chart") _
    .DataSource({
        New With { .Fruit = "Oranges", .Yield = 10, .Consumed = 7 },
        New With { .Fruit = "Apples", .Yield = 15, .Consumed = 14 },
        New With { .Fruit = "Bananas", .Yield = 9, .Consumed = 9 }
    }) _
    .CommonSeriesSettings(Sub(c)
        c.ArgumentField("Fruit") _
            .Type(SeriesType.Bar)
    End Sub) _
    .Series(Sub(series)
        series.Add().ValueField("Yield")
        series.Add().ValueField("Consumed")
    End Sub)
)

View Demo

See Also

CheckBox

The CheckBox is a small box, which when selected by the end user, shows that a particular feature has been enabled or a specific option has been chosen.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#checkBox").dxCheckBox({
        text: "Toggle me",
        value: undefined,
        onValueChanged: function (e) {
            alert(e.value);
        }
    });
});
<div id="checkBox"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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);
        };
    });
Knockout
HTML
<div data-bind="dxCheckBox: {
    text: 'Toggle me',
    value: undefined,
    onValueChanged: function (e) {
        alert(e.value);
    }
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo

See Also

CircularGauge

The CircularGauge is a widget that indicates values on a circular numeric scale.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#circularGauge").dxCircularGauge({
        scale: {
            startValue: 50,
            endValue: 150
        },    
        rangeContainer: {
            ranges: [
                { startValue: 50, endValue: 90 },
                { startValue: 90, endValue: 130 },
                { startValue: 130, endValue: 150 }
            ]
        },
        value: 105
    });
});
<div id="circularGauge"></div>
Angular
HTML
TypeScript
<dx-circular-gauge [value]="105">
    <dxo-scale
        [startValue]="50"
        [endValue]="150">
    </dxo-scale>
    <dxo-range-container>
        <dxi-range 
            [startValue]="50"
            [endValue]="90">
        </dxi-range>
        <dxi-range 
            [startValue]="90"
            [endValue]="130">
        </dxi-range>
        <dxi-range 
            [startValue]="130"
            [endValue]="150">
        </dxi-range>
    </dxo-range-container>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
AngularJS
HTML
<div dx-circular-gauge="{
    scale: {
        startValue: 50,
        endValue: 150
    },    
    rangeContainer: {
        ranges: [
            { startValue: 50, endValue: 90 },
            { startValue: 90, endValue: 130 },
            { startValue: 130, endValue: 150 }
        ]
    },
    value: 105
}"></div>
Knockout
HTML
<div data-bind="dxCircularGauge: {
    scale: {
        startValue: 50,
        endValue: 150
    },    
    rangeContainer: {
        ranges: [
            { startValue: 50, endValue: 90 },
            { startValue: 90, endValue: 130 },
            { startValue: 130, endValue: 150 }
        ]
    },
    value: 105
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Scale(scale => scale
        .StartValue(50)
        .EndValue(50)
    )
    .RangeContainer(rc => rc
        .Ranges(ranges => {
            ranges.Add().StartValue(50).EndValue(90);
            ranges.Add().StartValue(90).EndValue(130);
            ranges.Add().StartValue(130).EndValue(150);
        })
    )
    .Value(105)
)
@(Html.DevExtreme().CircularGauge() _
    .ID("circularGauge") _
    .Scale(Sub(scale)
        scale.StartValue(50) _
                .EndValue(50)
    End Sub) _
    .RangeContainer(Sub(rc)
        rc.Ranges(Sub(ranges)
            ranges.Add().StartValue(50).EndValue(90)
            ranges.Add().StartValue(90).EndValue(130)
            ranges.Add().StartValue(130).EndValue(150)
        End Sub)
    End Sub) _
    .Value(105)
)

View Demo Watch Video

See Also

ColorBox

The ColorBox is a widget that allows an end user to enter a color or pick it out from the drop-down editor.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#colorBox").dxColorBox({
        value: "rgba(255, 144, 0, 0.3)",
        editAlphaChannel: true
    });
});
<div id="colorBox"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-color-box="{
    value: 'rgba(255, 144, 0, 0.3)',
    editAlphaChannel: true
}"></div>
Knockout
HTML
<div data-bind="dxColorBox: {
    value: 'rgba(255, 144, 0, 0.3)',
    editAlphaChannel: true
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

ContextMenu

The ContextMenu widget displays a single- or multi-level context menu. An end user invokes this menu by a right click or a long press.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }
                ]
            }
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo

See Also

DataGrid

The DataGrid is a widget that represents data from a local or remote source in the form of a grid. This widget offers such basic features as sorting, grouping, filtering, as well as more advanced capabilities, like state storing, export to Excel, master-detail interface, and many others.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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"
        }];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)
See Also

View Demo Watch Video

DateBox

The DateBox is a widget that displays date and time in a specified format, and enables a user to pick or type in the required date/time value.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#dateBox").dxDateBox({
        min: new Date(2000, 0, 1),
        max: new Date(2029, 11, 31),
        value: new Date()
    });
});
<div id="dateBox"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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();
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

DeferRendering

The DeferRendering is a widget that waits for its content to be ready before rendering it. While the content is getting ready, the DeferRendering displays a loading indicator.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
<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();
    });
});
Angular
HTML
TypeScript
<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();
}
AngularJS
HTML
JavaScript
<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();
    });
Knockout
HTML
JavaScript
<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);
See Also

Drawer

The Drawer is a dismissible or permanently visible panel used for navigation in responsive web application layouts.

DropDownBox

The DropDownBox widget consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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;
        }
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo Watch Video

FileUploader

The FileUploader widget enables an end user to upload files to the server. An end user can select files in the file explorer or drag and drop files to the FileUploader area on the page.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#fileUploader").dxFileUploader({
        accept:"image/*"
    });
});
<div id="fileUploader"></div>
Angular
HTML
TypeScript
<dx-file-uploader accept="image/*"></dx-file-uploader>
import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})
AngularJS
HTML
<div dx-file-uploader="{
    accept: 'image/*'
}"></div>
Knockout
HTML
<div data-bind="dxFileUploader: {
    accept: 'image/*'
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().FileUploader()
    .ID("fileUploader")
    .Accept("image/*")
)
@(Html.DevExtreme().FileUploader() _
    .ID("fileUploader") _
    .Accept("image/*")
)

View Demo Watch Video

See Also

FilterBuilder

The FilterBuilder widget allows a user to build complex filter expressions with an unlimited number of filter conditions, combined by logical operations using the UI.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div ng-controller="DemoController">
    <div dx-filter-builder="{
        value: ['Category', 'contains', 'Tel'],
        fields: [{
            dataField: 'Category'
        }, {
            dataField: 'Shipped',
            caption: 'Shipment Date',
            dataType: 'date'
        }, {
            dataField: 'UnitPrice',
            dataType: 'number'
        }]
    }"></div>
</div>
Knockout
HTML
<div data-bind="dxFilterBuilder: {
    value: ['Category', 'contains', 'Tel'],
    fields: [{
        dataField: 'Category'
    }, {
        dataField: 'Shipped',
        caption: 'Shipment Date',
        dataType: 'date'
    }, {
        dataField: 'UnitPrice',
        dataType: 'number'
    }]
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)
See Also

Form

The Form widget represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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"
        };
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)  
See Also

Funnel

The Funnel is a widget that visualizes a value at different stages. It helps assess value changes throughout these stages and identify potential issues. The Funnel widget conveys information using different interactive elements (tooltips, labels, legend) and enables you to create not only a funnel, but also a pyramid chart.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var userStatistics = [
    { action: "Visited the Website", users: 9152 },
    { action: "Downloaded a Trial", users: 6879 },
    { action: "Contacted Support", users: 5121 },
    { action: "Subscribed", users: 2224 },
    { action: "Renewed", users: 1670 }
];

$(function() {
    $("#funnel").dxFunnel({
        dataSource: userStatistics,
        argumentField: "action",
        valueField: "users"
    });
});
<div id="funnel"></div>
Angular
HTML
TypeScript
<dx-funnel
    [dataSource]="userStatistics"
    argumentField="action"
    valueField="users">
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    userStatistics = [
        { action: "Visited the Website", users: 9152 },
        { action: "Downloaded a Trial", users: 6879 },
        { action: "Contacted Support", users: 5121 },
        { action: "Subscribed", users: 2224 },
        { action: "Renewed", users: 1670 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-funnel="{
        dataSource: userStatistics,
        argumentField: 'action',
        valueField: 'users'
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.userStatistics = [
            { action: "Visited the Website", users: 9152 },
            { action: "Downloaded a Trial", users: 6879 },
            { action: "Contacted Support", users: 5121 },
            { action: "Subscribed", users: 2224 },
            { action: "Renewed", users: 1670 }
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxFunnel: {
    dataSource: userStatistics,
    argumentField: 'action',
    valueField: 'users'
}"></div>
var viewModel = {
    userStatistics: [
        { action: "Visited the Website", users: 9152 },
        { action: "Downloaded a Trial", users: 6879 },
        { action: "Contacted Support", users: 5121 },
        { action: "Subscribed", users: 2224 },
        { action: "Renewed", users: 1670 }
    ]
};

ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Funnel()
    .ID("funnel")
    .DataSource(new List&lt;object&gt; {
        new { Action = "Visited the Website", Users = 9152 },
        new { Action = "Downloaded a Trial", Users = 6879 },
        new { Action = "Contacted Support", Users = 5121 },
        new { Action = "Subscribed", Users = 2224 },
        new { Action = "Renewed", Users = 1670 }
    })
    .ArgumentField("Action")
    .ValueField("Users")
)
@(Html.DevExtreme().Funnel() _
    .ID("funnel") _
    .DataSource(New List(Of Object) From {
        New With { .Action = "Visited the Website", .Users = 9152 },
        New With { .Action = "Downloaded a Trial", .Users = 6879 },
        New With { .Action = "Contacted Support", .Users = 5121 },
        New With { .Action = "Subscribed", .Users = 2224 },
        New With { .Action = "Renewed", .Users = 1670 }
    }) _
    .ArgumentField("Action") _
    .ValueField("Users")
)

View Demo

See Also

Gallery

The Gallery is a widget that displays a collection of images in a carousel. The widget is supplied with various navigation controls that allow a user to switch between images.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-gallery="{
    dataSource: [
        'http://path/to/image/1.png',
        'http://path/to/image/2.png',
        'http://path/to/image/3.png'
    ],
    height: 300
}"></div>
Knockout
HTML
<div data-bind="dxGallery: {
    dataSource: [
        'http://path/to/image/1.png',
        'http://path/to/image/2.png',
        'http://path/to/image/3.png'
    ],
    height: 300
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

HtmlEditor CTP

HtmlEditor is a WYSIWYG text editor build on top of Quill, designed to support HTML and Markdown output formats.

HtmlEditor is at the Community Technology Preview (CTP) development stage. That means that the widget is available for testing, but its concept, design and behavior can be reconsidered and changed without notice.

NOTE
The HtmlEditor requires the Quill library.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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.14/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.14/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.14/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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.14/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.14/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.14/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"
            ]
        };
    });
Knockout
HTML
JavaScript
<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.14/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.14/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.14/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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>
Vue
<template>
    <dx-html-editor
        value-type="html">
        <dx-toolbar :items="items" />
            <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>
</template>
<script>
import { DxHtmlEditor, DxToolbar } from "devextreme-vue/html-editor";

export default {
    components: {
        DxHtmlEditor,
        DxToolbar
    },
    data() {
        return {
            items: [
                "bold", "italic", "separator", {
                    formatName: "size",
                    formatValues: ["11px", "12px", "16px"]
                }, "separator",
                "alignLeft", "alignCenter", "alignRight"
            ]
        };
    }
}
</script>
React
import React from "react";
import HtmlEditor, { Toolbar } from "devextreme-react/html-editor";

const items = [
    "bold", "italic", "separator", {
        formatName: "size",
        formatValues: ["11px", "12px", "16px"]
    }, "separator",
    "alignLeft", "alignCenter", "alignRight"
];

class App extends React.Component {
    render() {
        return (
            <HtmlEditor
                valueType="html">
                    <Toolbar items={items} />
                    <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>
            </HtmlEditor>
        );
    }
}

export default App;

View Demo

See Also

LinearGauge

The LinearGauge is a widget that indicates values on a linear numeric scale.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#linearGauge").dxLinearGauge({
        scale: {
            startValue: 50,
            endValue: 150
        },    
        rangeContainer: {
            ranges: [
                { startValue: 50, endValue: 90 },
                { startValue: 90, endValue: 130 },
                { startValue: 130, endValue: 150 }
            ]
        },
        value: 105
    });
});
<div id="linearGauge"></div>
Angular
HTML
TypeScript
<dx-linear-gauge [value]="105">
    <dxo-scale
        [startValue]="50"
        [endValue]="150">
    </dxo-scale>
    <dxo-range-container>
        <dxi-range 
            [startValue]="50"
            [endValue]="90">
        </dxi-range>
        <dxi-range 
            [startValue]="90"
            [endValue]="130">
        </dxi-range>
        <dxi-range 
            [startValue]="130"
            [endValue]="150">
        </dxi-range>
    </dxo-range-container>
</dx-linear-gauge>
import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})
AngularJS
HTML
<div dx-linear-gauge="{
    scale: {
        startValue: 50,
        endValue: 150
    },    
    rangeContainer: {
        ranges: [
            { startValue: 50, endValue: 90 },
            { startValue: 90, endValue: 130 },
            { startValue: 130, endValue: 150 }
        ]
    },
    value: 105
}"></div>
Knockout
HTML
<div data-bind="dxLinearGauge: {
    scale: {
        startValue: 50,
        endValue: 150
    },    
    rangeContainer: {
        ranges: [
            { startValue: 50, endValue: 90 },
            { startValue: 90, endValue: 130 },
            { startValue: 130, endValue: 150 }
        ]
    },
    value: 105
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().LinearGauge()
    .ID("linearGauge")
    .Scale(scale => scale
        .StartValue(50)
        .EndValue(50)
    )
    .RangeContainer(rc => rc
        .Ranges(ranges => {
            ranges.Add().StartValue(50).EndValue(90);
            ranges.Add().StartValue(90).EndValue(130);
            ranges.Add().StartValue(130).EndValue(150);
        })
    )
    .Value(105)
)
@(Html.DevExtreme().LinearGauge() _
    .ID("linearGauge") _
    .Scale(Sub(scale)
        scale.StartValue(50) _
                .EndValue(50)
    End Sub) _
    .RangeContainer(Sub(rc)
        rc.Ranges(Sub(ranges)
            ranges.Add().StartValue(50).EndValue(90)
            ranges.Add().StartValue(90).EndValue(130)
            ranges.Add().StartValue(130).EndValue(150)
        End Sub)
    End Sub) _
    .Value(105)
)

View Demo Watch Video

See Also

List

The List is a widget that represents a collection of items in a scrollable list.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#list").dxList({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        searchEnabled: true
    });
});
<div id="list"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxList: {
    dataSource: listData,
    searchEnabled: true
}"></div>
var viewModel = {
    listData: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)
See Also

View Demo

LoadIndicator

The LoadIndicator is a UI element notifying the viewer that a process is in progress.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#loadIndicator").dxLoadIndicator({
        visible: true
    });
});
<div id="loadIndicator"></div>
Angular
HTML
TypeScript
<dx-load-indicator [(visible)]="isLoadIndicatorVisible"></dx-load-indicator>
import { DxLoadIndicatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadIndicatorVisible = true;
}
@NgModule({
    imports: [
        // ...
        DxLoadIndicatorModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-load-indicator="{
        bindingOptions: {
            visible: 'isLoadIndicatorVisible'
        }
    }"></div>
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.isLoadIndicatorVisible = true;
    });
Knockout
HTML
JavaScript
<div data-bind="dxLoadIndicator: {
    visible: isLoadIndicatorVisible
}"></div>
var viewModel = {
    isLoadIndicatorVisible: ko.observable(true)
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().LoadIndicator()
    .ID("loadIndicator")
    .Visible(true)
)
@(Html.DevExtreme().LoadIndicator() _
    .ID("loadIndicator") _
    .Visible(True)
)

View Demo

See Also

LoadPanel

The LoadPanel is an overlay widget notifying the viewer that loading is in progress.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#loadPanel").dxLoadPanel({
        closeOnOutsideClick: true,
        visible: true
    });
});
<div id="loadPanel"></div>
Angular
HTML
TypeScript
<dx-load-panel
    [closeOnOutsideClick]="true"
    [(visible)]="isLoadPanelVisible">
</dx-load-panel>
import { DxLoadPanelModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadPanelVisible = true;
}
@NgModule({
    imports: [
        // ...
        DxLoadPanelModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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;
    });
Knockout
HTML
JavaScript
<div data-bind="dxLoadPanel: {
    closeOnOutsideClick: true,
    visible: isLoadPanelVisible
}"></div>
var viewModel = {
    isLoadPanelVisible: ko.observable(true)
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().LoadPanel()
    .ID("loadPanel")
    .CloseOnOutsideClick(true)
    .Visible(true)
)
@(Html.DevExtreme().LoadPanel() _
    .ID("loadPanel") _
    .CloseOnOutsideClick(True) _
    .Visible(True)
)

View Demo

See Also

Lookup

The Lookup is a widget that allows an end user to search for an item in a collection shown in a drop-down menu.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#lookup").dxLookup({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        placeholder: "Select an item"
    });
});
<div id="lookup"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxLookup: {
    dataSource: lookupDataSource,
    placeholder: 'Select an item'
}"></div>
var viewModel = {
    lookupDataSource: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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")
)
See Also

View Demo

Map

The Map is an interactive widget that displays a geographic map with markers and routes.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#map").dxMap({
        provider: "bing",
        type: "roadmap",
        zoom: 10,
        center: "40.749825, -73.987963"
    });
});
<div id="map"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-map="{
    provider: 'bing',
    type: 'roadmap',
    zoom: 10,
    center: '40.749825, -73.987963'
}"></div>
Knockout
HTML
<div data-bind="dxMap: {
    provider: 'bing',
    type: 'roadmap',
    zoom: 10,
    center: '40.749825, -73.987963'
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)
See Also

View Demo

Menu

The Menu widget is a panel with clickable items. A click on an item opens a drop-down menu, which can contain several submenus.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#menu").dxMenu({
        items: [
            { text: "Hide" },
            { text: "Delete" },
            {
                text: "Clipboard",
                items: [
                    { text: "Copy" },
                    { text: "Clear" },
                    { text: "Paste" }
                ]
            }
        ]
    });
});
<div id="menu"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }
                ]
            }
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo Watch Video

See Also

MultiView

The MultiView is a widget that contains several views. An end user navigates through the views by swiping them in the horizontal direction.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#multiView").dxMultiView({
        items: [
            { text: "View 1" },
            { text: "View 2" },
            { text: "View 3" }
        ]
    });
});
<div id="multiView"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxMultiView: {
    items: multiViewItems
}"></div>
var viewModel = {
    multiViewItems: [
        { text: "View 1" },
        { text: "View 2" },
        { text: "View 3" }
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

NavBar

The NavBar is a widget that navigates the application views.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#navBar").dxNavBar({
        items: [
            { text: "Home", icon: "home" },
            { text: "About", icon: "info" },
            { text: "Favorites", icon: "favorites", badge: "new" }
        ]
    });
});
<div id="navBar"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-nav-bar="{
    items: [
        { text: 'Home', icon: 'home' },
        { text: 'About', icon: 'info' },
        { text: 'Favorites', icon: 'favorites', badge: 'new' }
    ]
}"></div>
Knockout
HTML
<div data-bind="dxNavBar: {
    items: [
        { text: 'Home', icon: 'home' },
        { text: 'About', icon: 'info' },
        { text: 'Favorites', icon: 'favorites', badge: 'new' }
    ]
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

NumberBox

The NumberBox is a widget that displays a numeric value and allows a user to modify it by typing in a value, and incrementing or decrementing it using the keyboard or mouse.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#numberBox").dxNumberBox({
        value: 20,
        min: 16,
        max: 100,
        placeholder: "Enter your age"
    });
});
<div id="numberBox"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-number-box="{
    value: 20,
    min: 16,
    max: 100,
    placeholder: 'Enter your age'
}"></div>
Knockout
HTML
<div data-bind="dxNumberBox: {
    value: 20,
    min: 16,
    max: 100,
    placeholder: 'Enter your age'
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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")
)

View Demo

See Also

Panorama

The Panorama widget is a full-screen widget that allows you to arrange items on a long horizontal canvas split into several views. Each view contains several items, and an end user navigates the views with the swipe gesture. The Panorama is often used as a navigation map on the first page of an application.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
CSS
$(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%;
}
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
CSS
<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%;
}
Knockout
HTML
JavaScript
CSS
<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%;
}
See Also

PieChart

The PieChart is a widget that visualizes data as a circle divided into sectors that each represents a portion of the whole.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var fruits = [
    { fruit: "Oranges", yield: 10, consumed: 7 },
    { fruit: "Apples", yield: 15, consumed: 14 },
    { fruit: "Bananas", yield: 9, consumed: 9 }
];
$(function() {
    $("#pieChart").dxPieChart({
        dataSource: fruits,
        commonSeriesSettings: {
            argumentField: "fruit"
        },
        series: [
            { valueField: "yield" },
            { valueField: "consumed" }
        ]
    });
});
<div id="pieChart"></div>
Angular
HTML
TypeScript
<dx-pie-chart [dataSource]="fruits">
    <dxo-common-series-settings argumentField="fruit"></dxo-common-series-settings>
    <dxi-series valueField="yield"></dxi-series>
    <dxi-series valueField="consumed"></dxi-series>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = [
        { fruit: "Oranges", yield: 10, consumed: 7 },
        { fruit: "Apples", yield: 15, consumed: 14 },
        { fruit: "Bananas", yield: 9, consumed: 9 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-pie-chart="{
        dataSource: fruits,
        commonSeriesSettings: {
            argumentField: 'fruit'
        },
        series: [
            { valueField: 'yield' },
            { valueField: 'consumed' }
        ]
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.fruits = [
            { fruit: "Oranges", yield: 10, consumed: 7 },
            { fruit: "Apples", yield: 15, consumed: 14 },
            { fruit: "Bananas", yield: 9, consumed: 9 }   
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxPieChart: {
    dataSource: fruits,
    commonSeriesSettings: {
        argumentField: 'fruit'
    },
    series: [
        { valueField: 'yield' },
        { valueField: 'consumed' }
    ]
}"></div>
var viewModel = {
    fruits: [
        { fruit: "Oranges", yield: 10, consumed: 7 },
        { fruit: "Apples", yield: 15, consumed: 14 },
        { fruit: "Bananas", yield: 9, consumed: 9 }
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().PieChart()
    .ID("pieChart")
    .DataSource(new[] {
        new { Fruit = "Oranges", Yield = 10, Consumed = 7 },
        new { Fruit = "Apples", Yield = 15, Consumed = 14 },
        new { Fruit = "Bananas", Yield = 9, Consumed = 9 }
    })
    .CommonSeriesSettings(c => c
        .ArgumentField("Fruit")
    )
    .Series(series => {
        series.Add().ValueField("Yield");
        series.Add().ValueField("Consumed");
    })
)
@(Html.DevExtreme().PieChart() _
    .ID("pieChart") _
    .DataSource({
        New With { .Fruit = "Oranges", .Yield = 10, .Consumed = 7 },
        New With { .Fruit = "Apples", .Yield = 15, .Consumed = 14 },
        New With { .Fruit = "Bananas", .Yield = 9, .Consumed = 9 }
    }) _
    .CommonSeriesSettings(Sub(c)
        c.ArgumentField("Fruit")
    End Sub) _
    .Series(Sub(series)
        series.Add().ValueField("Yield")
        series.Add().ValueField("Consumed")
    End Sub)

View Demo Watch Video

See Also

Pivot

The Pivot provides a quick way to manage multiple views. It includes a collection of views and a navigation header. An end user switches the views by swiping them or by clicking their titles on the navigation header.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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"
        }];
    });
Knockout
HTML
JavaScript
<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);
See Also

PivotGrid

The PivotGrid is a widget that allows you to display and analyze multi-dimensional data from a local storage or an OLAP cube.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-pivot-grid="{
    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>
Knockout
HTML
<div data-bind="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>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

To provide data for the PivotGrid widget, specify a data source. PivotGrid accepts the PivotGridDataSource data source only. You can pass its configuration to the dataSource field without creating the separate PivotGridDataSource object as shown above.

View Demo Watch Video

PivotGridFieldChooser

A complementary widget for the PivotGrid that allows you to manage data displayed in the PivotGrid. The field chooser is already integrated in the PivotGrid and can be invoked using the context menu. If you need to continuously display the field chooser near the PivotGrid widget, use the PivotGridFieldChooser widget.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
    // ...
});
$(function () {
    $("#fieldChooser").dxPivotGridFieldChooser({
        dataSource: pivotGridDataSource
    });
    $("#pivotGrid").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});
<div id="fieldChooser"></div>
<div id="pivotGrid"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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({
            // ...   
        });
    });
Knockout
HTML
JavaScript
<div data-bind="dxPivotGridFieldChooser: {
    dataSource: pivotGridDataSource
}"></div>
<div data-bind="dxPivotGrid: {
    dataSource: pivotGridDataSource  
}"></div>
var viewModel = {
    pivotGridDataSource: new DevExpress.data.PivotGridDataSource({
        // ...
    })
};
ko.applyBindings(viewModel);

Both the PivotGridFieldChooser and the PivotGrid must be bound to one and the same instance of the PivotGridDataSource. Create the PivotGridDataSource individually and then assign it to both widgets as shown in the code above.

View Demo

PolarChart

The PolarChart is a widget that visualizes data in a polar coordinate system.

The PolarChart widget visualizes data in a polar coordinate system. In this system, each point on a plane is determined by the distance from the center (the point's value) and the angle from a fixed direction (the point's argument). To understand how a chart is displayed in a polar coordinate system, imagine how it would be displayed in a rectangular coordinate system and then round off the argument axis in your mind.

DevExtreme HTML5 Charts DataVisualization DevExtreme HTML5 Charts PolarChart RadarChart DataVisualization

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var temperature = [
    { month: "January", day: 6, night: 2 },
    { month: "February", day: 7, night: 2 },
    { month: "March", day: 10, night: 3 },
    { month: "April", day: 14, night: 5 },
    { month: "May", day: 18, night: 8 },
    { month: "June", day: 21, night: 11 },
    { month: "July", day: 22, night: 13 },
    { month: "August", day: 22, night: 13 },
    { month: "September", day: 19, night: 11 },
    { month: "October", day: 15, night: 8 },
    { month: "November", day: 10, night: 5 },
    { month: "December", day: 7, night: 3 }
];
$(function() {
    $("#polarChart").dxPolarChart({
        dataSource: temperature,
        commonSeriesSettings: {     
            argumentField: "month",
            type: "scatter"
        },
        series: [
            { valueField: "day", name: "Day" }, 
            { valueField: "night", name: "Night" }
        ]
    });
});
<div id="polarChart"></div>
Angular
HTML
TypeScript
<dx-polar-chart [dataSource]="temperature">
    <dxo-common-series-settings
        argumentField="month"
        type="scatter">
    </dxo-common-series-settings>
    <dxi-series
        valueField="day"
        name="Day">
    </dxi-series>
    <dxi-series
        valueField="night"
        name="Night">
    </dxi-series>
</dx-polar-chart>
import { DxPolarChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    temperature = [
        { month: "January", day: 6, night: 2 },
        { month: "February", day: 7, night: 2 },
        { month: "March", day: 10, night: 3 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxPolarChartModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-polar-chart="{
        dataSource: temperature,
        commonSeriesSettings: {     
            argumentField: 'month',
            type: 'scatter'
        },
        series: [
            { valueField: 'day', name: 'Day' }, 
            { valueField: 'night', name: 'Night' }
        ]
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.temperature = [
            { month: "January", day: 6, night: 2 },
            { month: "February", day: 7, night: 2 },
            { month: "March", day: 10, night: 3 }
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxPolarChart: {
    dataSource: temperature,
    commonSeriesSettings: {     
        argumentField: 'month',
        type: 'scatter'
    },
    series: [
        { valueField: 'day', name: 'Day' }, 
        { valueField: 'night', name: 'Night' }
    ]
}"></div>
var viewModel = {
    temperature: [
        { month: "January", day: 6, night: 2 },
        { month: "February", day: 7, night: 2 },
        { month: "March", day: 10, night: 3 }
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().PolarChart()
    .ID("polarChart")
    .DataSource(new[] {
        new { Month = "January", Day = 6, Night = 2 },
        new { Month = "February", Day = 7, Night = 2 },
        new { Month = "March", Day = 10, Night = 3 }
    })
    .CommonSeriesSettings(c => c
        .ArgumentField("Month")
        .Type(PolarChartSeriesType.Scatter)
    )
    .Series(series => {
        series.Add().ValueField("Day");
        series.Add().ValueField("Night");
    })
)
@(Html.DevExtreme().PolarChart() _
    .ID("polarChart") _
    .DataSource({
        New With { .Month = "January", .Day = 6, .Night = 2 },
        New With { .Month = "February", .Day = 7, .Night = 2 },
        New With { .Month = "March", .Day = 10, .Night = 3 }
    }) _
    .CommonSeriesSettings(Sub(c)
        c.ArgumentField("Month") _
            .Type(PolarChartSeriesType.Scatter)
    End Sub) _
    .Series(Sub(series)
        series.Add().ValueField("Day")
        series.Add().ValueField("Night")
    End Sub)
)

View Demo Watch Video

See Also

Popover

The Popover is a widget that shows notifications within a box with an arrow pointing to a specified UI element.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
<div id="targetElement"></div>
<div id="popover">
    <p>Popover content</p>
</div>
$(function () {
    $("#popover").dxPopover({
        target: "#targetElement",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend'
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div id="targetElement"></div>
<div dx-popover="{
    target: '#targetElement',
    showEvent: 'dxhoverstart',
    hideEvent: 'dxhoverend'
}">
    <p>Popover content</p>
</div>
Knockout
HTML
<div id="targetElement"></div>
<div data-bind="dxPopover: {
    target: '#targetElement',
    showEvent: 'dxhoverstart',
    hideEvent: 'dxhoverend'
}">
    <p>Popover content</p>
</div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo Watch Video

See Also

Popup

The Popup widget is a pop-up window overlaying the current view.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
<div id="popup">
    <p>Popup content</p>
</div>
$(function () {
    $("#popup").dxPopup({
        title: "Popup Title",
        visible: true
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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;
    });
Knockout
HTML
JavaScript
<div data-bind="dxPopup: {
    title: 'Popup Title',
    visible: isPopupVisible
}"></div>
var viewModel = {
    isPopupVisible: ko.observable(true)
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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

View Demo

See Also

ProgressBar

The ProgressBar is a widget that shows current progress.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#progressBar").dxProgressBar({
        min: 0,
        max: 100,
        value: 49
    });
});
<div id="progressBar"></div>
Angular
HTML
TypeScript
<dx-progress-bar
    [min]="0"
    [max]="100"
    [value]="49">
</dx-progress-bar>
import { DxProgressBarModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxProgressBarModule
    ],
    // ...
})
AngularJS
HTML
<div dx-progress-bar="{
    min: 0,
    max: 100,
    value: 49
}"></div>
Knockout
HTML
<div data-bind="dxProgressBar: {
    min: 0,
    max: 100,
    value: 49
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().ProgressBar()
    .ID("progressBar")
    .Min(0)
    .Max(100)
    .Value(49)
)
@(Html.DevExtreme().ProgressBar() _
    .ID("progressBar") _
    .Min(0) _
    .Max(100) _
    .Value(49)
)

View Demo

See Also

RadioGroup

The RadioGroup is a widget that contains a set of radio buttons and allows an end user to make a single selection from the set.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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" }
    })
)

View Demo Watch Video

See Also

RangeSelector

The RangeSelector is a widget that allows a user to select a range of values on a scale.

This widget represents a scale (numeric or date-time) and two sliders. A user selects the required range by moving the sliders.

RangeSelector

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#rangeSelector").dxRangeSelector({
        scale: {
            startValue: new Date(2011, 0, 1),
            endValue: new Date(2011, 5, 1),
            tickInterval: { days: 7 }
        }
    });
});
<div id="rangeSelector"></div>
Angular
HTML
TypeScript
<dx-range-selector>
    <dxo-scale
        [startValue]="startDate"
        [endValue]="endDate">
        <dxo-tick-interval [days]="7"></dxo-tick-interval>
    </dxo-scale>
</dx-range-selector>
import { DxRangeSelectorModule } from "devextreme-angular";
// ...
export class AppComponent {
    startDate = new Date(2011, 0, 1);
    endDate = new Date(2011, 5, 1);
}
@NgModule({
    imports: [
        // ...
        DxRangeSelectorModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-range-selector="{
        scale: {
            startValue: startDate,
            endValue: endDate,
            tickInterval: { days: 7 }
        }
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.startDate = new Date(2011, 0, 1);
        $scope.endDate = new Date(2011, 5, 1);
    });
Knockout
HTML
<div data-bind="dxRangeSelector: {
    scale: {
        startValue: new Date(2011, 0, 1),
        endValue: new Date(2011, 5, 1),
        tickInterval: { days: 7 }
    }
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().RangeSelector()
    .ID("rangeSelector")
    .Scale(scale => scale
        .StartValue(new DateTime(2011, 1, 1))
        .EndValue(new DateTime(2011, 6, 1))
        .TickInterval(ti => ti.Days(7))
    )
)
@(Html.DevExtreme().RangeSelector() _
    .ID("rangeSelector") _
    .Scale(Sub(scale)
        scale.StartValue(New DateTime(2011, 1, 1)) _
                .EndValue(New DateTime(2011, 6, 1)) _
                .TickInterval(Sub(ti) ti.Days(7))
    End Sub)
)

A chart can be displayed in the background of the RangeSelector widget. This allows end users to select the required range in a chart series. You can also integrate the RangeSelector widget with a stand-alone Chart widget to emulate chart zooming and scrolling.

View Demo Watch Video

See Also

RangeSlider

The RangeSlider is a widget that allows an end user to choose a range of numeric values.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#rangeSlider").dxRangeSlider({
        min: 0, max: 100,
        start: 20, end: 60
    });
});
<div id="rangeSlider"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-range-slider="{
    min: 0, max: 100,
    start: 20, end: 60
}"></div>
Knockout
HTML
<div data-bind="dxRangeSlider: {
    min: 0, max: 100,
    start: 20, end: 60
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

Resizable

The Resizable widget enables its content to be resizable in the UI.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
CSS
$(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%
}
Angular
HTML
CSS
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
CSS
<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%
}
Knockout
HTML
CSS
<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%
}
ASP.NET MVC Controls
Razor C#
Razor VB
CSS
@(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%
}
See Also

ResponsiveBox

The ResponsiveBox widget allows you to create an application or a website with a layout adapted to different screen sizes.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
CSS
<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 }
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
CSS
<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 }
Knockout
HTML
CSS
<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 }
ASP.NET MVC Controls
Razor C#
Razor VB
CSS
<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 }

View Demo Watch Video

See Also

Sankey

The Sankey is a widget that visualizes the flow magnitude between value sets. The values being connected are called nodes; the connections - links. The higher the flow magnitude, the wider the link is.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var data = [
    { source: "Brazil", target: "Portugal", weight: 5 },
    { source: "Brazil", target: "Spain", weight: 1 },
    { source: "Brazil", target: "England", weight: 1 },
    { source: "Canada", target: "Portugal", weight: 1 },
    { source: "Canada", target: "England", weight: 1 },
    { source: "Mexico", target: "Portugal", weight: 1 },
    { source: "Mexico", target: "Spain", weight: 5 }
];

$(function() {
    $("#sankey").dxSankey({
        dataSource: data
    });
});
<div id="sankey"></div>
Angular
HTML
TypeScript
<dx-sankey
    [dataSource]="data">
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    data: Array<{ source: string, target: string, weight: number }> = [
        { source: "Brazil", target: "Portugal", weight: 5 },
        { source: "Brazil", target: "Spain", weight: 1 },
        { source: "Brazil", target: "England", weight: 1 },
        { source: "Canada", target: "Portugal", weight: 1 },
        { source: "Canada", target: "England", weight: 1 },
        { source: "Mexico", target: "Portugal", weight: 1 },
        { source: "Mexico", target: "Spain", weight: 5 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-sankey="{
        dataSource: data
    }"></div>
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.data = [
            { source: "Brazil", target: "Portugal", weight: 5 },
            { source: "Brazil", target: "Spain", weight: 1 },
            { source: "Brazil", target: "England", weight: 1 },
            { source: "Canada", target: "Portugal", weight: 1 },
            { source: "Canada", target: "England", weight: 1 },
            { source: "Mexico", target: "Portugal", weight: 1 },
            { source: "Mexico", target: "Spain", weight: 5 }
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxSankey: {
    dataSource: data
}"></div>
var viewModel = {
    data: [
        { source: "Brazil", target: "Portugal", weight: 5 },
        { source: "Brazil", target: "Spain", weight: 1 },
        { source: "Brazil", target: "England", weight: 1 },
        { source: "Canada", target: "Portugal", weight: 1 },
        { source: "Canada", target: "England", weight: 1 },
        { source: "Mexico", target: "Portugal", weight: 1 },
        { source: "Mexico", target: "Spain", weight: 5 }
    ]
};

ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Sankey()
    .ID("Sankey")
    .DataSource(new object[] {
        new { source = "Brazil", target = "Portugal", weight = 5 },
        new { source = "Brazil", target = "Spain", weight = 1 },
        new { source = "Brazil", target = "England", weight = 1 },
        new { source = "Canada", target = "Portugal", weight = 1 },
        new { source = "Canada", target = "England", weight = 1 },
        new { source = "Mexico", target = "Portugal", weight = 1 },
        new { source = "Mexico", target = "Spain", weight = 5 }
    })
)
@(Html.DevExtreme().Sankey() _
    .ID("Sankey") _
    .DataSource({
        New With { .source = "Brazil", .target = "Portugal", .weight = 5 },
        New With { .source = "Brazil", .target = "Spain", .weight = 1 },
        New With { .source = "Brazil", .target = "England", .weight = 1 },
        New With { .source = "Canada", .target = "Portugal", .weight = 1 },
        New With { .source = "Canada", .target = "England", .weight = 1 },
        New With { .source = "Mexico", .target = "Portugal", .weight = 1 },
        New With { .source = "Mexico", .target = "Spain", .weight = 5 }
    })
)

View Demo

See Also

Scheduler

The Scheduler is a widget that represents scheduled data and allows a user to manage and edit it.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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">
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-scheduler="{
    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>
Knockout
HTML
<div data-bind="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>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)
See Also

View Demo Watch Video

ScrollView

The ScrollView is a widget that enables a user to scroll its content.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#scrollView").dxScrollView({
        height: 500,
        width: 500,
        direction: "both"
    });
});
<div id="scrollView">
    <div id="content"></div>
</div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-scroll-view="{
    height: 500,
    width: 500,
    direction: 'both'
}">
    <div id="content"></div>
</div>
Knockout
HTML
<div data-bind="dxScrollView: {
    height: 500,
    width: 500,
    direction: 'both'
}">
    <div id="content"></div>
</div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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

View Demo

See Also

SelectBox

The SelectBox widget is an editor that allows an end user to select an item from a drop-down list.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#selectBox").dxSelectBox({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        searchEnabled: true
    });
});
<div id="selectBox"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxSelectBox: {
    dataSource: selectBoxDataSource,
    searchEnabled: true
}"></div>
var viewModel = {
    selectBoxDataSource: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

SlideOut

The SlideOut widget is a classic slide-out menu paired with a view. An end user opens the menu by swiping away the view.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
CSS
$(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%;
}
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
CSS
<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%;
}
Knockout
HTML
CSS
<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%;
}
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo

See Also

SlideOutView

The SlideOutView widget is a classic slide-out menu paired with a view. This widget is very similar to the SlideOut with only one difference - the SlideOut always contains the List in the slide-out menu, while the SlideOutView can hold any collection there.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
CSS
<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%;
}
Angular
HTML
TypeScript
CSS
<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%;
}
AngularJS
HTML
CSS
<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%;
}
Knockout
HTML
CSS
<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%;
}
ASP.NET MVC Controls
Razor C#
Razor VB
CSS
@(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%;
}
See Also

Slider

The Slider is a widget that allows an end user to set a numeric value on a continuous range of possible values.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#slider").dxSlider({
        min: 0, max: 100,
        value: 25
    });
});
<div id="slider"></div>
Angular
HTML
TypeScript
<dx-slider
    [min]="0"
    [max]="100"
    [value]="25">
</dx-slider>
import { DxSliderModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSliderModule
    ],
    // ...
})
AngularJS
HTML
<div dx-slider="{
    min: 0, max: 100,
    value: 25
}"></div>
Knockout
HTML
<div data-bind="dxSlider: {
    min: 0, max: 100,
    value: 25
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Slider()
    .ID("slider")
    .Min(0).Max(100)
    .Value(25)
)
@(Html.DevExtreme().Slider() _
    .ID("slider") _
    .Min(0).Max(100) _
    .Value(25)
)

View Demo

See Also

Sparkline

The Sparkline widget is a compact chart that contains only one series. Owing to their size, sparklines occupy very little space and can be easily collected in a table or embedded straight in text.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var temperature = [
    { month: "January", day: 6, night: 2 },
    { month: "February", day: 7, night: 2 },
    { month: "March", day: 10, night: 3 },
    { month: "April", day: 14, night: 5 },
    { month: "May", day: 18, night: 8 },
    { month: "June", day: 21, night: 11 },
    { month: "July", day: 22, night: 13 },
    { month: "August", day: 22, night: 13 },
    { month: "September", day: 19, night: 11 },
    { month: "October", day: 15, night: 8 },
    { month: "November", day: 10, night: 5 },
    { month: "December", day: 7, night: 3 }
];
$(function () {
    $("#daySparkline").dxSparkline({
        dataSource: temperature,
        argumentField: 'month',
        valueField: 'day',
        type: 'bar'
    });
    $("#nightSparkline").dxSparkline({
        dataSource: temperature,
        argumentField: 'month',
        valueField: 'night',
        type: 'bar'
    });
});
<div id="daySparkline"></div>
<div id="nightSparkline"></div>
Angular
HTML
TypeScript
<dx-sparkline
    [dataSource]="temperature"
    argumentField="month"
    valueField="day"
    type="bar">
</dx-sparkline>
<dx-sparkline
    [dataSource]="temperature"
    argumentField="month"
    valueField="night"
    type="bar">
</dx-sparkline>
import { DxSparklineModule } from "devextreme-angular";
// ...
export class AppComponent {
    temperature = [
        { month: "January", day: 6, night: 2 },
        { month: "February", day: 7, night: 2 },
        { month: "March", day: 10, night: 3 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSparklineModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div dx-sparkline="{
    dataSource: temperature,
    argumentField: 'month',
    valueField: 'day',
    type: 'bar'
}"></div>
<div dx-sparkline="{
    dataSource: temperature,
    argumentField: 'month',
    valueField: 'night',
    type: 'bar'
}"></div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.temperature = [
            { month: "January", day: 6, night: 2 },
            { month: "February", day: 7, night: 2 },
            { month: "March", day: 10, night: 3 }
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxSparkline: {
    dataSource: temperature,
    argumentField: 'month',
    valueField: 'day',
    type: 'bar'
}"></div>
<div data-bind="dxSparkline: {
    dataSource: temperature,
    argumentField: 'month',
    valueField: 'night',
    type: 'bar'
}"></div>
var viewModel = {
    temperature: [
        { month: "January", day: 6, night: 2 },
        { month: "February", day: 7, night: 2 },
        { month: "March", day: 10, night: 3 }
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Sparkline()
    .ID("daySpakline")
    .DataSource(new JS ("temperature"))
    .ArgumentField("month")
    .ValueField("day")
    .Type(SparklineType.Bar)
)
@(Html.DevExtreme().Sparkline()
    .ID("nightSpakline")
    .DataSource(new JS("temperature"))
    .ArgumentField("month")
    .ValueField("night")
    .Type(SparklineType.Bar)
)
<script> 
    var temperature = [
        { month: "January", day: 6, night: 2 },
        { month: "February", day: 7, night: 2 },
        { month: "March", day: 10, night: 3 }
    ];
</script>
@(Html.DevExtreme().Sparkline() _
    .ID("daySpakline") _
    .DataSource(New JS("temperature")) _
    .ArgumentField("month") _
    .ValueField("day") _
    .Type(SparklineType.Bar)
)
@(Html.DevExtreme().Sparkline() _
    .ID("nightSpakline") _
    .DataSource(New JS("temperature")) _
    .ArgumentField("month") _
    .ValueField("night") _
    .Type(SparklineType.Bar)
)
<script>
    var temperature = [
        { month: "January", day: 6, night: 2 },
        { month: "February", day: 7, night: 2 },
        { month: "March", day: 10, night: 3 }
    ];
</script>

View Demo Watch Video

See Also

Switch

The Switch is a widget that can be in two states: "On" and "Off".

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#switch").dxSwitch({
        value: true
    });
});
<div id="switch"></div>
Angular
HTML
TypeScript
<dx-switch [value]="true"></dx-switch>
import { DxSwitchModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSwitchModule
    ],
    // ...
})
AngularJS
HTML
<div dx-switch="{
    value: true
}"></div>
Knockout
HTML
<div data-bind="dxSwitch: {
    value: true
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().Switch()
    .ID("switch")
    .Value(true)
)
@(Html.DevExtreme().Switch() _
    .ID("switch") _
    .Value(True)
)

View Demo

See Also

TabPanel

The TabPanel is a widget consisting of the Tabs and MultiView widgets. It automatically synchronizes the selected tab with the currently displayed view and vice versa.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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'
        }];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo Watch Video

See Also

Tabs

The Tabs is a tab strip used to switch between pages or views. This widget is included in the TabPanel widget, but you can use the Tabs separately as well.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }  
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

TagBox

The TagBox widget is an editor that allows an end user to select multiple items from a drop-down list.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#tagBox").dxTagBox({
        dataSource: [ "Item 1", "Item 2", "Item 3" ],
        maxDisplayedTags: 2
    });
});
<div id="tagBox"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxTagBox: {
    dataSource: tagBoxDataSource,
    maxDisplayedTags: 2
}"></div>
var viewModel = {
    tagBoxDataSource: [ "Item 1", "Item 2", "Item 3" ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo Watch Video

See Also

TextArea

The TextArea is a widget that enables a user to enter and edit a multi-line text.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#textArea").dxTextArea({
        placeholder: "Type a text here..."
    });
});
<div id="textArea"></div>
Angular
HTML
TypeScript
<dx-text-area placeholder="Type a text here..."></dx-text-area>
import { DxTextAreaModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextAreaModule
    ],
    // ...
})
AngularJS
HTML
<div dx-text-area="{
    placeholder: 'Type a text here...'
}"></div>
Knockout
HTML
<div data-bind="dxTextArea: {
    placeholder: 'Type a text here...'
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().TextArea()
    .ID("textArea")
    .Placeholder("Type a text here...")
)
@(Html.DevExtreme().TextArea() _
    .ID("textArea") _
    .Placeholder("Type a text here...")
)

View Demo

See Also

TextBox

The TextBox is a widget that enables a user to enter and edit a single line of text.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#textBox").dxTextBox({
        placeholder: "Type a text here..."
    });
});
<div id="textBox"></div>
Angular
HTML
TypeScript
<dx-text-box placeholder="Type a text here..."></dx-text-box>
import { DxTextBoxModule } from "devextreme-angular"
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextBoxModule
    ],
    // ...
})
AngularJS
HTML
<div dx-text-box="{
    placeholder: 'Type a text here...'
}"></div>
Knockout
HTML
<div data-bind="dxTextBox: {
    placeholder: 'Type a text here...'
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().TextBox()
    .ID("textBox")
    .Placeholder("Type a text here...")
)
@(Html.DevExtreme().TextBox() _
    .ID("textBox") _
    .Placeholder("Type a text here...")
)
React
import React from 'react';
import { TextBox } from 'devextreme-react/text-box';

class App extends React.Component {
    render() {
        return (
            <TextBox
                placeholder="Type a text here..."
            />
        );
    }
}

export default App;

View Demo

See Also

TileView

The TileView widget contains a collection of tiles. Tiles can store much more information than ordinary buttons, that is why they are very popular in apps designed for touch devices.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#tileView").dxTileView({
        dataSource: [
            { text: "Tile 1 Text" },
            { text: "Tile 2 Text" },
            { text: "Tile 3 Text" }
        ],
        baseItemHeight: 130,
        baseItemWidth: 180
    });
});
<div id="tileView">
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

Toast

The Toast is a widget that provides pop-up notifications.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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
        };
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo

See Also

Toolbar

The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.

The main option you should specify when creating a widget is the dataSource. The following code snippet demonstrates an example of an array that can be passed to the dataSource option of the Toolbar widget.

JavaScript
var toolbarItems = [{
    widget: "dxButton",
    options: {
        type: "back",
        text: "Back"
    },
    location: "before"
}, {
    text: "Add",
    locateInMenu: "always"
}, {
    text: "Change",
    locateInMenu: "always"
}, {
    text: "Products",
    location: "center"
}];

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#toolbar").dxToolbar({
        items: toolbarItems
    });
});
<div id="toolbar"></div>
Angular
HTML
TypeScript
<dx-toolbar [items]="toolbarData"></dx-toolbar>
import { DxToolbarModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    toolbarData = toolbarItems;
}
@NgModule({
     imports: [
         // ...
         DxToolbarModule,
         DxButtonModule
     ],
     // ...
 })
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-toolbar="{
        items: toolbarData
    }"></div>
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.toolbarData = toolbarItems;
    });
Knockout
HTML
JavaScript
<div data-bind="dxToolbar: {
    items: toolbarData
}"></div>
var viewModel = {
    toolbarData: toolbarItems
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo

See Also

Tooltip

The Tooltip widget displays a tooltip for a specified element on the page.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
HTML
JavaScript
<div id="targetElement"></div>
<div id="tooltip">
    <p>Tooltip content</p>
</div>
$(function () {
    $("#tooltip").dxTooltip({
        target: "#targetElement",
        showEvent: "dxhoverstart",
        hideEvent: "dxhoverend"
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div id="targetElement"></div>
<div dx-tooltip="{
    target: '#targetElement',
    showEvent: 'dxhoverstart',
    hideEvent: 'dxhoverend'
}">
    <p>Tooltip content</p>
</div>
Knockout
HTML
<div id="targetElement"></div>
<div data-bind="dxTooltip: {
    target: '#targetElement',
    showEvent: 'dxhoverstart',
    hideEvent: 'dxhoverend'
}">
    <p>Tooltip content</p>
</div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(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>

View Demo Watch Video

See Also

TreeList

The TreeList is a widget that represents data from a local or remote source in the form of a multi-column tree view. This widget offers such features as sorting, filtering, editing, selection, etc.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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" }
    ];
}
AngularJS
HTML
JavaScript
<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" }
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)

View Demo Watch Video

See Also

TreeMap

The TreeMap is a widget that displays hierarchical data by using nested rectangles.

In the TreeMap widget, hierarchical data is represented by a set of nested rectangles whose sizes are proportional to the visualized values. TreeMap operates with plain and hierarchical data sources. Also, it can visualize a hierarchy reconstructed from a flat data source.

TreeMap provides three layout algorithms out-of-the-box along with the capability to implement your own algorithm. In addition, the widget includes API methods that enable you to implement the drill down feature. Moreover, TreeMap supports all interactive features available in other DevExtreme Data Visualization Widgets: click, hover and selection.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
var fruitsVegetables = [{
    name: 'Fruits',
    items: [
        { name: 'Apples', value: 4 },
        { name: 'Oranges', value: 10 },
        { name: 'Lemons', value: 6 }
    ]
}, {
    name: 'Vegetables',
    items: [
        { name: 'Cucumbers', value: 4 },
        { name: 'Tomatoes', value: 8 },
        { name: 'Turnips', value: 7 }
    ]
}];
$(function() {
    $("#treeMap").dxTreeMap({
        dataSource: fruitsVegetables
    });
});
<div id="treeMap"></div>
Angular
HTML
TypeScript
<dx-tree-map [dataSource]="fruitsVegetables"></dx-tree-map>
export class AppComponent {
    fruitsVegetables = [
        // ...   
    ];
}
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-tree-map="{
        dataSource: fruitsVegetables
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller("DemoController", function ($scope) {
        $scope.fruitsVegetables = [
            // ...   
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxTreeMap: {
    dataSource: fruitsVegetables
}"></div>
var viewModel = {
    fruitsVegetables: [
        // ...
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().TreeMap()
    .ID("treeMap")
    .DataSource(FruitsVegetables)
)
@(Html.DevExtreme().TreeMap() _
    .ID("treeMap") _
    .DataSource(FruitsVegetables)
)

View Demo Watch Video

See Also

TreeView

The TreeView widget is a tree-like representation of textual data.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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" }
        ];
    });
Knockout
HTML
JavaScript
<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);
ASP.NET MVC Controls
Razor C#
Razor VB
@(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)
)
NOTE
The TreeView widget requires each data source item to contain at least a key field. Thus, the widget does not support data sources consisting of value items.

View Demo Watch Video

See Also

ValidationGroup

The ValidationGroup is a widget that allows you to validate several editors simultaneously.

NOTE
Nested validation groups are not supported.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<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="{ }"></div>
</div>
Knockout
HTML
<div data-bind="dxValidationGroup: { }" >
    <div data-bind="dxTextBox: { name: 'FirstName' },
        dxValidator: {
            validationRules: [
                // ...
            ]
        }">  
    </div>
    <div data-bind="dxTextBox: { name: 'LastName' },
        dxValidator: {
            validationRules: [
                // ...
            ]
        }">
    </div>  
    <div data-bind="dxValidationSummary: { }"></div>
    <div data-bind="dxButton: { }"></div>
</div>
ASP.NET MVC Controls
Razor C#
Razor VB
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>
See Also

You can use the DevExpress.validationEngine.validateGroup(group) method to validate a particular validation group by passing its instance as a parameter.

JavaScript
DevExpress.validationEngine.validateGroup($("#sampleGroup").dxValidationGroup("instance"));

In addition, you can access a validation group's configuration using the DevExpress.validationEngine.getGroupConfig(group) method. The returned configuration exposes the validators included to the group, the validate() method to validate the editors that are associated with the validators and the validated event that occurs after the group is validated.

Watch Video

ValidationSummary

A widget for displaying the result of checking validation rules for editors.

This widget has a collection of items that present the validation errors that currently exist in a validation group or the ViewModel to which the widget is related.

dxValidationSummary Widget

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(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>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
JavaScript
<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();
        };
    });
Knockout
HTML
<div data-bind="dxValidationGroup: { }" >
    <div data-bind="dxTextBox: { name: 'FirstName' },
        dxValidator: {
            validationRules: [
                // ...
            ]
        }">  
    </div>
    <div data-bind="dxTextBox: { name: 'LastName' },
        dxValidator: {
            validationRules: [
                // ...
            ]
        }">
    </div>  
    <div data-bind="dxValidationSummary: { }"></div>
    <div data-bind="dxButton: {
        text: 'Validate',
        onClick: function validate (params) {
            params.validationGroup.validate();
        }
    }"></div>
</div>
ASP.NET MVC Controls
Razor C#
Razor VB
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>

The summary items are displayed using the default item template that is based on the message field of the broken validation rule. However, you can use a custom item template.

See Also
NOTE
The currently existing validation errors are not only the errors that are discovered during the current validation, but also the validation errors that are discovered during the earlier validations if the not-valid values are not changed since then.

To learn more on how to create the ValidationSummary widget and associate it with the required validation group or ViewModel, refer to the Display Validation Errors and Knockout Only - Validate a View Model topics.

Watch Video

See Also

Validator

A widget that is used to validate the associated DevExtreme editors against the defined validation rules.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#textBox1").dxTextBox({ })
        .dxValidator({
            validationRules: [
                // ...
            ]
        });
});
<div id="textBox1"></div>
Angular
HTML
TypeScript
<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
    ],
    // ...
})
AngularJS
HTML
<div dx-text-box="{ }"
        dx-validator="{
            validationRules: [
            // ...
        ]
    }">
</div>
Knockout
HTML
<div data-bind="dxTextBox: { },
    dxValidator: {
        validationRules: [
            // ...
        ]
    }">  
</div>
See Also

The learn the validation rules that can be defined using the Validator widget for an editor, refer to the Validation Rules section.

The editors that are associated with the Validator widgets are automatically validated against the specified rules each time the event assigned to the editor's valueChangeEvent option occurs. In addition, several editors can be validated at once. To learn how to do this, refer to the Validate Several Editor Values topic.

See Also

View Demo Watch Video

VectorMap

The VectorMap is a widget that visualizes geographical locations. This widget represents a geographical map that contains areas and markers. Areas embody continents and countries. Markers flag specific points on the map, for example, towns, cities or capitals.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function() {
    $("#vectorMap").dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: DevExpress.viz.map.sources.world,
            label: {
                enabled: true,
                dataField: 'name'
            }
        }]
    });
});
<div id="vectorMap"></div>
Angular
HTML
TypeScript
<dx-vector-map>
    <dxi-layer
        type="area"
        [dataSource]="worldMap">
        <dxo-label
            [enabled]="true"
            dataField="name">
        </dxo-label>
    </dxi-layer>
</dx-vector-map>
import { DxVectorMapModule } from "devextreme-angular";
import * as maps from "vectormap-data/world.js";
// ...
export class AppComponent {
    worldMap: any = maps.world;
}
@NgModule({
    imports: [
        // ...
        DxVectorMapModule
    ],
    // ...
})
AngularJS
HTML
<div dx-vector-map="{
    layers: [{
        type: 'area',
        dataSource: DevExpress.viz.map.sources.world,
        label: {
            enabled: true,
            dataField: 'name'
        }
    }]
}"></div>
Knockout
HTML
<div data-bind="dxVectorMap: {
    layers: [{
        type: 'area',
        dataSource: DevExpress.viz.map.sources.world,
        label: {
            enabled: true,
            dataField: 'name'
        }
    }],
}"></div>
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().VectorMap()
    .Layers(layers => {
        layers.Add()
            .DataSource(new JS("DevExpress.viz.map.sources.world"))
            .Label(l => l
                .Enabled(true)
                .DataField("name")
            );
    })
)
@(Html.DevExtreme().VectorMap() _
    .Layers(Sub(layers)
        layers.Add() _
            .DataSource(New JS("DevExpress.viz.map.sources.world")) _
            .Label(Sub(l)
                l.Enabled(true) _
                    .DataField("name")
            End Sub)
    End Sub)
)

View Demo Watch Video

See Also

Markup Components

This section describes components that can be used when defining a widget markup.

UI Events

The events used to handle user interaction with UI elements.

DevExtreme provides UI events for processing a user's interaction with a specific UI element. The DevExpress.events namespace exposes an API to work with the UI events.

The following code shows how to attach, trigger and then detach a dxhold event handler from a page element with the target ID. The timeout parameter specifies how long the target should be held to allow the handler to execute:

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

$("#target").on("dxhold", { timeout: 1000 }, dxholdHandler); 
$("#target").trigger("dxhold");
$("#target").off("dxhold", dxholdHandler);

See jQuery documentation for details.

Angular
JavaScript
import { on, trigger, off } from "devextreme/events";
// ...
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const dxholdHandler = (event) => {
            alert(`The ${event.target.textContent} element was held for ${event.data.timeout} ms.`);
            return true; // true - continues event propagation, false - stops
        }
        const target: HTMLElement = document.getElementById("target");

        on(target, "dxhold", { timeout: 1000 }, dxholdHandler);
        trigger(target, "dxhold");
        off(target, "dxhold", dxholdHandler);
    }
}
Knockout
HTML
JavaScript
<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.`);
    }
}
NOTE
Knockout does not provide an API to unsubscribe from an event.

See Knockout documentation for details.

AngularJS
HTML
JavaScript
<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.`);
        }
    });
NOTE
AngularJS does not provide an API to unsubscribe from an event.

CSS Classes

This section describes the DevExtreme CSS classes you can use to define the appearance of an element.