• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account

Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & Development
    • Infragistics Ultimate The complete toolkit for building high performing web, mobile, and desktop apps
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
    • Ignite UI for Angular 50+ Material-based UI components designed and built on Google’s Angular framework
    • Ignite UI for React Features our high-performance data grid and real-time high-volume data charts
    • Ignite UI for JavaScript100+ HTML5 / JavaScript jQuery components with extensions for React, Angular & ASP.NET MVC
    • Ultimate UI for ASP.NET Versatile ASP.NET AJAX UI controls
    • Ultimate UI for Windows Forms 100+ fully featured, Microsoft Office-style UI controls
    • Ultimate UI for WPF UI controls & productivity tools
    • Ultimate UI for Xamarin UI controls & productivity tools
    • All Products
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Teams
    • For Business Teams
    • SharePlus Enterprise Mobile workspaces with business processes, collaboration, and data visualization for teams
    • ReportPlus Exceptional analytics on any device
    • ReportPlus Embedded Deliver embedded reports and dashboards in your apps
  • Learn & Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
 
Ignite UI | Components
  • Download Trial
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
  • Grids & Lists
    • Data Grid
    • Hierarchical Grid
    • OLAP Pivot Data Selector
    • OLAP Pivot Grid
    • OLAP Pivot View
    • Spreadsheet
    • Tree Grid
    • Tree List
  • Charts
    • Category Chart
    • Data Chart
    • Doughnut Chart
    • Financial Chart
    • Funnel Chart
    • Pie Chart
    • Shape Chart
    • Sparkline
  • Gauges
    • Bullet Graph
    • Linear Gauge
    • Radial Gauge
  • Barcodes
    • Barcode
  • Data Visualization
    • Geographic Map
    • Zoombar
  • Data Entry and Display
    • Editors
    • Combo Box Editor
    • HTML Editor
    • Notifier
    • Rating
    • Validator
  • Interactions
    • Dialog Window
    • File Upload
    • Popover
    • Scrollbar
    • Split Button
    • Video Player
  • Menus
    • Radial Menu
  • Layouts
    • Layout Managers
    • Splitter
    • Tile Manager
  • Styling & Themes
    • Themes
  • Scheduling
    • Schedule
  • Frameworks
    • Data Source
    • Excel Exporter
    • Excel Library
    • Infragistics Documents
    • Infragistics Loader
    • Template Engine
    • Word Exporter
Ignite UI Data Grid Example

Ignite UI Data Grid

The Ignite UI for JavaScript Grid control is responsive, touch-enabled, and the fastest grid available. You can bind the grid to a variety of data sources, including JSON, XML, HTML tables, .NET collections, and even .NET data tables. The grid works with popular open source libraries like AngularJS, Angular, React and KnockoutJS.

View Sample

Grid Filtering

Like most grids, the Ignite UI for JavaScript grid gives users the ability to sort and filter their data on a column-by-column basis. The intuitive interface helps your user quickly understand and use these features. Both sorting and filtering offer local and remote server-side versions.

Ignite UI for JavaScript also offers full grid text searching. This is great for situations where users may need to perform searches that span the entire grid, regardless of which column the data is in. In other cases, the user may want to filter data based on several different values across columns. This can be difficult and tedious to do in a normal, column-based sorting paradigm. The Ignite UI grid solves this problem with the Filter by Text feature. With this new feature, you can programmatically filter the entire grid using the Ignite UI Data Source API. This allows you to create any filter input user interface you wish, including a text box, pop-up dialog box, or feed from another service. With the Filter by Text feature, you decide how best to get the user’s search term and Ignite UI handles the rest.

Data Grid Filtering Function View Sample

Grouping Summaries

Grouping has always been a very popular and powerful feature of the Ignite UI for JavaScript grid. To bring even more power to this feature, Ignite UI now offers improved group-by summaries. With this improved functionality, you can now provide users a wide array of built-in aggregation functions such as Count, Sum, Minimum, and Maximum. In addition to the built-in functions, you can easily create your own custom aggregation functions to display whatever data in the summary you need. These summaries can be defined column by column and can appear above or below each group.

Data grid Grouping Summaries Function View Sample

Paging

Paging is simple and easy with the Ignite UI for JavaScript grid right out of the box: just turn it on. If you want customized paging, Ignite UI for JavaScript gives you plenty of options. You can even change the look and feel with CSS, making the grid and the paging components look like a seamless part of your application.

Data grid Paging Function View Sample

Templated Columns

When it comes to grids, flexibility is key. With Ignite UI for JavaScript’s templated columns, you can customize your grid however you want. Whether you need to add a custom data format, buttons, or even sparkline graphs to your grid, Ignite UI for JavaScript’s templated columns make it possible.

Data Grid Templated Columns Function Learn More
  • Products
    • Design & Development
    • UX Pros
    • Business Teams
    • View All
    • Free Trials
  • Learn & Support
    • Help & API Docs
    • Blogs
    • Technical Support Chat
    • Forums
    • Product Ideas
    • Submit a Request
  • My Account
    • Manage My Subscriptions
    • Support Requests
  • Corporate
    • About Us
    • Careers
    • Legal
    • News & Events
    • Partners
Stay Up-to-Date

Get the latest blogs, eBooks, events, and whitepapers.

Sign Me Up!
  • Privacy Policy(updated)
  • Cookies
  • Terms of Use(updated)
© Copyright 2019 INFRAGISTICS. All Rights Reserved