In Syncfusion’s recent webinar, “Creating a Master-Detail View Is Easier with Blazor DataGrid,” developer Uma Maheswari showed attendees how to visualize data in a master-detail hierarchy in a single grid view in Blazor. If you missed it, or you would like to watch it again, check out our YouTube page, or watch it here:
The following is the Q&A portion of the webinar.
I’m keen to see how to open the data in modal form (Bootstrap).
To show the selected row details in a modal dialog (Bootstrap), we suggest you access the selected record details in the RowSelected event of the grid.
Refer to the following code example.
<SfGrid DataSource="@Orders">
<GridEvents RowSelected="RowSelectHandler" TValue="Order"></GridEvents>
...
</SfGrid>
@code{
public void RowSelectHandler(RowSelectEventArgs<Order> args)
{
//{args.Data} returns the current selected records.And open your bootstrap dialog here
}
}
UG: https://blazor.syncfusion.com/documentation/datagrid/events/#rowselected
How does “Context” between parent and child grids with a DetailTemplate in both work?
While using DetailTemplate inside both the parent and child grids, we suggest you define the Context with different variable naming as shown in the following. Refer to the following code example to learn how to work with the Context in parent-child grids.
<SfGrid DataSource="@Employees" Height="315px">
<GridTemplates>
<DetailTemplate>
@{
var employee = (context as EmployeeData);
<SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))">
<GridTemplates>
<DetailTemplate Context="ChildContext">
@* render your child control here *@
</DetailTemplate>
</GridTemplates>
<GridColumns>
...
</GridColumns>
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
...
</GridColumns>
</SfGrid>
See the online demo.
How can I customize the header of the Grid edit dialog?
You can customize the grid edit dialog header using the HeaderTemplate property. Please refer to the following code snippet.
@using Syncfusion.Blazor.Grids
<SfGrid @ref="Grid" DataSource="@orderDetails" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">
<HeaderTemplate>
@{
var text = GetHeader((context as OrderDetails));
<span>@text</span>
}
</HeaderTemplate>
</GridEditSettings>
</SfGrid>
@code{
SfGrid<OrderDetails> Grid { get; set; }
public List<OrderDetails> orderDetails { get; set; }
public string Header { get; set; }
public string ButtonText { get; set; }
public string GetHeader(OrderDetails Value)
{
if (Value.OrderID == null)
{
ButtonText = "Insert";
return "Insert New Order Detail"; //Customized text for Add dialog
}
else
{
ButtonText = "Save Changes";
return "Edit Record Details of " + Value.OrderID.ToString(); //Customized text for Edit dialog
}
}
} Download the sample.
What is the recommended data manager for Blazor with a web API backend? I need to manage filters and sorting.
We suggest you use the DataGrid’s Web API Adaptor to bind the data from your web API service. While using the web API service, we will generate only the query string for filtering and sorting operations, based on which data operations need to be handled in the web API service. Refer to our UG documentation for more.
Great presentation! In addition to the webinar recording, will attendees have access to the source being presented?
You can get the source code from GitHub.
It seems the data sources being used were all object data sources. Can SharePoint lists be used as data sources too?
Yes. We can bind a SharePoint list to the DataGrid control. See this Microsoft documentation for details.
It seems the templates being used were CSS and HTML-based. Do you have a designer for creating those templates? And how can those created templates be stored as assets?
No, we don’t have a UI designer for Blazor right now. However, we have logged a feature request for this.
Does it support client-side PWA?
Yes, it supports client-side PWA, as all our components work on both server and WASM applications. You can refer to this PWA showcase example.
Will it work offline in PWA?
Yes. By default, apps created using a PWA template have support for running offline. So, it should work offline. You can refer to this PWA showcase example.
Do they have any adaptive or responsive design built in?
Yes. Our components have built-in adaptive rendering based on the target resolution.
Can columns of a grid be shown or obfuscated? Does the grid control persist the appearance of it?
Yes. DataGrid’s state can be persisted using the EnablePersistence feature. When persistence is enabled in a grid, the GridColumn position, filtering, sorting, etc., will be persisted. While enabling the persistence, though, a grid needs to be specified with a static grid ID.
Refer to the following code example.
<SfGrid ID="Grid" EnablePersistence="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true" DataSource="@Orders" AllowPaging="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
What alternatives are there to specifying absolute pixel widths and heights? Obviously this is not good for allowing it to work on different devices.
You can make the tab adaptable using the overflow property. You can learn more about this from this example. You can also refer to this Blazor DataGrid example, where the tab is integrated by setting no specific height and width, so that it adapts automatically inside the details view of the grid.
Can we use Syncfusion on old browsers like IE 11 ?
Yes, Blazor server applications support IE11 and our components also support this with the usage of polyfills.
Can you explain the Syncfusion licensing?
You can check our licensing details on either our Blazor sales page or our Blazor main page.
Hi. Great presentation. What are the best practices for updating data (from database) inside the tabs?
To show you how to render and update data from a database in the DataGrid control placed inside the tabs, we have prepared a sample and shared it with a code example.
<SfTab LoadOn="ContentLoad.Demand">
<TabItems>
<TabItem>
<HeaderTemplate>Calendar</HeaderTemplate>
<ContentTemplate>
<SfCalendar TValue="DateTime"></SfCalendar>
</ContentTemplate>
</TabItem>
<TabItem>
<HeaderTemplate>Data Grid</HeaderTemplate>
<ContentTemplate>
<SfGrid @ref="Grid" DataSource="@GridData" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowFiltering="true" AllowSorting="true" AllowPaging="true">
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
<GridEvents OnActionComplete="OnComplete" TValue="Order"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsIdentity="true" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Id" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
</ContentTemplate>
</TabItem>
</TabItems>
</SfTab>
Note:Please change the connection string in OrderContext.cs as per the MDF file in the App_Data folder.
Do you have to use EF for CRUD operations, or can you use stored procedures?
You can use either Entity Framework or stored procedures. To bind the data source to DataGrid directly using Entity Framework, refer to our UG documentation.
If you want to use stored procedures, then you may need to use DataGrid’s CustomAdaptor feature. Refer to these UG documentation links.
https://blazor.syncfusion.com/documentation/datagrid/custom-binding/
https://blazor.syncfusion.com/documentation/datagrid/data-binding/#sql-server-data-bindingsql-client – using sqlcommand”
Does this example work as is for WebAssembly projects, as well, or does there need to be some tweaking?
Our components work on both server and WASM applications and therefore, it will work. You can see how to handle the Syncfusion Blazor components in WASM applications in this getting started documentation.
Do you have an example where we can have a master-detail edit page instead of a grid display page?
Here is one. You can get this example from GitHub and simply enable the editing feature to meet your requirement.
I have been reading in a lot of places that Entity Framework is slow. Has any work been done on making data retrieval fast when you have large databases with millions of records? Also, do you have any stats on the speed of retrieving data using iqueryable versus ienumerable versus tolist on large databases?
To make the data retrieval faster, we have a paging concept where current page records (say 12) can be retrieved from a database that has millions of record. So that data from the database will be fetched with an on-demand loading concept, which will reduce the amount of time it takes.
Or, if you do not want to render the pager, then virtual scrolling can be enabled in DataGrid. Scrolling will be rendered and a small amount of data will be fetched from the database on each scroll and loaded.
Please find some general links regarding the performance and comparison among different types of data sets.
https://www.codeproject.com/Articles/832189/List-vs-IEnumerable-vs-IQueryable-vs-ICollection-v
https://www.codeproject.com/Questions/852728/Which-is-better-and-fast-IQueryable-or-List
Would it be possible to use Blazor components instead of defining the tab content inline?
Yes, it is possible to use any Blazor component directly inside the detail template of a grid. The Tab component was used for demo purposes.
Are the slides publicly available?
The slides will be made available along with our recap blog and the recording of this webinar will be posted to our YouTube channel.
Default templates for ASP.NET Core and MVC have a feature to scaffold views for entities (with Entity Framework). The result is a different approach to the master-detail pattern, namely a dedicated (separate) page for the detail view. For my purposes, this approach allows for an easy implementation of a global search feature, where entities from different SfGrids can be found in a single search box (let’s say located at the top navbar). Clicking on a single search result, you land on the dedicated detail page of the entity. In this webinar, the detail view is integrated in the accordion in the master (list) view. How would I add a such a global search feature described above in the context of the SfGrid?
To illustrate how to find the entities from different SfGrids using a single global search box, we have prepared an example with a single child grid placed inside the detail template of the parent grid. Also, we have applied an initial search to the child grid based on a Boolean variable and the searched text from a parent grid. Please refer to the following code example.
@{
var InitSearch = (new string[] { "CustomerName","ShipCountry" });
var Tool = (new List<string>() { "Search" });
}
<SfGrid @ref="ParentGrid" DataSource="@Employees" Toolbar="@Tool" Height="315px">
<GridTemplates>
<DetailTemplate>
@{
searched = CheckSearching(); // check for parent grid searching
var employee = (context as EmployeeData);
<SfGrid @ref="DetailGrid" DataSource="@Orders" Toolbar="Tool" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))">
@if (searched) { @*apply intial search to details Grid based on parent search value*@
<GridSearchSettings Fields=@InitSearch Operator=Syncfusion.Blazor.Operator.Contains Key="@SearchVal" IgnoreCase="true"></GridSearchSettings>
}
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn>
<GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn>
</GridColumns>
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
<GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn>
<GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn>
<GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn>
<GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public bool searched { get; set; }
public string SearchVal { get; set; }
public bool CheckSearching()
{
if (ParentGrid.SearchSettings.Key != "")
{
SearchVal = ParentGrid.SearchSettings.Key;
return true;
}
else
{
SearchVal = "";
return false;
}
}
Here’s a downloadable example.
Refer to our UG documentation for more.
How is the rendering performance?
You can find the performance of the DataGrid control with different numbers of data sources in our online demo sample. We have rendered our overview sample with 1,000 to 1,000,000 records and 11 columns. Refer to our online demo sample for more.
Hi, does the grid have server-side grouping capabilities?
No. Currently we do not have support to perform grouping on the server-side. For remote data, we will return the paged record and apply the grouping at our source level.
Is the MapsMarker image from ImageUrl cached locally?
No, we do not cache the image of the marker provided in the ImageUrl in the Maps control locally.
How can we set the grid column order date to yyyy-mm-dd ?
You can set it using the Format property in the grid column <GridColumn Field=”@nameof(Order.OrderDate)” Format=”yyyy-MM-dd” ></GridColumn> For more information, you can check this documentation.
How can we show the child data in a dialog instead of expanding the parent grid row?
You can show the child grid inside the dialog using the RowSelected event of DataGrid. Inside this event handler, you can query the child grid data based on the selected row data. Please refer to the following code example and documentation links.
// Dialog Component
<SfDialog @bind-Visible="@IsVisible" Height="250px" Width="435px" ShowCloseIcon="true">
<DialogTemplates>
<Content>
// Child Grid
<SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", @EmployeeID))">
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn>
<GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn>
</GridColumns>
</SfGrid>
</Content>
</DialogTemplates>
</SfDialog>
// Parent Grid
<SfGrid DataSource="@Employees" Height="315px">
<GridEvents RowSelected="GetSelectedRecords" TValue="EmployeeData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn>
<GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn>
<GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn>
<GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn>
</GridColumns>
</SfGrid>
@code{
private bool IsVisible { get; set; } = false;
public int? EmployeeID { get; set; } = 1;
public void GetSelectedRecords(RowSelectEventArgs<EmployeeData> args)
{
this.EmployeeID = args.Data.EmployeeID;
this.IsVisible = true;
}
}
UG links
https://blazor.syncfusion.com/documentation/datagrid/events/#rowselected
https://blazor.syncfusion.com/documentation/dialog/getting-started/
Do you have an example of a Blazor WebAssembly app that’s ASP.NET Core-hosted and a progressive web application?
No, we don’t have an example for this combination right now. But we will try to create one and update the blog on this in the future. For now, you can refer to this Blazor WebAssembly showcase app with PWA.
Does the grid component include the functionality to show or hide columns by the user? One showing a control with all possible columns so the user ticks which ones are visible and which ones are not.
Yes, we have support for a ColumnChooser, where a pop-up will be shown with a list of available columns in DataGrid. Users can select check boxes and click OK to change the visibility of a grid column. Refer to our UG documentation and demo for more.
Does the grid component include the functionality to persist and reload the state of the grid? Does the grid component include the functionality to persist and reload filters applied to columns?
In DataGrid, there is support to persist the state of the DataGrid using the EnablePersistence property. While using EnablePersistence, a static ID must be defined in the DataGrid component so that its state will be persisted in local storage based on it. By default, if persistence is enabled in DataGrid, filter settings, sort settings, and column positions, along with some other properties, will be persisted.
For your convenience, we have prepared a sample that you can download.
If you want to manually handle the persist settings, then we suggest you use the GetPersistData, SetPersistData and ResetPersistData methods.
If you enjoyed this blog, we think you will also like:
[ebook] Blazor Succinctly
[blog] Syncfusion Blazor Components are Blazor WebAssembly 3.2.0 Compatible!