Upload
others
View
18
Download
0
Embed Size (px)
Citation preview
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 [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