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. 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