-
-
Notifications
You must be signed in to change notification settings - Fork 534
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DataGrid: Dynamic data support through ExpandoObject (#5507)
* Initial implementation for dynamic data support through ExpandoObject * DynamicItem | DataGridAggregate | AutomaticallyGenerateColumns * Demo DynamicDataPage | Format caption Pascal case * Docs : Dynamic Data * InvokeAsync( StateHasChanged ) * DataGrid | Fix merge * Formating * rephrase docs page * release notes --------- Co-authored-by: Mladen Macanovic <[email protected]>
- Loading branch information
1 parent
95d0ecd
commit fba16c1
Showing
21 changed files
with
753 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
129 changes: 129 additions & 0 deletions
129
Demos/Blazorise.Demo/Pages/Tests/DataGrid/DynamicDataPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| @page "/tests/datagrid/dynamic" | ||
| @using System.Dynamic | ||
| <Row> | ||
| <Column> | ||
| <Card Margin="Margin.Is4.OnY"> | ||
| <CardHeader> | ||
| <CardTitle>Datagrid: Dynamic</CardTitle> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Paragraph> | ||
| Our DataGrid allows you to bind data dynamically by supporting the use of the ExpandoObject. | ||
| </Paragraph> | ||
| </CardBody> | ||
| <CardBody> | ||
| <DataGrid TItem="ExpandoObject" | ||
| Data="inMemoryData" | ||
| Responsive | ||
| ShowPager | ||
| ShowPageSizes | ||
| PageSize="5" | ||
| Editable | ||
| EditMode="DataGridEditMode.Inline" | ||
| NewItemCreator="NewItemCreator"> | ||
| <DataGridAggregates> | ||
| <DataGridAggregate Field="Email" Aggregate="DataGridAggregateType.Count"> | ||
| <DisplayTemplate> | ||
| @($"Total emails: {context.Value}") | ||
| </DisplayTemplate> | ||
| </DataGridAggregate> | ||
| <DataGridAggregate Field="Salary" Aggregate="DataGridAggregateType.Sum" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" /> | ||
| <DataGridAggregate Field="IsActive" Aggregate="DataGridAggregateType.TrueCount" /> | ||
| <DataGridAggregate Field="Childrens" Aggregate="DataGridAggregateType.Sum" /> | ||
| </DataGridAggregates> | ||
| <DataGridColumns> | ||
| <DataGridCommandColumn></DataGridCommandColumn> | ||
| <DataGridColumn Editable TextAlignment="TextAlignment.Center" Field="@nameof( Employee.Id )" Caption="#" Width="60px" /> | ||
| <DataGridColumn Editable Field="FirstName" Caption="First Name"> | ||
| </DataGridColumn> | ||
| <DataGridColumn Editable Field="LastName" Caption="Last Name" /> | ||
| <DataGridColumn Editable Field="Email" Caption="Email" /> | ||
| <DataGridColumn Editable Field="City" Caption="City"> | ||
| <CaptionTemplate> | ||
| <Icon Name="IconName.City" /> @context.Caption | ||
| </CaptionTemplate> | ||
| </DataGridColumn> | ||
| <DataGridColumn Editable Field="Zip" Caption="Zip"> | ||
| </DataGridColumn> | ||
| <DataGridDateColumn Field="DateOfBirth" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable /> | ||
| <DataGridNumericColumn Field="Childrens" Caption="Childrens" ReverseSorting="true" Editable Filterable="false" /> | ||
| <DataGridSelectColumn Field="Gender" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" /> | ||
| <DataGridColumn Field="Salary" Caption="Salary" Editable Width="140px" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End"> | ||
| </DataGridColumn> | ||
| <DataGridCheckColumn Field="IsActive" Caption="Active" Editable Filterable="false"> | ||
| <DisplayTemplate> | ||
| <Check TValue="bool" Checked='(context as dynamic).IsActive' Disabled ReadOnly /> | ||
| </DisplayTemplate> | ||
| </DataGridCheckColumn> | ||
| </DataGridColumns> | ||
| </DataGrid> | ||
| </CardBody> | ||
| </Card> | ||
| </Column> | ||
| </Row> | ||
|
|
||
| <Row> | ||
| <Column> | ||
| <Card Margin="Margin.Is4.OnY"> | ||
| <CardHeader> | ||
| <CardTitle>Datagrid: Dynamic Auto Generate Columns</CardTitle> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Paragraph> | ||
| Additionally the DataGrid can auto generate columns from your dynamic data. | ||
| </Paragraph> | ||
| </CardBody> | ||
| <CardBody> | ||
| <DataGrid TItem="ExpandoObject" | ||
| Data="inMemoryData" | ||
| Responsive | ||
| ShowPager | ||
| ShowPageSizes | ||
| PageSize="5" | ||
| Editable | ||
| EditMode="DataGridEditMode.Inline" | ||
| NewItemCreator="NewItemCreator" /> | ||
| </CardBody> | ||
| </Card> | ||
| </Column> | ||
| </Row> | ||
|
|
||
| @code { | ||
|
|
||
| [Inject] EmployeeData EmployeeData { get; set; } | ||
|
|
||
| private List<ExpandoObject> inMemoryData; | ||
|
|
||
| protected override async Task OnInitializedAsync() | ||
| { | ||
| inMemoryData = new(); | ||
| var data = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 ); | ||
|
|
||
| foreach ( var item in data ) | ||
| { | ||
|
|
||
| IDictionary<string, object> expando = new ExpandoObject(); | ||
|
|
||
| foreach ( var property in typeof( Employee ).GetProperties() ) | ||
| { | ||
| expando.Add( property.Name, property.GetValue( item ) ); | ||
| } | ||
| inMemoryData.Add( (ExpandoObject)expando ); | ||
| } | ||
|
|
||
|
|
||
| await base.OnInitializedAsync(); | ||
| } | ||
|
|
||
| private ExpandoObject NewItemCreator() | ||
| { | ||
| IDictionary<string, object> expando = new ExpandoObject(); | ||
|
|
||
| foreach ( var property in typeof( Employee ).GetProperties() ) | ||
| { | ||
| expando.Add( property.Name, property.PropertyType.IsValueType ? Activator.CreateInstance( property.PropertyType ) : null ); | ||
| } | ||
|
|
||
| return (ExpandoObject)expando; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/BindingData/DynamicPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| @page "/docs/extensions/datagrid/binding-data/dynamic" | ||
|
|
||
| <Seo Canonical="/docs/extensions/datagrid/dynamic" Title="Blazorise DataGrid Binding Dynamic data" Description="The DataGrid can bind to your dynamic data, allowing for greater flexibility." /> | ||
|
|
||
| <DocsPageTitle Path="Extensions/DataGrid/Binding-Data/Dynamic"> | ||
| Blazorise DataGrid: Dynamic Data Binding | ||
| </DocsPageTitle> | ||
|
|
||
| <DocsPageLead> | ||
| The Blazorise <Code>DataGrid</Code> component offers the ability to bind to dynamic data, providing enhanced flexibility for various applications. | ||
| </DocsPageLead> | ||
|
|
||
| <DocsPageSection> | ||
| <DocsPageSectionHeader Title="Basic Example"> | ||
| To ensure the <Code>DataGrid</Code> correctly interprets the structure and type of your dynamic data during specific operations, such as creating new items or aggregating data, you need to define a representation within the <Code>NewItemCreator</Code> function. Below is an illustrative example. | ||
| </DocsPageSectionHeader> | ||
| <DocsPageSectionContent FullWidth> | ||
| <DataGridDynamicExample /> | ||
| </DocsPageSectionContent> | ||
| <DocsPageSectionSource Code="DataGridDynamicExample" /> | ||
| </DocsPageSection> | ||
|
|
||
| <DocsPageSection> | ||
| <DocsPageSectionHeader Title="Auto Generate Columns Example"> | ||
| The Blazorise DataGrid also supports auto-generating columns based on the data structure. This feature simplifies the process of displaying data by automatically creating columns that match the properties of the bound data objects. | ||
| </DocsPageSectionHeader> | ||
| <DocsPageSectionContent FullWidth> | ||
| <DataGridDynamicAutoGenerateExample /> | ||
| </DocsPageSectionContent> | ||
| <DocsPageSectionSource Code="DataGridDynamicAutoGenerateExample" /> | ||
| </DocsPageSection> | ||
|
|
||
| <DocsPageApi> | ||
| <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" /> | ||
| </DocsPageApi> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.