How to update another column in the grid based on a value of another column

[chris johansson]

If I have a datagrid that has a multicolumn combo box. I can search by both Item Number and Name and it will change the value. But I also want to change the name in column beside it to update that. This is for display purposes for the user. They cannot edit this but I need this column to change based on the combo box of Item id. I tried to use ValueChange and pass in that current item and change the value. The issue is when the event ends, it only updates the grid for itemID and it doesn't automatically update the name column. Is there a way to force it to refresh to show the updated value?

 

ValueChange="@((args) => onValueChangeItemID(args, currItem))"

public async void onValueChangeItemID(ChangeEventArgs args, Object value)

{

value.NameAlias = "test";

}

[Jeevakanth Palaniappan]

Hi Chris, 

Greetings from syncfusion support. 

We have validated your query and found that you need to update a column based on the edited values of another column. We suggest you to use the below documentation link for your reference in which we have modified the Shipstate dropdown data source based on the values in the Shipcountry column. 

Documentation link - https://blazor.syncfusion.com/documentation/datagrid/how-to/cascading-dropdownlist-with-grid-editing/#cascading-dropdownlist-with-datagrid-editing  

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP. 

[chris johansson]

I seen that article and i'm basically doing that, but that doesn't help me.  I'm not doing and creating new items in a drop down list.

I'm editing a single value for that specific row in the grid and want that to populate and show right away once i click off the drop down but it doesn't refresh the grid right away. if i make it not readonly and click inside that cell, the value does change to what i set it. i'm just wondering what can force to refresh whats displayed on the grid after i change a value behind the scenes.

This only happens if i double click into the read only column then it appears.

[Jeevakanth Palaniappan]

Hi Chris, 

We have validated your query and found that you want to change the Name column values on clicking the items the of ItemId dropdown. You can achieve your requirement by invoking the UpdateCell method of grid in the dropdown ValueChange event. Please refer the below code snippet and the sample for your reference. 

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

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

    <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler" TValue="Order"></GridEvents> 

 

.. 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"> 

            <EditTemplate> 

                <SfDropDownList ID="CustomerID"  TValue="string" TItem="Order" @bind-Value="@((context as Order).CustomerID)" DataSource="@Orders"> 

                    <DropDownListEvents ValueChange="DropDownOnChange" TValue="string"></DropDownListEvents> 

                    <DropDownListFieldSettings Value="CustomerID"></DropDownListFieldSettings> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

 

.. 

</SfGrid> 

 

@code{ 

    private double RowIndex { get; set; } 

 

    public async Task DropDownOnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 

    { 

        await Grid.UpdateCell(RowIndex, "Freight", 2.1); 

        await Grid.UpdateCell(RowIndex, "CustomerID", args.Value); 

    } 

    public void RecordDoubleClickHandler(RecordDoubleClickEventArgs<Order> args) 

    { 

        RowIndex = args.RowIndex; 

    } 

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorLatestVersion-609169565  

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP. 

[Brahim]

Good Day,

I have a similar problem but I'm using the normal edit mode the batch editmode don't help me

I tried this code without success:

<SfGrid @ref="LignesGrid" DataSource="@ListeLignes"

        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">

    <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler"  OnActionBegin="ActionBeginHandler" OnActionComplete="ActionCompleteHandler" TValue="LigneModel"></GridEvents>

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

        

    </GridEditSettings>

    <GridColumns>

        <GridColumn Field="@nameof(LigneModel.Id)" IsPrimaryKey="true" Visible="false"/>

            

        <GridColumn Field="@nameof(LigneModel.RefArticle)" Width="120">

            <EditTemplate>

                <SfAutoComplete   TItem="ArticleModel" TValue="string"  @bind-Value="@((context as LigneModel).RefArticle)" DataSource="ListeArticles">

                    <AutoCompleteFieldSettings  Value="RefArticle"></AutoCompleteFieldSettings>

                    <AutoCompleteEvents TValue="string" TItem="ArticleModel" ValueChange="HandleRefArticleChanged"></AutoCompleteEvents>

                </SfAutoComplete>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="@nameof(LigneModel.Designation)" Width="120">

            <EditTemplate>

                <SfAutoComplete TItem="ArticleModel" TValue="string" @bind-Value="@((context as LigneModel).Designation)" DataSource="ListeArticles">

                    <AutoCompleteFieldSettings Value="Designation_fr"></AutoCompleteFieldSettings>

                    <AutoCompleteEvents TValue="string" TItem="ArticleModel" ValueChange="HandleRefArticleChanged"></AutoCompleteEvents>

                </SfAutoComplete>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="@nameof(LigneModel.Qte)" Width="120">

            <EditTemplate>

                <SfNumericTextBox @ref="QteCell" @bind-Value="@((context as LigneModel).Qte)" TValue="double?">

                    <NumericTextBoxEvents TValue="double?"  ValueChange="HandleQteChanged"></NumericTextBoxEvents>

                </SfNumericTextBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="@nameof(LigneModel.Prix_Unitaire)" Width="120">

            <EditTemplate>

                <SfNumericTextBox  @bind-Value="@((context as LigneModel).Prix_Unitaire)" TValue="decimal?">

                    <NumericTextBoxEvents TValue="decimal?" ValueChange="HandlePrixChanged"></NumericTextBoxEvents>

                </SfNumericTextBox>

            </EditTemplate>

        </GridColumn>

        

        <GridColumn  Field="@nameof(LigneModel.Montant)" Width="120" >

           

        </GridColumn>

    </GridColumns>

</SfGrid>

[Brahim]

private double RowIndex { get; set; }

    public async Task HandleRefArticleChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ArticleModel> args)

    {

        try

        {

            await LignesGrid.UpdateCell(RowIndex, "Designation", args.ItemData.Designation_fr);

            await LignesGrid.UpdateCell(RowIndex, "Qte", 1);

            await LignesGrid.UpdateCellAsync(RowIndex, "Prix_Unitaire", args.ItemData.Prix_Unitaire);

            await QteCell.FocusIn();

            

            //LignesGrid.Refresh();

        }

        catch

        {

        }

    }

[Brahim]

public void ActionBeginHandler(ActionEventArgs<LigneModel> Args)

    {

        if (Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add) ||

            Args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit))

        {

            RowIndex = Args.RowIndex;

        }

[Jeevakanth Palaniappan]

Hi Brahim, 

Greetings from Syncfusion support. 

We have validated your query and on analyzing your code snippet, you have used the UpdateCell method but this method is only or the Batch edit mode. So we suggest you to achieve your scenario by changing the values in the edittemplate context. 

        <GridColumn Field="@nameof(LigneModel.RefArticle)" Width="120"> 

            <EditTemplate> 

                <SfAutoComplete TItem="ArticleModel" TValue="string" @bind-Value="@((context as LigneModel).RefArticle)" DataSource="ListeArticles"> 

                    <AutoCompleteFieldSettings Value="RefArticle"></AutoCompleteFieldSettings> 

                    <AutoCompleteEvents TValue="string" TItem="ArticleModel" ValueChange=@(()=>HandleRefArticleChanged((context as LigneModel)))></AutoCompleteEvents> 

                </SfAutoComplete> 

            </EditTemplate> 

        </GridColumn> 

 

    public void HandleRefArticleChanged(LigneModel context) 

    { 

//Set your values in the context 

        context.Designation = "DesignationChanged"; 

    } 

Also we have prevented the unwanted re-rendering of the component to improve the performance. So to achieve your scenario to re-render the form after changing the value, you have to set PreventRender as false in the OnActionComplete event of the grid. Please refer the below code snippet and the documentation and sample for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders-after-grid-events 

https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#notes 

https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance 

https://blazor.syncfusion.com/documentation/datagrid/how-to/cascading-dropdownlist-with-grid-editing 

    <GridEvents OnActionComplete="OnActionComplete" TValue="Layer"></GridEvents> 

 

.. 

 

    public void OnActionComplete(ActionEventArgs<Layer> args) 

    { 

        if (args.RequestType.Equals(Action.Add) || args.RequestType.Equals(Action.BeginEdit)) 

        { 

            //based on Add or Edit action disable the PreventRender 

            args.PreventRender = false; 

        } 

    } 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1313060714 

Regards, 

Jeevakanth SP. 

[Brahim]

Hi Palaniappan,

Thank's for your answer it's very helpful but I still need the args parameter for the event HandleRefArticleChanged

to pass the change values of the autocomplete

public async Task HandleRefArticleChanged(LigneModel context,

                                        Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ArticleModel> args

                                        )

    {

        //Set your values in the context 

        context.Designation = args.ItemData.Designation_fr;

        context.RefArticle = args.ItemData.RefArticle;

        context.Qte = 1;

        context.Prix_Unitaire = await data.GetPrixArticleByTarif(args.ItemData.Id, (int)Entete.TarifId);

        context.Montant = context.Prix_Unitaire;

        await QteCell.FocusIn();

    }

so how can I pass the second parameter in the : 

ValueChange="@(()=>HandleRefArticleChanged((context as LigneModel),????)"

your help will be welcom

thank's 

Best regards

[Brahim]

got it it's: 

ValueChange="@((args)=>HandleQteChanged((context as LigneModel),args))

Please Don't answer question

Thank's a lot 

Good support

regards

[Jeevakanth Palaniappan]

Hi Brahim, 

We are glad that you have resolved the problem on your own. Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.