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 • • AngularJS • • 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. 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 [email protected] --save --save-exact • npm install [email protected] --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

John Keells Group - Confidential