diff --git a/blazor/datagrid/row.md b/blazor/datagrid/row.md index 10b5746b29..d853fad27a 100644 --- a/blazor/datagrid/row.md +++ b/blazor/datagrid/row.md @@ -7,307 +7,15 @@ documentation: ug # Row Customization in Blazor Data Grid -Each row represents a single record from a data source and displays values for the fields of that record in a tabular format. Rows in the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) support interaction such as selection, editing, sorting, filtering, and event-driven behaviors. +Each row represents a single record from a data source and displays values for the fields of that record in a tabular format. Rows in the [Blazor Data Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) support interaction such as selection, editing, sorting, filtering, and event-driven behaviors. -## Customize row styles - -Customizing row styles helps emphasize important data, align with application themes, and improve readability. The Blazor DataGrid supports styling through CSS, properties, methods, and events. - -### Using event - -Customize row appearance using the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event, which triggers for each row when it is bound to data. The [RowDataBoundEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowDataBoundEventArgs-1.html) provides access to row details for applying custom classes, adding elements, or other styling. - -The following example applies CSS classes to rows based on the value of the `Freight` column. Define the CSS classes `below-30`, `below-80`, and `above-80` in the stylesheet to apply the corresponding styles: - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - -@code { - private SfGrid Grid; - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = OrderData.GetAllRecords(); - } - public void RowBound(RowDataBoundEventArgs args) - { - if (args.Data.Freight < 30) - { - args.Row.AddClass(new string[] { "below-30" }); - } - else if (args.Data.Freight < 80) - { - args.Row.AddClass(new string[] { "below-80" }); - } - else - { - args.Row.AddClass(new string[] { "above-80" }); - } - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderData.cs" %} - -public class OrderData -{ - public static List Orders = new List(); - - public OrderData() { } - - public OrderData(int? OrderID, string CustomerID, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShippedDate = ShippedDate; - this.IsVerified = IsVerified; - this.ShipCity = ShipCity; - } - - public static List GetAllRecords() - { - if (Orders.Count == 0) - { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon")); - Orders.Add(new OrderData(10252, "SUPRD", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi")); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern")); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève")); - Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende")); - Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris")); - } - return Orders; - } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } - public DateTime? ShippedDate { get; set; } - public bool? IsVerified { get; set; } - public string ShipCity { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVxXwZdskYjgYrs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} - -> The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event customizes individual cells and triggers for every cell. Use it when styling is required at the cell level based on conditions. - -### Using CSS - -Apply styles to rows using CSS selectors. Each row element exposes class names that can be targeted for customization. - -**Customize alternate rows** - -Alternate rows can be styled to enhance readability. The Grid applies the CSS class `.e-altrow` to alternate rows. Override this class to apply custom styles. - -To change the background color of alternate rows, add the following CSS: - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -@code { - private SfGrid Grid; - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = OrderData.GetAllRecords(); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderData.cs" %} - -public class OrderData -{ - public static List Orders = new List(); - - public OrderData() { } - - public OrderData(int? OrderID, string CustomerID, double Freight, DateTime? OrderDate, DateTime?ShippedDate, bool? IsVerified, string ShipCity) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShippedDate = ShippedDate; - this.IsVerified = IsVerified; - this.ShipCity = ShipCity; - } - - public static List GetAllRecords() - { - if (Orders.Count == 0) - { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon")); - Orders.Add(new OrderData(10252, "SUPRD", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi")); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern")); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève")); - Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende")); - Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris")); - } - return Orders; - } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } - public DateTime? ShippedDate { get; set; } - public bool? IsVerified { get; set; } - public string ShipCity { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBHtwNxMOkzfyWw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} - -**Customize selected row** - -Customize the selected row using CSS to clearly highlight the active selection. Override the default `.e-selectionbackground` class to apply custom styles. - -To change the background color of the selected row, add the following CSS: - -```css -#CustomGrid .e-selectionbackground { - background-color: #f9920b; -} -``` -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - -@code { - private SfGrid Grid; - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = OrderData.GetAllRecords(); - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderData.cs" %} - -public class OrderData -{ - public static List Orders = new List(); - - public OrderData() { } - - public OrderData(int? OrderID, string CustomerID, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.OrderDate = OrderDate; - this.ShippedDate = ShippedDate; - this.IsVerified = IsVerified; - this.ShipCity = ShipCity; - } - - public static List GetAllRecords() - { - if (Orders.Count == 0) - { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims")); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster")); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro")); - Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon")); - Orders.Add(new OrderData(10252, "SUPRD", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi")); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern")); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève")); - Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende")); - Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris")); - } - return Orders; - } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double? Freight { get; set; } - public DateTime? OrderDate { get; set; } - public DateTime? ShippedDate { get; set; } - public bool? IsVerified { get; set; } - public string ShipCity { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhRNQDnMukwZusy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} +**Key row management features:** +- Dynamic row styling based on data conditions. +- Customizable row heights for optimal content display. +- Interactive hover effects and visual feedback. +- Frozen rows for persistent top-row information. +- Programmatic row addition, modification, and visibility control. +- Comprehensive row data access and manipulation methods. ## Row height @@ -348,10 +56,10 @@ The Blazor DataGrid supports customizing row height to display more or less cont Orders = OrderData.GetAllRecords(); } - private void ChangeRowHeight(int height) + private async Task ChangeRowHeight(int height) { RowHeightValue = height; - Grid.Refresh(); // Refresh the Grid to apply the new row height. + await Grid.Refresh(); } } @@ -411,20 +119,19 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDLRNcZxBjNTyCNC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> The `RowHeight` property sets the height for all Grid rows. It does not configure individual cell heights. -> The `RowHeight` setting applies to header and footer rows as well. +> The `RowHeight` property sets the height for all Data Grid rows. It does not configure individual cell heights. > Row height for a specific row can be customized by adding a row-level CSS class in the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event. -### Customize row height for particular row +### Customize specific row height -Customize the row height for a specific row when a single record needs additional space or emphasis. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property in combination with the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event to apply a CSS class conditionally. +Customize the row height for a specific row when rows require additional space, for example, to accommodate multi-line content. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property in combination with the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event to apply a CSS class conditionally. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -510,7 +217,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVxDGtRBDiIMRls?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVRXlLgezkvoVUA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Row hover @@ -603,15 +310,15 @@ By default, `EnableHover` is **true**. Set it to **false** to disable row hover. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXLRtmtnBjLWvIBj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> The `EnableHover` property applies to the entire Grid rather than to specific rows or columns. +> The `EnableHover` property applies to the entire Data Grid rather than to specific rows or columns. -## Row pinning (Frozen) +## Frozen rows -The Blazor DataGrid provides an option to freeze rows, keeping them visible while scrolling vertically through large datasets. This feature helps maintain important information in view for better readability. +The Blazor Data Grid provides an option to freeze rows, keeping them visible while scrolling vertically through large datasets. This feature helps maintain important information in view for better readability. {% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%} -In the following example, the [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) property is set to `2`. The top two rows remain fixed while the rest of the Grid scrolls vertically: +The [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) property is set to `2`. The top two rows remain fixed while the rest of the Data Grid scrolls vertically: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -622,12 +329,9 @@ In the following example, the [FrozenRows](https://help.syncfusion.com/cr/blazor
- - - Update Value -
Grid; - private SfNumericTextBox NumericTextBox; public List Orders { get; set; } public int NumericValue { get; set; } = 2; @@ -654,11 +357,6 @@ In the following example, the [FrozenRows](https://help.syncfusion.com/cr/blazor Orders = OrderData.GetAllRecords(); } - public void FrozenRowsFn() - { - // Get the value from NumericTextBox and update FrozenRows. - NumericValue = NumericTextBox.Value; - } } {% endhighlight %} @@ -715,24 +413,17 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhxXQjHLNGLEGXW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhdjPrKeSeYyupt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> Frozen rows should remain within the Grid viewport. -> Frozen Grid supports row virtualization to improve performance with large datasets. +> Frozen rows should remain within the Data Grid viewport. +> Frozen Data Grid supports row virtualization to improve performance with large datasets. > The frozen feature applies to rows visible in the current view. -> [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) can be used together in the same Grid. - -### Change default frozen rows line color - -The frozen row background color in the Blazor DataGrid can be customized by applying CSS styles, allowing alignment with the application's theme. +> [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) can be used together in the same Data Grid. +> The `FrozenRows` value must not exceed the number of visible data rows. -Apply the following CSS to change the default line color: +### Customize frozen row line color -```css -.e-grid .e-frozenrow-border { - background-color: rgb(5, 114, 47); -} -``` +The frozen row background color in the Blazor Data Grid can be customized by applying CSS styles, allowing alignment with the application's theme. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -825,21 +516,20 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LjBxjmZHrjmdCCjF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> When a validation message is displayed in the frozen area (Left, Right, or Fixed), scrolling is blocked until the message is cleared. +> When a validation message is displayed in a frozen column area (Left, Right, or Fixed), scrolling is blocked until the message is cleared. For details, see [Frozen columns](https://blazor.syncfusion.com/documentation/datagrid/frozen-column). -### Limitations +### Frozen row constraints -Frozen row is not compatible with the Autofill feature. +The frozen row feature locks specific rows at the top of the grid. Because autofill requires a continuous row range, it is not available when rows are frozen. ## Adding a new row programmatically -The Blazor DataGrid supports programmatically adding new rows using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync__0_System_Nullable_System_Int32__) method. This is useful when inserting records without manual entry through the UI. +The Blazor Data Grid supports programmatically adding new rows using the [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync) method. This is useful when inserting records without manual entry through the UI. -The `AddRecordAsync` method takes two parameters: +The `AddRecordAsync` method supports overloads with the following parameters: - The **data** object representing the new row to be added - - The **index** at which the new row should be inserted. If no index is specified, the new row is added at the end. - + - The optional **index** at which the new row should be inserted. If no index is specified, the new row is added at the end. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -865,6 +555,7 @@ The `AddRecordAsync` method takes two parameters: @code { private SfGrid Grid; public List Orders { get; set; } + private static readonly Random _random = new Random(); protected override void OnInitialized() { @@ -888,30 +579,30 @@ The `AddRecordAsync` method takes two parameters: private int GenerateOrderId() { - return new Random().Next(10000, 99999); // Random Order ID. + return _random.Next(10000, 99999); // Random Order ID. } private string GenerateCustomerId() { const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; - return new string(Enumerable.Repeat(chars, 5).Select(s => s[new Random().Next(s.Length)]).ToArray()); + return new string(Enumerable.Repeat(chars, 5).Select(s => s[_random.Next(s.Length)]).ToArray()); } private string GenerateShipCity() { string[] cities = { "London", "Paris", "New York", "Tokyo", "Berlin" }; - return cities[new Random().Next(cities.Length)]; + return cities[_random.Next(cities.Length)]; } private double GenerateFreight() { - return new Random().NextDouble() * 100; // Random Freight value. + return _random.NextDouble() * 100; // Random Freight value. } private string GenerateShipName() { string[] names = { "Que Delícia", "Bueno Foods", "Island Trading", "Laughing Bacchus Winecellars" }; - return names[new Random().Next(names.Length)]; + return names[_random.Next(names.Length)]; } } @@ -975,47 +666,67 @@ public class OrderData > To insert a new record at the beginning, pass 0 as the second parameter to `AddRecordAsync`. > If no index is specified, the new row is added at the end. -## How to get the row data and element +## Get row indexes -The Blazor DataGrid exposes methods to retrieve row data and elements for custom operations. +The Blazor Data Grid exposes methods to retrieve row indexes for custom operations. The row-index methods use zero-based indexes. -1. [GetRowIndexByPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_): Retrieves the row index based on a primary key value or row data. +1. [GetRowIndexByPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_): Retrieves a `Task` containing the row index for a primary key value or row data. The method returns `-1` when no matching row exists. ```cs -GetRowIndexByPrimaryKey - - ........ +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Get Row Index + + @code{ - SfGrid grid; + private SfGrid Grid; + private List Orders = new() { new OrderData { OrderID = 10250 } }; + private async Task GetDataHandler() { - var rowIndex = await Grid.GetRowIndexByPrimaryKeyAsync(10250); // pass primary key value here. + int rowIndex = await Grid.GetRowIndexByPrimaryKeyAsync(10250); + } + + private class OrderData + { + public int OrderID { get; set; } } } ``` -2. [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowIndexesAsync): Returns the collection of selected row indexes. +2. [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowIndexesAsync): Retrieves a `Task>` containing the collection of selected row indexes. ```cs -GetSelectedRowIndexes - - ........ +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Get Selected Row Indexes + + @code{ - SfGrid grid; - private async Task GetDataHandler() - { - var SelectedRowIndexes = await grid.GetSelectedRowIndexesAsync(); - } + private SfGrid Grid; + private List Orders = new() { new OrderData { OrderID = 10250 } }; + + private async Task GetDataHandler() + { + List selectedRowIndexes = await Grid.GetSelectedRowIndexesAsync(); + } + + private class OrderData + { + public int OrderID { get; set; } + } } ``` -## Master Detail DataGrid +## Master Detail Data Grid -The Blazor DataGrid can display related details in another Grid using a master-detail layout. Selecting a row in the master Grid loads related records in the detail Grid. +The Blazor Data Grid can display related details in another Data Grid using a master-detail layout. Selecting a row in the master Data Grid loads related records in the detail Data Grid. -Use the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event on the master Grid to obtain the selected record. Apply a filter through the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the detail Grid and bind the resulting collection to its [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource). +Use the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event on the master Data Grid to obtain the selected record. Apply a filter through the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the detail Data Grid and bind the resulting collection to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource). The `Query` property accepts a `Query` object with methods like `Where()` to apply filter conditions. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1064,31 +775,31 @@ Use the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr new EmployeeData() {EmployeeID = 1005, CustomerName="Roland Mendel", CompanyName="Ernst Handel", Address="Kirchgasse 6", Country="Austria"}, }; List Orders = new List { - new Order() {EmployeeID = 1001, OrderID=001, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, - new Order() {EmployeeID = 1001, OrderID=002, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, - new Order() {EmployeeID = 1001, OrderID=003, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, - new Order() {EmployeeID = 1001, OrderID=004, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, - new Order() {EmployeeID = 1001, OrderID=005, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, - new Order() {EmployeeID = 1002, OrderID=006, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, - new Order() {EmployeeID = 1002, OrderID=007, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, - new Order() {EmployeeID = 1002, OrderID=008, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, - new Order() {EmployeeID = 1002, OrderID=009, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, - new Order() {EmployeeID = 1002, OrderID=010, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, - new Order() {EmployeeID = 1003, OrderID=011, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, - new Order() {EmployeeID = 1003, OrderID=012, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, - new Order() {EmployeeID = 1003, OrderID=013, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, - new Order() {EmployeeID = 1003, OrderID=014, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, - new Order() {EmployeeID = 1003, OrderID=015, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, - new Order() {EmployeeID = 1004, OrderID=016, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, - new Order() {EmployeeID = 1004, OrderID=017, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, - new Order() {EmployeeID = 1004, OrderID=018, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, - new Order() {EmployeeID = 1004, OrderID=019, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, - new Order() {EmployeeID = 1004, OrderID=020, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, - new Order() {EmployeeID = 1005, OrderID=021, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, - new Order() {EmployeeID = 1005, OrderID=022, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, - new Order() {EmployeeID = 1005, OrderID=023, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, - new Order() {EmployeeID = 1005, OrderID=024, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, - new Order() {EmployeeID = 1005, OrderID=025, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, + new Order() {EmployeeID = 1001, OrderID=1, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, + new Order() {EmployeeID = 1001, OrderID=2, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, + new Order() {EmployeeID = 1001, OrderID=3, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, + new Order() {EmployeeID = 1001, OrderID=4, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, + new Order() {EmployeeID = 1001, OrderID=5, ShipName="Around the Horn", ShipCountry="UK", ShipAddress="Brook Farm Stratford St. Mary"}, + new Order() {EmployeeID = 1002, OrderID=6, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, + new Order() {EmployeeID = 1002, OrderID=7, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, + new Order() {EmployeeID = 1002, OrderID=8, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, + new Order() {EmployeeID = 1002, OrderID=9, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, + new Order() {EmployeeID = 1002, OrderID=10, ShipName="Berglunds snabbköp", ShipCountry="Sweden", ShipAddress="Berguvsvägen 8"}, + new Order() {EmployeeID = 1003, OrderID=11, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, + new Order() {EmployeeID = 1003, OrderID=12, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, + new Order() {EmployeeID = 1003, OrderID=13, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, + new Order() {EmployeeID = 1003, OrderID=14, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, + new Order() {EmployeeID = 1003, OrderID=15, ShipName="Blondel père et fils", ShipCountry="France", ShipAddress="24, place Kléber"}, + new Order() {EmployeeID = 1004, OrderID=16, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, + new Order() {EmployeeID = 1004, OrderID=17, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, + new Order() {EmployeeID = 1004, OrderID=18, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, + new Order() {EmployeeID = 1004, OrderID=19, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, + new Order() {EmployeeID = 1004, OrderID=20, ShipName="Chop-suey Chinese", ShipCountry="Switzerland", ShipAddress="Hauptstr. 31"}, + new Order() {EmployeeID = 1005, OrderID=21, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, + new Order() {EmployeeID = 1005, OrderID=22, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, + new Order() {EmployeeID = 1005, OrderID=23, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, + new Order() {EmployeeID = 1005, OrderID=24, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, + new Order() {EmployeeID = 1005, OrderID=25, ShipName="Ernst Handel", ShipCountry="Austria", ShipAddress="Kirchgasse 6"}, }; protected override void OnInitialized() @@ -1116,4 +827,10 @@ Use the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gr {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLRDwZRVNPHhdNx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLRDwZRVNPHhdNx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## See also + +* [Row template](https://blazor.syncfusion.com/documentation/datagrid/row-template) +* [Row drag and drop](https://blazor.syncfusion.com/documentation/datagrid/row-drag-and-drop) +* [Row selection](https://blazor.syncfusion.com/documentation/datagrid/row-selection) \ No newline at end of file