Overview of DevExtreme components

|
| By Webner

DevExtreme is a commercial application framework created by DevExpress. DevExtreme framework uses html5 and javascript code and targets today’s most popular smartphones and tablet devices. Devextreme supports both mobile application and web application.

In devextreme there are three flavors of the core functionality that we can use in our projects based on need:

Jquery
Angular Js
Knockout Js

It provides us several inbuilt components some of which are explained below :

1. Accordion: This widget displays data source items on collapsible panels.
2. Autocomplete: Textbox widget that supports autocompletion search:

(i.e) < input id = "autocomplete"
type = ”text” >
< script > $(function() {
$("#autocomplete").dxAutocomplete({
dataSource: autocompleteData,
placeholder: 'Type country name...',
valueExpr: 'name'
});
}); < /script>

All dx functions are defined in javascript libraries of DevExtreme. Firstly we need to include all the relevant libraries only then its components will work.

3. ContextMenu: This widget displays menu items on right click of mouse.

4. Resizable: This widget displays required content in a resizable element.

5. RangeSlider: Using this widget user can select a range of numeric values.

6. DataGrid: Datagrid is the most important widget in devextreme. Using this widget we can display multiple records in a tabular form. There are lots of inbuilt options in the datagrid like sort data in ascending or descending order, Search data by keyword and by name. It supports pagination, loader, editing, scrolling etc.

For example:

&nbsp;
<div class="demo-container"></div>
<script>// <![CDATA[
$(function(){
$("#gridContainer").dxDataGrid({
dataSource: customers,
columns: ["CompanyName", "City", "State", "Phone", "Fax"]
});
});

var customers = [{
"ID": 1,
"CompanyName": "Super Mart of the West",
"Address": "702 SW 8th Street",
"City": "Bentonville",
"State": "Arkansas",
"Zipcode": 72716,
"Phone": "(800) 555-2797",
"Fax": "(800) 555-2171",
"Website": "http://www.nowebsitesupermart.com"
}];
// ]]></script>

We can also pull data from other server using ajax call.

Leave a Reply

Your email address will not be published. Required fields are marked *