Angular Data Grid - Tutorial Videos

Check out the fastest and very high-performing Essential JS 2 Grid offered by Syncfusion that loads millions of records in less than a second. In this video, you'll get a brief introduction to the great features available in Syncfusion Essential JS 2 Grid, which is a feature-rich component that presents tabular data in several rows and columns and allows you to manipulate them easily. It includes enhanced features like editing, filtering, flexible data binding options, grouping, aggregates, Excel and PDF export options, paging, sorting, a responsive and touch-friendly UI, frozen rows and columns, and more column-specific customizable options.

Learn how easily you can create and configure the Angular Grid of Syncfusion using the "ng add" command of Angular Schematics. In this video, I'll create an application with the help of Angular CLI and Angular Schematics to make the initial configuration process of Angular Data Grid much simpler.

Download Example: Getting Started with the Angular Data Grid

Learn how to bind local JSON data and remote URL services to the Angular Data Grid. Also see how to bind the grid data through AJAX posts and the step-by-step procedures for binding the data through observables and async pipes. The easiest way of populating the Angular Data Grid is by passing a simple JSON object collection to the data source of the Angular Data Grid. You can also bind data retrieved from remote service URLs to the Angular Data Grid by using the DataManager, which will send a post action to the server and return the resultant data collection.

Download Example: Bind Data to an Angular Data Grid Using Service URLs and Observables

Easily perform CRUD operations on grid records by binding the Syncfusion Angular Grid with observables. In this video, you will learn how to add, edit, and delete grid records by using the post(), put(), and delete() methods of an HTTP request. When handling CRUD operations with observable binding, the dataSourceChanged event of the Angular Grid plays a major role. The event is triggered whenever any of the CRUD actions occur on the Angular Data Grid, such as a new record being added to the grid, or when a particular record is being edited or deleted from the grid. Within this event method, you may need to subscribe to the observables returned by the addRecord, updateRecord, and deleteRecord methods.

Download Example: Perform CRUD Operations in the Angular Data Grid Using Observables

Learn how easy it is to edit grid records using built-in and custom cell editing template options and other editing modes available in Angular Grid. In this video, you will learn about the different editing modes available in the Angular Grid, like inline, dialog, and batch. Also, you'll see the step-by-step procedure on how to use the template-driven ngForms to design a custom editor window for editing records in the Syncfusion Angular Grid.

Download Example: Cell Editing Modes in the Angular Data Grid

Learn how easily you can handle CRUD and batch operations in the Syncfusion Angular Grid on the server side using DataManager options. Here, remote data is bound to the Angular Grid, so you need to use the DataManager options url, insertUrl, updateUrl, removeUrl, and crudUrl to perform CRUD operations on the grid records. Finally, you'll also learn how to perform batch editing on grid records using the batchUrl option of DataManager. With the batch operation, you can insert or edit any grid records and save multiple changes in bulk to the server in a single request.

Download Example: Perform Data Editing in the Angular Data Grid

Let's deep dive into the filtering options available for Syncfusion's Angular Grid. Using them, you can easily filter and display the desired results out of huge collections of records. Apart from filtering the grid records through the default filter bar UI, there are three types of filtering options available for Angular Grid: menu, checkbox, and an Excel-like filter. You can also customize the default filter bar UI by adding custom components to it, using the built-in template options that are applicable for menu and Excel-like filtering options, as well.

Download Example: Work with Filtering Options in the Angular Data Grid

Let's deep dive into grouping and aggregates in Syncfusion Angular Grid. Using the grouping option in Angular Grid, group your records based on a specific column and organize them in a hierarchical structure with the expand and collapse options. Do some arithmetic calculations on a set of column values and display those calculated values in individual summary rows, a group footer, or group caption cells using predefined aggregate types. You will also see how to work with custom aggregates in the Angular Grid.

Download Example: Grouping and Aggregates in the Angular Data Grid