In this video, you will see how to add the Query Builder component in a React application. I will also explain how to add rules on initial loading and how to integrate and filter grid records.
The Syncfusion React Query Builder component empowers users to effortlessly create intricate queries using a diverse set of conditions and operators, all without the need to delve into SQL or other query languages. With intuitive drag-and-drop functionality, users can visually craft queries, simplifying the process even for those without technical expertise.
This versatile component supports an extensive range of filters and conditions, encompassing basic comparisons like /”equals/” or /”not equals,/” as well as logical operators such as /”AND/” and /”OR,/” and it accommodates nested conditions. Developers can tailor the Query Builder to suit their application’s requirements, defining available fields and operators, establishing default values, and exerting precise control over its appearance and behavior.
The Syncfusion React Query Builder seamlessly integrates with diverse data sources, enabling the retrieval and display of data based on constructed queries. It is often harmoniously combined with other Syncfusion components like grids and data tables. The component further offers robust validation options, ensuring constructed queries adhere to correct syntax and comply with application-specific criteria.
Users can easily save and load queries, facilitating the reuse and sharing of query configurations, a particularly valuable feature for managing complex search criteria. Furthermore, the component is meticulously designed to deliver an optimal user experience across desktop and mobile devices, guaranteeing consistency across various screen sizes.
Tutorial video: https://www.syncfusion.com/tutorial-videos
Download the example from GitHub:
https://github.com/SyncfusionExamples/getting-started-with-the-react-query-builder-component
TRIAL LICENSE KEY
———————
If you need a trial license key, start your React trial from https://www.syncfusion.com/account/manage-trials/start-trials under your Syncfusion account. Then, you can obtain your trial license key from the downloads page.
Check your eligibility for a free license for all Essential Studio products on our Community License page.
https://www.syncfusion.com/products/communitylicense
BOOKMARK DETAILS
———————
[00:00] Introduction
[00:46] Create a React application
[01:18] Add the Query Builder component
[03:39] Apply rules on initial loading
[04:27] Filter Grid records
REACT QUERY BUILDER
———————
Product overview: https://www.syncfusion.com/react-components/react-query-builder
Examples: https://ej2.syncfusion.com/react/demos/#/material/query-builder/default
Documentation: https://ej2.syncfusion.com/react/documentation/query-builder/getting-started
Download free trial: https://www.syncfusion.com/downloads/react/confirm
NuGet package: https://www.npmjs.com/package/@syncfusion/ej2-react-querybuilder
SUBSCRIBE
————–
Syncfusion on YouTube: https://www.youtube.com/user/syncfusioninc
Sign up to receive email updates: https://www.syncfusion.com/account/email-preference
SOCIAL COMMUNITIES
—————————–
Facebook: https://www.facebook.com/Syncfusion/
Twitter: https://twitter.com/Syncfusion
LinkedIn: https://www.linkedin.com/company/syncfusion
Instagram: https://www.instagram.com/syncfusionofficial/
#react #querybuilder #grid
Take the opportunity to connect and share this video with your friends and family if you find it useful.
No Comments