introduction to devextreme data grid with reactfintechasiapacific.com/pdf/techtalk_nuwan.pdf ·...

Introduction to DevExtreme Data Grid

With REACT

NAME : NUWAN DANTHANARAYANA

DESIGNATION : SOFTWARE ENGINEER

What is React ?

• React is a JavaScript library created by Facebook.

• React is a tool for building UI components.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

What is DevExtreme ?

• DevExtreme is a component suite for creating highly responsive web applications for touch devices and traditional desktops.

• The suite includes 50+ UI components ready to use with,

• React JS

• jQuery

• Angular

• AngularJS

• Knockout

• ASP.NET MVC or ASP.NET Core

• Data grid, interactive charts, data editors, navigation and multi-purpose widgets designed to look and behave harmoniously in any browser.

John Keells Group - Confidential

Integration with 3rd-Party Libraries and Frameworks

• DevExtreme supports integration with client-side technologies and server-side frameworks:

• jQuery versions 2.1 - 2.2 and 3.x

• Knockout versions 2.2.3 - 2.3.0 and 3.1+

• AngularJS versions 1.2+

• Angular versions 5 and later

• Vue - versions 2.5.16 and later

• React

• DevExtreme React Components - versions 16.2 and later

• DevExtreme Reactive Components for React - versions 16.8 and later

• ASP.NET: ASP.NET MVC 5 / .NET Core 2.0 and later

John Keells Group - Confidential

How to Start ?

• Create React App with NPM

• npm create-react-app dev-grid

• Install Reactstrap

• npm install --save bootstrap

• npm install --save reactstrap react react-dom

• Install DevExtreme

• npm install devextreme@19.1 --save --save-exact

• npm install devextreme-react@19.1 --save --save-exact

• Add styles

• On App.cs

John Keells Group - Confidential

Import Components

John Keells Group - Confidential

Create Grid

John Keells Group - Confidential

Additional Attributes

John Keells Group - Confidential

Create Column

John Keells Group - Confidential

Create Custom Button Column

John Keells Group - Confidential

Create & Bind Data Set

John Keells Group - Confidential

Grid Events & Custom Events

John Keells Group - Confidential

John Keells Group - Confidential

Thank you