Skip to content

SFQuerybuilder readme updated - SEO guidelines #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jaya-arun-23 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

SFQuerybuilder readme updated - SEO guidelines #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 80 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
# Create a Query Builder UI Component in a Blazor Server Application
# Create Query Builder in a Blazor Server Application | Syncfusion Blazor

This is a quick-start project provided by Syncfusion to help you create a Blazor Query Builder. This example explains how to create a Blazor application and add the Syncfusion Blazor package. It shows how to add the Syncfusion Blazor Query Builder component to a Blazor server application, columns to the Query builder, and filter the data by adding conditions to it. It also shows how to get the rules from the Query Builder.
The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) is a rich and responsive UI for filtering large amounts of data by creating or editing conditions that can be combined with data visualization controls like DataGrid and Charts to view the filtered data. It outputs structured JSON filters that can be easily parsed to create SQL queries. It allows you to create conditions and group them using AND/OR logic.

Watch a How-to Video:https://www.syncfusion.com/tutorial-videos/blazor/query-builder-ui?title=create-a-query-builder-ui-component-in-a-blazor-server

Documentation: https://blazor.syncfusion.com/documentation/query-builder/getting-started

Online example: https://blazor.syncfusion.com/demos/query-builder/default-functionalities
This quick-start Blazor server app project will help you learn how to configure and add the Blazor Query Builder to it. You will also learn how to add columns to the Query builder, and filter the data by adding conditions to it. It also shows how to get the rules from the Query Builder.

## Project prerequisites
Make sure that you have compatible versions of .NET Core on your machine before starting to work on this project. You also need the following:
Expand All @@ -20,3 +16,80 @@ To run this application, you need to first clone or download the ‘create a que

For more help, check the [ASP.NET Core Blazor documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor).

## Features and benefits

### Data Binding
The Blazor Query Builder can be [bound to data](https://blazor.syncfusion.com/documentation/query-builder/data-binding/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) from a variety of data sources in the form of a JavaScript object array collection. It auto populates the data source and maps the data to the appropriate fields.

### Integration with Data Manager
[Integrating the Data Manager](https://blazor.syncfusion.com/documentation/query-builder/data-binding/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) control with the Query Builder control simplifies communication with a data source and returns the desired result based on the provided filters.

### Summary View
The Blazor Query Builder with rich UI supports a [summary view](https://blazor.syncfusion.com/documentation/query-builder/how-to/summary-view/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) that outputs the filter query in SQL format.

### Import and export
[Import and export](https://blazor.syncfusion.com/documentation/query-builder/import-export/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) Query Builder data to and from structured JSON and SQL formats.

### Touch-friendly and Responsive
The Query Builder for Blazor provides a responsive mode that gives an adaptive, redesigned UI appearance for mobile devices and a great user experience on all phone, tablet, and desktop form factors.

### Themes
The Blazor Query Builder component supports several built-in themes: Material, Bootstrap, Fabric (Office 365), and high contrast. The users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel by either simply overriding SASS variables or using our [Theme Studio application](https://ej2.syncfusion.com/themestudio/?theme=material).

### Web accessibility

* Fully supports [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) accessibility to work with screen readers and assistive devices.
* Follows [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) best practices for implementing keyboard interaction.
* Follows [WCAG 2.0](https://www.w3.org/TR/WCAG20/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) standards in design of the UI element visuals such as foreground color, background color, line spacing, text, and images.
* Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

## Related links
[Learn More about Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) <br/><br/>
[Download Free Trial](https://www.syncfusion.com/downloads?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) <br/><br/>
[Pricing](https://www.syncfusion.com/sales/products/blazor?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) <br/><br/>
[Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started/?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) <br/><br/>
[Online Examples](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) <br/><br/>
[Watch a How-to Video](https://www.syncfusion.com/tutorial-videos/blazor/query-builder-ui?title=create-a-query-builder-ui-component-in-a-blazor-server) <br/><br/>
[Community Forums](https://www.syncfusion.com/forums/blazor-components/query-builder?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) <br/><br/>
[Suggest a feature](https://www.syncfusion.com/feedback/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples)

## About Syncfusion Blazor Components
Syncfusion's [Blazor components](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples) library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Query Builder, we provide popular Blazor components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples), [Charts](https://www.syncfusion.com/blazor-components/blazor-charts?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples), [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples), and [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples).

## About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ controls and frameworks for web
([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
and
[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples)),
mobile
([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
and
[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples)),
and desktop development ([Windows
Forms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples),
[WinUI(Preview)](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples)
and
[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-github-samples)).
We provide ready-to-deploy enterprise software for dashboards, reports,
data integration, and big data processing. Many customers have saved
millions in licensing fees by deploying our software.


<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />

<p align="center">
<a href="mailto:sales@syncfusion.com?Subject=Syncfusion Blazor Query Builder - Github" target="_top">sales@syncfusion.com</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=blazor-query-builder-samples">www.syncfusion.com</a> | 1-888-9 DOTNET <br>
</p>