|
1 | 1 | --- |
2 | 2 | layout: post |
3 | | -title: Send context as parameters from events in Blazor DataGrid | Syncfusion |
4 | | -description: Checkout the documentation for sending context as additional parameters from events in Blazor DataGrid in Visual Side using .NET CLI and much more. |
| 3 | +title: Send Context as Parameters in Blazor DataGrid | Syncfusion |
| 4 | +description: Learn how to Pass current row context from Blazor DataGrid events using edit templates to update bound fields instantly. |
5 | 5 | platform: Blazor |
6 | 6 | control: DataGrid |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | | -# Sending context as additional parameters in Blazor DataGrid events |
| 10 | +# Sending Context as additional Parameters in Blazor DataGrid Events |
11 | 11 |
|
12 | | -The Syncfusion<sup style="font-size:70%">®</sup> Blazor DataGrid offers flexibility to pass additional context information during events. This capability is especially useful for dynamically updating Grid data based on interactions with other components, enabling seamless, real-time data modifications within the Grid. |
| 12 | +The Syncfusion<sup style="font-size:70%">®</sup> Blazor DataGrid supports passing the current row context to event handlers. This approach is useful for updating Grid fields based on interactions inside the edit dialog, enabling immediate, in-place updates to the bound data. |
13 | 13 |
|
14 | 14 | To implement this, follow these steps: |
15 | 15 |
|
16 | 16 | 1. Place the [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) inside the Grid's `GridEditSettings.Template` to customize the edit form. |
17 | 17 |
|
18 | 18 | 2. Bind the ComboBox’s `ValueChange` event to a handler method. |
19 | 19 |
|
20 | | - 3. The method receives two parameters: |
| 20 | + 3. The handler receives: |
| 21 | + * args: Event arguments that include the new ComboBox value and the selected item. |
| 22 | + * context: The template context cast to the row type (Order) and stored in a local variable (order). |
21 | 23 |
|
22 | | - * **args**: The event arguments containing the new `ComboBox` value and selected item. |
23 | | - |
24 | | - * **Context**: The current row data is referenced by the variable **Order**, which is cast from the template’s context object as **Order**. |
25 | | - |
26 | | - 4. Within the event handler, you can update properties of the current row, such as **ShipCity**, **ShipCountry** based on the selected `ComboBox` value. The Grid is directly bound to the data object, so changes made to this object are immediately reflected in the Grid UI. |
27 | | - |
28 | | -The following example demonstrates this approach: |
| 24 | + 4. Inside the handler, update properties of the current row (for example, ShipCity and ShipCountry) based on the selected ComboBox value. Because the Grid is bound to the same data object instance, changes are reflected immediately in the Grid UI. |
29 | 25 |
|
30 | 26 | {% tabs %} |
31 | 27 | {% highlight razor tabtitle="Index.razor" %} |
@@ -154,4 +150,4 @@ Height="600" @ref="Grid"> |
154 | 150 | {% endhighlight %} |
155 | 151 | {% endtabs %} |
156 | 152 |
|
157 | | -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVoXHDepIVbDBhd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} |
| 153 | +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhIXYrfAswqgaHD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} |
0 commit comments