Skip to content
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

Add tree grid display density topic #1247

Merged
merged 6 commits into from
Jun 7, 2024
Merged

Add tree grid display density topic #1247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
402514f
Add tree grid display density topic and update toc
georgianastasov Apr 10, 2024
3c0bcd9
Merge branch 'vnext' of https://github.com/IgniteUI/igniteui-xplat-do…
georgianastasov Jun 6, 2024
dae1f03
Resolve conflicts and fix topic
georgianastasov Jun 6, 2024
f3bcc6f
Merge branch 'vnext' into ganastasov/tree-grid-display-density-topic
georgianastasov Jun 6, 2024
c7ff677
Fix errors
georgianastasov Jun 6, 2024
884d647
Merge branch 'vnext' into ganastasov/tree-grid-display-density-topic
kacheshmarova Jun 7, 2024
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
147 changes: 85 additions & 62 deletions doc/en/components/grids/_shared/display-density.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,57 @@ public ngOnInit() {
}
```

<!-- ComponentStart: TreeGrid -->
```razor
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebTreeGrid"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="PropertyEditor"
@ref="propertyEditor">
<IgbPropertyEditorPropertyDescription
PropertyPath="DisplayDensity"
Name="DisplayDensityEditor"
@ref="displayDensityEditor">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
```

```html
<div class="density-chooser">
<igc-property-editor-panel
description-type="WebTreeGrid"
is-horizontal="true"
is-wrapping-enabled="true"
name="PropertyEditor"
id="propertyEditor">
<igc-property-editor-property-description
property-path="DisplayDensity"
name="DisplayDensityEditor"
id="displayDensityEditor">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
```

```tsx
<IgrPropertyEditorPanel
ref={propertyEditorRef}
componentRenderer={renderer}
target={grid}
descriptionType="WebTreeGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
propertyPath="DisplayDensity"
name="DisplayDensityEditor">
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
```
<!-- ComponentEnd: TreeGrid -->

<!-- ComponentStart: HierarchicalGrid -->
```razor
<div class="options vertical">
Expand Down Expand Up @@ -271,21 +322,6 @@ Now we can add the markup.

```razor
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="PropertyEditor"
@ref="propertyEditor">
<IgbPropertyEditorPropertyDescription
PropertyPath="DisplayDensity"
Name="DisplayDensityEditor"
@ref="displayDensityEditor">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>

<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Expand Down Expand Up @@ -445,20 +481,6 @@ Now we can add the markup.
```

```html
<div class="density-chooser">
<igc-property-editor-panel
description-type="WebGrid"
is-horizontal="true"
is-wrapping-enabled="true"
name="PropertyEditor"
id="PropertyEditor">
<igc-property-editor-property-description
property-path="DisplayDensity"
name="DisplayDensityEditor"
id="displayDensityEditor">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<igc-grid id="grid" width="100%" height="550px" allow-filtering="true">
<igc-column-group header="Customer Information">
<igc-column field="CustomerName" header="Customer Name" data-type="String" sortable="true" has-summary="true">
Expand Down Expand Up @@ -506,6 +528,7 @@ Now we can add the markup.
</igx-column-group>
</igx-grid>
```

```tsx
<IgrGrid autoGenerate="false" ref={gridRef} data={invoicesData} allowFiltering="true">
<IgrColumn field="CustomerName" header="Customer Name" dataType="String" sortable="true" hasSummary="true">
Expand Down Expand Up @@ -549,7 +572,6 @@ Now we can add the markup.
<!-- ComponentEnd: Grid -->

<!-- ComponentStart: TreeGrid -->

```html
<div class="density-chooser">
<igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
Expand Down Expand Up @@ -634,21 +656,8 @@ Now we can add the markup.
</IgbColumnGroup>
</IgbTreeGrid>
```

```html
<div class="density-chooser">
<igc-property-editor-panel
description-type="WebGrid"
is-horizontal="true"
is-wrapping-enabled="true"
name="PropertyEditor"
id="PropertyEditor">
<igc-property-editor-property-description
property-path="DisplayDensity"
name="DisplayDensityEditor"
id="displayDensityEditor">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<igc-tree-grid id="grid" primary-key="ID" foreign-key="ParentID" width="100%"
height="550px" allow-filtering="true">
<igc-column field="Name" data-type="String" sortable="true" has-summary="true" width="200px"></igc-column>
Expand Down Expand Up @@ -687,10 +696,35 @@ Now we can add the markup.
</igc-column-group>
</igc-tree-grid>
```

```tsx
<IgrTreeGrid autoGenerate="false" ref={this.treeGridRef} id="treeGrid" data={this.employeesFlatDetails} primaryKey="ID" foreignKey="ParentID" allowFiltering="true">
<IgrColumn field="Name" dataType="String" sortable="true" hasSummary="true" width="200"></IgrColumn>
<IgrColumnGroup header="General Information">
<IgrColumn field="HireDate" dataType="Date" sortable="true" hasSummary="true"></IgrColumn>
<IgrColumnGroup header="Personal Details">
<IgrColumn field="ID" dataType="Number" filterable="false"></IgrColumn>
<IgrColumn field="Title" dataType="String" sortable="true" hasSummary="true"></IgrColumn>
<IgrColumn field="Age" dataType="Number" sortable="true" hasSummary="true" filterable="false"></IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrColumnGroup header="Address Information">
<IgrColumnGroup header="Location">
<IgrColumn field="Country" dataType="String" sortable="true" hasSummary="true"></IgrColumn>
<IgrColumn field="City" dataType="String" sortable="true" hasSummary="true"></IgrColumn>
<IgrColumn field="Address" dataType="String" sortable="true" hasSummary="true"></IgrColumn>
</IgrColumnGroup>
<IgrColumnGroup header="Contact Information">
<IgrColumn field="Phone" dataType="String" sortable="true" hasSummary="true"></IgrColumn>
<IgrColumn field="Fax" dataType="String" sortable="true" hasSummary="true"></IgrColumn>
<IgrColumn field="PostalCode" dataType="String" sortable="true" hasSummary="true"></IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
</IgrTreeGrid>
```
<!-- ComponentEnd: TreeGrid -->

<!-- ComponentStart: HierarchicalGrid -->

```html
<div class="density-chooser">
<igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
Expand Down Expand Up @@ -853,20 +887,6 @@ AllowFiltering="true">
```

```html
<div class="density-chooser">
<igc-property-editor-panel
description-type="WebGrid"
is-horizontal="true"
is-wrapping-enabled="true"
name="PropertyEditor"
id="PropertyEditor">
<igc-property-editor-property-description
property-path="DisplayDensity"
name="DisplayDensityEditor"
id="displayDensityEditor">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<igc-hierarchical-grid id="grid" height="600px" width="100%" allow-filtering="true">
<igc-column field="CustomerID"></igc-column>
<igc-column field="CompanyName"></igc-column>
Expand Down Expand Up @@ -983,6 +1003,7 @@ public get renderer(): ComponentRenderer {
```
<!-- end: WebComponents -->

<!-- Blazor -->
```razor
@code {
private Action BindElements { get; set; }
Expand All @@ -1000,7 +1021,9 @@ public get renderer(): ComponentRenderer {
private {ComponentSelector} grid;
}
```
<!-- end: Blazor -->

<!-- React -->
```tsx
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
Expand Down Expand Up @@ -1032,6 +1055,7 @@ private _componentRenderer: ComponentRenderer = null;
return this._componentRenderer;
}
```
<!-- end: React -->

Another option that `{ComponentName}` provides for you, in order to be able to change the height of the rows in the `{ComponentName}`, is the property `RowHeight`. So let's see in action how this property affects the `{ComponentName}` layout along with the `DisplayDensity`.

Expand Down Expand Up @@ -1082,8 +1106,8 @@ We can now extend our sample and add `RowHeight` property to the `{ComponentName
* `{ComponentName}`
* `Column`

<!-- ComponentStart: Grid -->
## Additional Resources
<!-- ComponentStart: Grid -->
* [Virtualization and Performance](virtualization.md)
* [Editing](editing.md)
* [Paging](paging.md)
Expand All @@ -1094,8 +1118,7 @@ We can now extend our sample and add `RowHeight` property to the `{ComponentName
* [Column Resizing](column-resizing.md)
* [Selection](selection.md)
* [Searching](search.md)
<!-- ComponentEnd: Grid -->

<!-- ComponentEnd: Grid -->

Our community is active and always welcoming to new ideas.

Expand Down
2 changes: 1 addition & 1 deletion docfx/en/components/toc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -694,7 +694,7 @@
"status": ["NEW_REACT"]
},
{
"exclude": ["Angular", "React"],
"exclude": ["Angular"],
"name": "Display Density",
"href": "grids/tree-grid/display-density.md",
"status": ""
Expand Down
Loading