How to bind values for cells on the top 1 row
question:
When I add a new row in "Mode="EditMode.Normal"". Let's say when I add a value to the "CustomerName" column, it calls the service to get the value for the "freight" column. So how do I bind and display the value I just received for the "freight" column on the same line, after I out focus cell of the CustomerName column.
code:
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<Order> Orders { get; set; }
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),
ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
public string ShipCountry { get; set; }
}
}
Hi
Duong Quoc,
Greetings from Syncfusion ,
Based on your requirement, we suggest using the Edit Template feature as shown
below to achieve your goal. Once you focus out of the customer ID column, the
freight column value will be updated accordingly. Kindly refer to the code
snippet and sample provided below for your reference.
|
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Cancel", "Update" })" Height="315">
<GridEditSettings AllowAdding="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Normal"></GridEditSettings> <GridEvents RowUpdating="RowUpdatingHandler" TValue="Order"></GridEvents> <GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules{ Required=true})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules{ Required=true})" Width="120"> <EditTemplate> @{ var Order = (context as Order);
<SfTextBox @bind-Value="@Order.CustomerID" @onfocusout='@(e => KeyPressed(e))'></SfTextBox>
} </EditTemplate> </GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="Syncfusion.Blazor.Grids.EditType.DatePickerEdit" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="130" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"> <EditTemplate> @{
<SfNumericTextBox ID="Freight" TValue="double?" Value="@Value"></SfNumericTextBox> } </EditTemplate> </GridColumn>
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="Syncfusion.Blazor.Grids.EditType.DropDownEdit" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<Order> Orders { get; set; }
SfGrid<Order> Grid { get; set; }
public double Value { get; set; } public void KeyPressed(Microsoft.AspNetCore.Components.Web.FocusEventArgs args ) { Value = 0; Grid.PreventRender(false); Value = 2.2; //here you can pass the value accroding to your need.
}
public void RowUpdatingHandler(Syncfusion.Blazor.Grids.RowUpdatingEventArgs<Order> args) {
args.Data.Freight = Value;
}
} |
Reference:
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PreventRender_System_Boolean_
https://blazor.syncfusion.com/documentation/datagrid/events#rowupdating
https://blazor.syncfusion.com/documentation/datagrid/in-line-editing
Regards,
Prathap Senthil
Hi, I have another question I want to ask you :
When I'm "Edit" or "Add" I want to disable the lines that aren't left. And after I finished doing it, it was back to normal
Query: When I'm
"Edit" or "Add" I want to disable the lines that aren't
left. And after I finished doing it, it was back to normal”
Before proceeding with your requirement, we require some additional
clarification from your end. Please share the following details to proceed
further on our end:
- When editing or adding row, you want to disable rows that are not currently in use. Once you have completed editing or adding entries, you want these rows to return to their normal state?
- Could you please provide more details about your requirements?
The details requested above will be very helpful in validating the reported query on our end and providing a solution as soon as possible. Thanks for your understanding.
- 3 Replies
- 2 Participants
-
DQ Duong Quoc
- Jul 1, 2024 03:46 AM UTC
- Jul 5, 2024 01:35 PM UTC
