this is master-detatil grid.
after pageload, i did the mastergrid's first row select and show detail with out click.
now I do selected row's color change.
but i don't know how to change selected row's color.
below code is just example,
Assume that the first row of the master grid is selected(without click) and the color does not change.
thanks
'''C#
@page "/Ex/EXS/ExPage07"
@using Syncfusion.Blazor.Layouts
@code{
public aaa bbb { get; set; } = new();
}
<SfSplitter Height="100%" SeparatorSize="3" Orientation="Syncfusion.Blazor.Layouts.Orientation.Horizontal">
<SplitterPanes>
<SplitterPane Size="50%" Collapsible="true" CssClass="p-1">
<ContentTemplate>
<SfGrid ID="master" @onfocusin="@((e)=> bbb.grid_onfocusin(e,"master"))"
DataSource="@Orders"
GridLines="GridLine.Both" Width="100%"
AllowSorting="false" AllowRowDragAndDrop="false" AllowGrouping="false">
<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>
</ContentTemplate>
</SplitterPane>
<SplitterPane Size="50%" Collapsible="true" CssClass="p-1">
<ContentTemplate>
<SfGrid ID="detail" @onfocusin="@((e)=> bbb.grid_onfocusin(e,"detail"))"
DataSource="@Orders"
GridLines="GridLine.Both" Width="100%"
AllowSorting="false" AllowRowDragAndDrop="false" AllowGrouping="false">
<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>
</ContentTemplate>
</SplitterPane>
</SplitterPanes>
</SfSplitter>
@code {
public List<Order> Orders { get; set; }
public class aaa
{
public aaa()
{
}
public string focusGrid { get; set; } = "";
public void grid_onfocusin(Microsoft.AspNetCore.Components.Web.FocusEventArgs args, string name)
{
focusGrid = name;
Console.WriteLine("focusGrid: " + focusGrid);
}
}
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}
|
<ContentTemplate>
<SfGrid ID="master" @onfocusin="@((e)=> bbb.grid_onfocusin(e,"master"))"
DataSource="@Orders" SelectedRowIndex="0"
GridLines="GridLine.Both" Width="100%"
AllowSorting="false" AllowRowDragAndDrop="false" AllowGrouping="false">
. . . . ..
</SfGrid>
</ContentTemplate> |
sorry, I think my explanation wasn't enough.
my grid has combobox. so when first load page, it works. but after seleting combox to change data at grid, it's don't work
SelectedRowIndex is rendered only at the beginning. But I select several grids with combo box and look them up. Therefore, SelectedRowIndex is applied only at first and not after. Is there a way to render a SelectedRowIndex every time the grid changes?