Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
2a447c3
feat(query-builder): add initial draft Query BUilde Model topic
teodosiah Mar 10, 2025
5dbfa74
chore(*): add sql sample code view
igdmdimitrov Mar 11, 2025
1219969
docs(query-builder): fix code-snippets in Sub-Query section
teodosiah Mar 12, 2025
fb17cdf
feat(query-builder): add SQL Example section
igdmdimitrov Mar 12, 2025
251ed94
Merge branch 'thristodorova/feat-6054' of https://github.com/IgniteUI…
igdmdimitrov Mar 12, 2025
1f20c4c
chore(*): address PR comments
igdmdimitrov Mar 13, 2025
3184c06
docs(query-builder): remove unnecessary section
teodosiah Mar 18, 2025
2629652
Merge branch 'vnext' into thristodorova/feat-6054
teodosiah Mar 18, 2025
b1fe366
Update en/components/query-builder-model.md
teodosiah Mar 18, 2025
85e6473
Adding changes from build igniteui-xplat-docs-make-pr-JP+KR_2025.3.19.1
Mar 19, 2025
ec6281c
docs(query-builder): add Request data from an Endpoint section
teodosiah Mar 20, 2025
26c30a6
docs(query-builder): update sections
teodosiah Mar 21, 2025
a4dc866
Update en/components/query-builder-model.md
teodosiah Mar 21, 2025
3dca0b7
Update en/components/query-builder-model.md
teodosiah Mar 21, 2025
56742c0
Update en/components/query-builder-model.md
teodosiah Mar 21, 2025
feee57b
Merge branch 'vnext' into thristodorova/feat-6054
teodosiah Mar 21, 2025
d730cfb
docs(query-builder): update JA sample
randriova Mar 21, 2025
a8f9a2e
Merge branch 'vnext' into ESShared/XPlaform_jp_igniteui-xplat-docs-ma…
HUSSAR-mtrela Mar 21, 2025
b119710
Merge pull request #6083 from IgniteUI/ESShared/XPlaform_jp_igniteui-…
HUSSAR-mtrela Mar 21, 2025
627afcc
feat(query-builder): update text and code snippets
igdmdimitrov Mar 24, 2025
7f82976
Adding changes from build igniteui-xplat-docs-make-pr-JP+KR_2025.3.26.1
Mar 26, 2025
baead37
Adding changes from build igniteui-xplat-docs-make-pr_2025.3.26.1
Mar 26, 2025
951a354
feat(*): Add Tile Manager topic
gedinakova Mar 26, 2025
c4e01f8
fix(TileManager): Add custom schema to topic
gedinakova Mar 26, 2025
69c28c7
Merge branch 'vnext' into thristodorova/feat-6054
gedinakova Mar 26, 2025
65031b5
chore(*): changing snippet to assume standalone
ChronosSF Mar 27, 2025
1100ed2
Merge pull request #6091 from IgniteUI/gedinakova/tile-manager-topic
ChronosSF Mar 27, 2025
ac3385c
Merge pull request #6088 from IgniteUI/localization-2025-03-21
ChronosSF Mar 28, 2025
266a655
Merge pull request #6089 from IgniteUI/ESShared/XPlaform_jp_igniteui-…
ChronosSF Mar 28, 2025
f636083
Merge branch 'vnext' into ESShared/XPlaform_en_igniteui-xplat-docs-ma…
ChronosSF Mar 28, 2025
077fe45
docs(*): JA - Tile Manager topic localization #6091
randriova Mar 28, 2025
b8eeba7
Merge pull request #6090 from IgniteUI/ESShared/XPlaform_en_igniteui-…
ChronosSF Mar 28, 2025
7bfe5f0
Merge branch 'vnext' into localization-2025-03-28
randriova Mar 28, 2025
e8b4d3b
Merge branch 'vnext' into thristodorova/feat-6054
ChronosSF Mar 28, 2025
aaa1853
docs(list): update list documentation with the new "selected" property
adrianptrv Mar 17, 2025
966d42d
docs(list): fix comments
adrianptrv Mar 19, 2025
904820f
docs(query-builder): add requested changes
teodosiah Mar 31, 2025
6c3548c
Merge pull request #6072 from IgniteUI/thristodorova/feat-6054
ChronosSF Mar 31, 2025
36599e4
Merge branch 'vnext' into localization-2025-03-28
randriova Apr 1, 2025
a6097dd
Merge branch 'vnext' into apetrov/add-list-select-vnext
simeonoff Apr 1, 2025
1203f28
Merge pull request #6093 from IgniteUI/apetrov/add-list-select-vnext
simeonoff Apr 1, 2025
504d5a6
docs(*): Updating JA for #6072 and #6093
randriova Apr 2, 2025
a43ed05
Merge branch 'vnext' into localization-2025-03-28
randriova Apr 2, 2025
8751249
Merge pull request #6094 from IgniteUI/localization-2025-04-02
ChronosSF Apr 2, 2025
8c5e46e
Merge branch 'vnext' into localization-2025-03-28
ChronosSF Apr 2, 2025
b2bfbe8
Merge pull request #6092 from IgniteUI/localization-2025-03-28
ChronosSF Apr 2, 2025
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
13 changes: 11 additions & 2 deletions en/components/charts/types/data-pie-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,15 @@ In addition to the mouse highlighting, the [`IgxDataPieChartComponent`]({environ

When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control.

The following example demonstrates highlight filtering.

<code-view style="height: 600px" alt="Angular Data Pie Chart Highlight Filtering"
data-demos-base-url="{environment:dvDemosBaseUrl}"
iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/highlight-filter"
github-src="charts/data-pie-chart/highlight-filter">
</code-view>


<div class="divider--half"></div>

## Angular Data Pie Chart Animation
Expand All @@ -177,8 +186,8 @@ The following sample demonstrates the usage of animation in the [`IgxDataPieChar

<code-view style="height: 600px" alt="Angular Data Pie Chart Animation"
data-demos-base-url="{environment:dvDemosBaseUrl}"
iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/animation"
github-src="charts/data-pie-chart/animation">
iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/animation-replay"
github-src="charts/data-pie-chart/animation-replay">
</code-view>


Expand Down
46 changes: 26 additions & 20 deletions en/components/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -549,46 +549,52 @@ Finally, we need to apply the filtering pipe to our contacts data before we can

## List Item Selection

As you probably have already noticed, list items do not provide selection states. However, if your application requires your list to keep track of which item is selected, we give you an example of how this can be achieved. All you need to do is keep track of the state somewhere in your component, or in the data the list is bound to.
The list items have a `selected` property that helps us track which items are "selected". This property allows us to identify and manage the selection status of each item.

Here's an example, in which we apply a background color to the list according to the theme's secondary 500 color, based on state tracking coming from the data the list is bound to:
Here's an example illustrating how the visual style of the items changes when using the `selected` property:

<code-view style="height: 420px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/lists/list-item-selection" >
</code-view>

What we are doing is we are adding an additional `selected` property to each data member, which defaults to `false`. Upon list item click, we're resetting all the `selected` properties in the data collection and setting the one corresponding to the clicked item to `true`. Based on the selected property, we're applying a css class to the list item which gives it the selected background.
By default, the `selected` property is set to `false`. We can toggle its value using an inline expression bound to the `(click)` event on each list item, effectively switching the visual state of the item each time it's clicked.

```html
<igx-list>
<igx-list-item isHeader="true">Contacts</igx-list-item>
<igx-list-item [ngClass]="contact.selected ? 'selected' : ''"
(click)="selectItem(contact)"
*ngFor="let contact of contacts | igxFilter: filterContacts;">
<igx-list-item [isHeader]="true">Contacts</igx-list-item>
@for (contact of contacts | igxFilter: filterContacts; track contact) {
<igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
<igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
<span igxListLineTitle>{{ contact.name }}</span>
<span igxListLineSubTitle>{{ contact.phone }}</span>
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact, $event)">star</igx-icon>
</igx-list-item>
</igx-list>
```

```typescript
public selectItem(item) {
if (!item.selected) {
this.contacts.forEach(c => c.selected = false);
item.selected = true;
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
[igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
(mousedown)="mousedown($event)">star</igx-icon>
</igx-list-item>
}
}
</igx-list>
```

The list item also exposes a few CSS variables which you can use to style different parts of the selected elements:

- `--item-background-selected`
- `--item-text-color-selected`
- `--item-title-color-selected`
- `--item-action-color-selected`
- `--item-subtitle-color-selected`
- `--item-thumbnail-color-selected`

```scss
.selected {
background-color: hsla(var(--igx-secondary-500))
igx-list-item {
--item-background-selected: var(--ig-secondary-500);
--item-title-color-selected: var(--ig-secondary-500-contrast);
--item-subtitle-color-selected: var(--ig-info-100);
}
```

If you prefer to use the list theming function, there are parameters available that allow you to style the selected state of the list items. You can find more information about these parameters here: [`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme)

<div class="divider--half"></div>

## Chat Component
Expand Down
233 changes: 233 additions & 0 deletions en/components/query-builder-model.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
---
title: Using the Query Builder Model
_description: Angular Query Builder provides a serializable/deserializable JSON format model, making it easy to build SQL queries. Try it now.
_keywords: Angular Query Builder component, Angular Query Builder control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library
---

# Using the Query Builder Model
Angular Query Builder provides a serializable/deserializable JSON format model, making it easy to build SQL queries.

## Overview

This Angular Query Builder example demonstartes how the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) expression tree could be used to request data from an endpoint [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) and set it as an [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) data source.

<code-view style="height:700px"
no-theming
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/interactions/query-builder-request-sample" >
</code-view>

## Query Builder Model
In order to set an expression tree to the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html), you need to define a[`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html). Each [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) should have filtering logic that represents how a data record should resolve against the tree and depending on the use case, you could pass a field name, entity name, and an array of return fields. If all fields in a certain entity should be returned, the `returnFields` property could be set to ['*']:

```ts
const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity A', ['*']);
```
Once the root [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) is created, adding conditions, groups or subqueries, could be done by setting its `filteringOperands` property to an array of [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) (single expression or a group) or [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) (subquery).
Each [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) and [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) should have a `fieldName` that is the name of the column where the filtering expression is placed, and either a `condition` of type [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) or a `conditionName`. If required, you could also set a `searchVal`, `searchTree` of type [`IExpressionTree`]({environment:angularApiUrl}/interfaces/iexpressiontree.html), and `ignoreCase` properties.

- Defining a simple **expression**:
```ts
tree.filteringOperands.push({
fieldName: 'Name',
conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
searchVal: 'a'
});
```

- Defining a **group** of expressions:
```ts
const group = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Entity A', ['*']);
group.filteringOperands.push({
fieldName: 'Name',
conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
searchVal: 'a'
});
group.filteringOperands.push({
fieldName: 'DateTime created',
conditionName: IgxDateFilteringOperand.instance().condition('today').name
});
tree.filteringOperands.push(group);
```

- Defining a **subquery**:
```ts
const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity B', ['Number']);
innerTree.filteringOperands.push({
fieldName: 'Number',
conditionName: 'equals',
searchVal: 123
});
tree.filteringOperands.push({
fieldName: 'Id',
conditionName: 'inQuery',
searchTree: innerTree
});
```

The model can be serialized/deserialized in JSON format, making it easily transferable between client and server:
```ts
JSON.stringify(tree, null, 2);
```

## Using Sub-Queries

In the context of the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) the *IN / NOT-IN* operators are used with the newly exposed subquery functionality in the *WHERE* clause.

> [!Note]
> A subquery is a query nested inside another query used to retrieve data that will be used as a condition for the outer query.

Selecting the *IN / NOT-IN* operator in a `FilteringExpression` would create a subquery. After choosing an entity and a column to return, it checks if the value in the specified column in the outer query matches or not any of the values returned by the subquery.

The following expression tree:
```ts
const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Products', ['supplierId']);
innerTree.filteringOperands.push({
fieldName: 'supplierId',
conditionName: IgxNumberFilteringOperand.instance().condition('greaterThan').name,
searchVal: 10
});

const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Suppliers', ['supplierId']);
tree.filteringOperands.push({
fieldName: 'supplierId',
conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
searchTree: innerTree
});
```
Could be serialized by calling:
```ts
JSON.stringify(tree, null, 2);
```

This would be transferred as:
```
{
"filteringOperands": [
{
"fieldName": "supplierId",
"condition": {
"name": "inQuery",
"isUnary": false,
"isNestedQuery": true,
"iconName": "in"
},
"conditionName": "inQuery",
"searchVal": null,
"searchTree": {
"filteringOperands": [
{
"fieldName": "supplierId",
"condition": {
"name": "greaterThan",
"isUnary": false,
"iconName": "filter_greater_than"
},
"conditionName": "greaterThan",
"searchVal": 10,
"searchTree": null
}
],
"operator": 0,
"entity": "Suppliers",
"returnFields": [
"supplierId"
]
}
}
],
"operator": 0,
"entity": "Products",
"returnFields": [
"supplierId"
]
}
```

## SQL Example

Let's take a look at a practical example of how the Ignite UI for Angular Query Builder Component can be used to build SQL queries.

In the sample below we have 3 `entities` with names 'Suppliers', 'Categories' and 'Products'.

Let's say we want to find all suppliers who supply products which belong to the 'Beverages' category. Since the data is distributed across all entities, we can take advantage of the *IN* operator and accomplish the task by creating subqueries. Each subquery is represented by a `FilteringExpressionsTree` and can be converted to a SQL query through the `transformExpressionTreeToSqlQuery(tree: IExpressionTree)` method.

First, we create а `categoriesTree` which will return the `categoryId` for the record where `name` is `Beverages`. This is the innermost subquery:

```ts
const categoriesTree = new FilteringExpressionsTree(0, undefined, 'Categories', ['categoryId']);
categoriesTree.filteringOperands.push({
fieldName: 'name',
conditionName: IgxStringFilteringOperand.instance().condition('equals').name,
searchVal: 'Beverages'
});
```

The corresponding SQL query for this `FilteringExpressionsTree` will look like this:

```
SELECT categoryId FROM Categories WHERE name = 'Beverages'
```

Then we create а `productsTree` that will return the `supplierId` field from the `categoriesTree` for the records where the `categoryId` matches the `categoryId` returned by the innermost subquery. We do this by setting the `inQuery` condition and the relevant `searchTree`. This is the middle subquery:

```ts
const productsTree = new FilteringExpressionsTree(0, undefined, 'Products', ['supplierId']);
productsTree.filteringOperands.push({
fieldName: 'categoryId',
conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
searchTree: categoriesTree
});
```

This is the updated state of the SQL query:

```
SELECT supplierId FROM Products WHERE categoryId IN (
SELECT categoryId FROM Categories WHERE name = 'Beverages'
)
```

Finally, we create а `suppliersTree` that will return all fields from `Suppliers` entity where the `supplierId` matches any of the `supplierId`s returned by the middle subquery. This is the outermost query:

```ts
const suppliersTree = new FilteringExpressionsTree(0, undefined, 'Suppliers', ['*']);
suppliersTree.filteringOperands.push({
fieldName: 'supplierId',
conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
searchTree: productsTree
});
```

Our SQL query is now complete:

```
SELECT * FROM Suppliers WHERE supplierId IN (
SELECT supplierId FROM Products WHERE categoryId IN (
SELECT categoryId FROM Categories WHERE name = 'Beverages'
)
)
```

Now we can set the `expressionsTree` property of the `IgxQueryBuilderComponent` to `suppliersTree`. Furthermore, every change to the query triggers a new request to the endpoint and the resulting data shown in the grid is refreshed.

<code-view style="height:700px"
no-theming
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/interactions/query-builder-sql-sample" >
</code-view>

## API References

<div class="divider--half"></div>

* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/index.html#function-query-builder-theme)

## Additional Resources

<div class="divider--half"></div>
Our community is active and always welcoming to new ideas.

* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
13 changes: 7 additions & 6 deletions en/components/themes/palettes.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,11 @@ Apart from having a single global palette, you can also create several palettes
/* styles.css */

.blue-theme {
--ig-primary-500: #0008ff;
--ig-primary-500: #0008ff;
}

.red-theme {
--ig-primary-500: #ff0400;
--ig-primary-500: #ff0400;
}
```

Expand Down Expand Up @@ -172,12 +172,13 @@ Be mindful when changing the `gray` and `surface` color variants as they are use

So far we've covered the `primary`, `secondary`, `gray`, and `surface` color variants and how you can override them. There are four more colors - `info`, `success`, `warn`, and `error`. They are usually used to set the colors in different states. For example, the `igx-input-group` component uses these colors in its input validation states.
They can be changed as the other color variants, all we need to do it to set the `500` variant and all of the other varints will be generated.

```css
:root {
--ig-info-500: #1377d5;
--ig-success-500: #4eb862;
--ig-warn-500: #faa419;
--ig-error-500: #ff134a;
--ig-info-500: #1377d5;
--ig-success-500: #4eb862;
--ig-warn-500: #faa419;
--ig-error-500: #ff134a;
}
```

Expand Down
Loading