Blazor datagrid hierarchy - CSS and toolbar background color
I'm using a 3 level datagrid hierarchy and can't figure out how to do the following:
1. Is there a way to have different toolbar background colors for each level (each grid) ?
2. I would like to change dynamically the toolbar background color of the parent grid when I expand a row to show details in the child grid : could you please help?
Many thanks for your attention and your high quality product.
Best regards.
SIGN IN To post a reply.
3 Replies
RN
Rahul Narayanasamy
Syncfusion Team
December 15, 2021 02:20 PM UTC
Hi Eric,
Greetings from Syncfusion.
Query: Blazor datagrid hierarchy - CSS and toolbar background color - I would like to change dynamically the toolbar background color of the parent grid when I expand a row to show details in the child grid
We have validated your query and you want to change the toolbar background color for each Grid. You can achieve your requirement by using below CSS. Find the below code snippets for your reference.
|
<SfGrid ID="Grid1" DataSource="@Employees" ShowColumnChooser="true" Toolbar=@ToolbarItems>
<GridTemplates>
<DetailTemplate>
@{
var employee = (context as EmployeeData);
<SfGrid ID="Grid2" TValue="Order" Query="@GetEmployeesQuery(employee)" AllowPaging="true" ShowColumnChooser="true" Toolbar=@ToolbarItems>
<GridPageSettings PageSize="8"></GridPageSettings>
<SfDataManager Url=https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Orders CrossDomain="true"></SfDataManager>
<GridTemplates>
<DetailTemplate Context="CustomerContext">
@{
var orders = (CustomerContext as Order);
<SfGrid ID="Grid3" TValue="CustomerDetails" Query="@GetOrderQuery(orders)" ShowColumnChooser="true" Toolbar=@ToolbarItems>
. . .
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
. . .
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
<. . .
</GridColumns>
</SfGrid>
<style>
.e-toolbar-item .e-tbar-btn {
background-color: aqua; /*this will change color for particular toolbar item*/
}
#Grid1 .e-toolbar .e-toolbar-items {
background: bisque;
}
#Grid2 .e-toolbar .e-toolbar-items {
background: green;
}
#Grid3 .e-toolbar .e-toolbar-items {
background: red;
}
</style>
|
Please let us know if you have any concerns.
Regards,
Rahul
ER
Eric
December 15, 2021 05:52 PM UTC
Many thanks for your quick answer. This answers question #1 as it allows to have a color for each hierarchy grid.
My question #2 is: can I change dynamically the parent toolbar color when I expand a row to show details in the child grid.
Based upon you example, I would like the toolbar background color of Grid2 to change to bisque when I expand a row of Grid1 and at the same time the toolbar background color of Grid1 to turn to white, or the toolbar background color of Grid3 to change to bisque when I expand a row of Grid 2 and at the same time the toolbar background colors of Grid1 and Grid2 to turn white.
Hope you can help.
Best regards,
Eric.
RN
Rahul Narayanasamy
Syncfusion Team
December 17, 2021 03:40 AM UTC
Hi Eric,
Thanks for the update.
We have validated your query and you want to set the toolbar background color initially the top level Grid. After expanding each detail row, you want to set the toolbar background color to the opened detail Grid. Here, we have modified the sample based on your request. Find the below code snippets and sample for your reference.
|
<div class="col-lg-12 control-section">
<div class="content-wrapper">
<div class="row">
<SfGrid ID="Grid1" DataSource="@Employees" ShowColumnChooser="true" Toolbar=@ToolbarItems>
<GridEvents DetailDataBound="DetailDataBoundHandler" TValue="EmployeeData"></GridEvents>
<GridTemplates>
<DetailTemplate>
@{
var employee = (context as EmployeeData);
<SfGrid ID="Grid2" TValue="Order" Query="@GetEmployeesQuery(employee)" AllowPaging="true" ShowColumnChooser="true" Toolbar=@ToolbarItems>
<GridPageSettings PageSize="8"></GridPageSettings>
<GridEvents DetailDataBound="DetailDataBoundHandler1" TValue="Order"></GridEvents>
<SfDataManager Url=https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Orders CrossDomain="true"></SfDataManager>
<GridTemplates>
<DetailTemplate Context="CustomerContext">
@{
var orders = (CustomerContext as Order);
<SfGrid ID="Grid3" TValue="CustomerDetails" Query="@GetOrderQuery(orders)" ShowColumnChooser="true" Toolbar=@ToolbarItems>
<SfDataManager Url=https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Customers CrossDomain="true"></SfDataManager>
. . .
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
. . .
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
. . .
</SfGrid>
</div>
</div>
</div>
@code{
public string[] ToolbarItems = new string[] { "ColumnChooser" };
bool IsFirst { get; set; } = true;
bool IsSecond { get; set; } = false;
bool IsThird { get; set; } = false;
. ..
public void DetailDataBoundHandler(DetailDataBoundEventArgs<EmployeeData> args)
{
IsFirst = false;
IsSecond = true;
}
public void DetailDataBoundHandler1(DetailDataBoundEventArgs<Order> args)
{
IsFirst = false;
IsSecond = false;
IsThird = true;
}
}
@if (IsFirst)
{
<style>
#Grid1 .e-toolbar .e-toolbar-items {
background: bisque;
}
. . .
</style>
}
@if (IsSecond)
{
<style>
.e-toolbar-item .e-tbar-btn {
background-color: aqua; /*this will change color for particular toolbar item*/
}
#Grid1 .e-toolbar .e-toolbar-items {
background: #f8f9fa;
}
#Grid2 .e-toolbar .e-toolbar-items {
background: bisque;
}
. ..
</style>
}
@if (IsThird)
{
<style>
. . .
#Grid3 .e-toolbar .e-toolbar-items {
background: bisque;
}
</style>
}
|
Please let us know if you have any concerns.
Regards,
Rahul
SIGN IN To post a reply.
