sfgrid programmatically set/read cell value

[Marco]

I need to set or read the cell values programmatically. (I have some code to convert 1: 1 ...)
"UpdateCell" does not work instead "SetCellValue" what am I wrong?
Among the methods I have implemented which is the most correct to use?

@page "/"

@using Syncfusion.Blazor.Grids
<button class="btn btn-primary" @onclick="UpdateCell">ByUpdateCell</button>
<button class="btn btn-primary" @onclick="SetCellValue">BySetCellValue</button>
<button class="btn btn-primary" @onclick="DataSourceSetValue">ByDataSource</button>
<button class="btn btn-primary" @onclick="CurrentViewDataSetValue">ByCurrentViewData</button>
<button class="btn btn-primary" @onclick="GetValueCell">GetValueCell</button>
<p>Current count: @cellValue</p>
<SfGrid @ref="@myGrid" DataSource="@Orders">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true"></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>
@code{
    public List<Order> Orders { get; set; }
    public SfGrid<Order> myGrid { get; set; }
    public string cellValue { get; set; }

    private void UpdateCell()
    {
        myGrid.UpdateCell(1, "CustomerID", "UpdateCell!");
    }

    private void SetCellValue()
    {
        myGrid.SetCellValue(1001, "CustomerID", "SetCellValue!");
    }

    private void DataSourceSetValue()
    {
        Orders.Where(x => x.OrderID == 1001).First().CustomerID = "DataSourceSetValue!";
        myGrid.Refresh();
    }
    private void CurrentViewDataSetValue()
    {
        ((Order)myGrid.CurrentViewData.Where(x => ((Order)x).OrderID == 1001).First()).CustomerID = "DataSourceSetValue!"; ;
        myGrid.Refresh();
    }

    private void GetValueCell()
    {
        cellValue = ((Order)myGrid.CurrentViewData.Where(x => ((Order)x).OrderID == 1001).First()).CustomerID ;
    }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 5).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; }
    }
}

Attachment: Index_2a5706ea.7z

[Renjith Singh Rajendran]

Hi Marco, 

Greetings from Syncfusion support. 

Query : Using UpdateCell method 

We would like to inform you that, the UpdateCell method will update the cell value in Grid cell’s UI only when using Batch mode of editing in Grid. So if you want to use UpdateCell, we suggest you to ensure to set EditMode as Batch for Grid. 

https://blazor.syncfusion.com/documentation/datagrid/editing/#batch 

https://blazor.syncfusion.com/demos/datagrid/batch-editing?theme=bootstrap4 

Note : UpdateCell will only do the changes in UI level. To update the value in DataSource, we suggest you to call the EndEdit method of Grid. 

Query : Using SetCellValue method 

Updating a value of a particular cell works fine when using SetCellValue method in Grid. We could not face any difficulties when using SetCellValue method to update the cell value in Grid. We have also prepared a sample with the shared razor file. Please download the sample from the link below, we have used Batch mode of editing in below sample. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample70890009 

 

Please refer the screenshot below,  

 

 

 

<button class="btn btn-primary" @onclick="BatchSaveMethod">Batch Save</button> 

 

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>private void BatchSaveMethod(){    myGrid.EndEdit();}

 

 

So based on your requirement/scenario we suggest you to use anyone of the above two Grid methods. You can also update values by other ways(i.e.) like modifying Grid data and calling Refresh method, but using Grid methods(SetCellValue, UpdateCell) is the recommended way to update a cell value in Grid.  

Please get back to us with your complete requirement details, if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Marco]

Thanks for the example, now everything is clear to me.

Best Regards.

[Renjith Singh Rajendran]

Hi Marco, 

Thanks for your update. 

We are glad to hear that the provided suggestion helped you in achieving this requirement.  

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Amish]

I am not using editmode = batch. We don't provide EditMode property.

How can I set value of that cell. I have already foun RowIndex.

[Prathap Senthil]

Hi Amish,

Based on your requirements, we suggest using the Grid public method  SetCellValueAsync to achieve your goal. Please refer to the code snippet below for your reference.

@using Syncfusion.Blazor.Grids

 

<button id="SetCellValue" @onclick="DataHandler">SetCellValue</button>

<SfGrid DataSource="@Orders" @ref="grid" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

 

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" 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>

 

@code {

 

    public List<Order> Orders { get; set; }

 

    protected override void OnInitialized()

    {

        Orders = GetAllRecords();

    }

    SfGrid<Order> grid;

    private async Task DataHandler()

    {

        await grid.SetCellValueAsync(1005, "CustomerID", "UpdatedCell");

    }

 

Reference:
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetCellValueAsync_System_Object_System_String_System_Object_

Regards,
Prathap S