1. Home
  2. Forum
  3. Blazor
  4. How to display the value on other Column cell on dropdown change event on Grid

How to display the value on other Column cell on dropdown change event on Grid



Hi All,

I am trying to update the Reason Column Cell on basis S column dropdown change event. I tried to do like given below code snippet but text is not reflecting there

could you please give me exact syntax for that ?


<SfGrid DataSource="@inspectGrid" @ref="Grid"
        GridLines="GridLine.Both"
        Toolbar="@(new List<string>() {"Update", "Cancel"})">

    <GridEvents OnBatchSave="BatchSaveHandler" CellSelected="CellSelectHandler" OnActionBegin="OnActionBegin" 
                QueryCellInfo="QueryCellInfoHandler"
                TValue="Inspection" />

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

    <GridColumns>
        <GridColumn Field=@nameof(Inspection.PriInspectionId) IsPrimaryKey="true" AutoFit="true" />
        <GridColumn Field=@nameof(Inspection.Icolumn1) AutoFit="true" />
        <GridColumn Field=@nameof(Inspection.Icolumn2) AutoFit="true" />
        <GridColumn Field=@nameof(Inspection.Icolumn3) AutoFit="true" />
        <GridColumn Field=@nameof(Inspection.Icolumn4) Width="80">
            <Template>
                @{
                    var rec = (context as Inspection);
                    if (rec.RecType.Trim() == "HEAD")
                    {
                        <p>@rec.Icolumn4</p>
                    }
                    else
                    {
                        if (@rec.Icolumn4 =="Y")
                        {
                            <SfCheckBox Checked="true"></SfCheckBox>
                        }
                        else
                        {
                            <SfCheckBox Checked="false"></SfCheckBox>
                        }

                    }
                }

            </Template>
        </GridColumn>
        <GridColumn Field=@nameof(Inspection.Icolumn5) EditType="EditType.DropDownEdit" Width="100">
            <EditTemplate>
                <SfDropDownList ID="ddlCol5" Placeholder="Select"
                                @bind-Value="@((context as Inspection).Icolumn5)"
                                TItem="Col5Data" TValue="string" DataSource="@Col5DataList">
                    <DropDownListEvents TValue="string" TItem="Col5Data" ValueChange="OnValueChangeforCol5" />
                    <DropDownListFieldSettings Text="Id" Value="Id" />
                </SfDropDownList>
            </EditTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Inspection.Icolumn6) EditType="EditType.DropDownEdit" Width="100">
            <EditTemplate>
                <SfDropDownList ID="ddlCol6" Placeholder="Select"
                                @bind-Value="@((context as Inspection).Icolumn6)"
                                TItem="Col6Data" TValue="string" DataSource="@col6DataList">
                    <DropDownListEvents TValue="string" TItem="Col6Data" ValueChange="OnValueChangeForCol6" />
                    <DropDownListFieldSettings Text="Name" Value="Name" />
                </SfDropDownList>
            </EditTemplate>
        </GridColumn>

        <GridColumn Field=@nameof(Inspection.Icolumn7) EditType="EditType.DefaultEdit" AutoFit="true">
            <EditTemplate>
                <p>@ddlSelectedValue</p>
            </EditTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Inspection.Icolumn8) AutoFit="true" />
        <GridColumn Field=@nameof(Inspection.OrderNo) Visible="false" AutoFit="true" />
        <GridColumn Field=@nameof(Inspection.RecType) Visible="false" />
        <GridColumn Field=@nameof(Inspection.MediaFileUrl) AutoFit="true" />
    </GridColumns>
</SfGrid>
-------------------------------------------------------------

private void OnValueChangeforCol5(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Col5Data> args)
    {
        if (args.ItemData.Name!=null)
        {
            ddlSelectedValue = args.ItemData.Name;
        }
    }
    private void OnValueChangeForCol6(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Col6Data> args)
    {
        if (args.ItemData.Desc!=null)
        {
            ddlSelectedValue = args.ItemData.Desc;
            // objins.Icolumn7 = args.ItemData.Desc.ToString();
        }
    }




5 Replies
RN Rahul Narayanasamy Syncfusion Team December 7, 2020 03:32 PM UTC

Hi Chandradev, 

Greetings from Syncfusion. 

Query: How to display the value on other Column cell on dropdown change event on Grid 

We have validated your query and you want to update the value of one column based on the value of another column. Here, we have prepared a sample based on your requirement. We have updated the ShipCountry value based on the changed value of Quantity column(Dropdown). Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents OnCellSave="CellSavedHandler" OnCellEdit="CellEditHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
        <GridColumn Field=@nameof(Order.Quantity) HeaderText="Quantity" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Right" Width="120"> 
            <EditTemplate> 
                <SfDropDownList @ref="Dropdown" ID="Quantity" TValue="int?" TItem="Games" @bind-Value="@((context as Order).Quantity)" Placeholder="Select Quantity" DataSource="@LocalData"> 
                    <DropDownListFieldSettings Value="ID" Text="ID"></DropDownListFieldSettings> 
                    <DropDownListEvents Created="Created" TValue="int?" TItem="Games" ValueChange="OnValueChangeForCol6" /> 
                </SfDropDownList> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    SfDropDownList<int?, Games> Dropdown; 
 
    . . . 
 
    public double IndexValue { get; set; } 
    public void CellSavedHandler(CellSaveArgs<Order> args) 
    { 
        if (args.ColumnName == "Quantity") 
        { 
            args.Value = Dropdown.Value; 
        } 
    } 
 
    public void Created() 
    { 
        Grid.PreventRender(false); 
    } 
 
    public async Task CellEditHandler(CellEditArgs<Order> args) 
    {  
        IndexValue = await Grid.GetRowIndexByPrimaryKey(args.RowData.OrderID);  //get Index value  
    } 
 
    private async Task OnValueChangeForCol6(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Games> args) 
    { 
        var Value = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]; 
        await Grid.UpdateCell(IndexValue, "ShipCountry", Value);   //updated ShipCountry value in dropdown change 
    } 
} 


Reference: 

Please let us know if you have any concerns. 

Regards, 
Rahul 


CH chandradev December 8, 2020 05:47 PM UTC

Hi Rahul,

Thanks for sending the exact working code. Can we use in same functionalities with SfComboBox ?

RN Rahul Narayanasamy Syncfusion Team December 9, 2020 01:15 PM UTC

Hi Chandradev, 

Thanks for the update. 

Query: Thanks for sending the exact working code. Can we use in same functionalities with SfComboBox ? 

We have validated your query and based on your requirement we have prepared a sample using SfComboBox. Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents OnCellSave="CellSavedHandler" OnCellEdit="CellEditHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
            <EditTemplate> 
                <SfComboBox @ref="ComboBox" ID="Quantity" TValue="int?" TItem="Games" @bind-Value="@((context as Order).Quantity)" DataSource="@LocalData"> 
                    <ComboBoxFieldSettings Value="ID" Text="ID"></ComboBoxFieldSettings> 
                    <ComboBoxEvents Created="Created" TValue="int?" TItem="Games" ValueChange="OnValueChangeForCol6"></ComboBoxEvents> 
                </SfComboBox> 
            </EditTemplate> 
        </GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    SfDropDownList<int?, Games> Dropdown; 
    SfDropDownList<int?, Games> ComboBox; 
    public List<Order> Orders { get; set; } 
 
    . . .  
 
    public double IndexValue { get; set; } 
    public void CellSavedHandler(CellSaveArgs<Order> args) 
    { 
        if (args.ColumnName == "Quantity") 
        { 
            args.Value = ComboBox.Value; 
        } 
    } 
 
    public void Created() 
    { 
        Grid.PreventRender(false); 
    } 
 
    public async Task CellEditHandler(CellEditArgs<Order> args) 
    { 
        IndexValue = await Grid.GetRowIndexByPrimaryKey(args.RowData.OrderID); 
    } 
 
    private async Task OnValueChangeForCol6(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Games> args) 
    { 
        var Value = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]; 
        await Grid.UpdateCell(IndexValue, "ShipCountry", Value); 
    } 
} 
 


Please let us know if you have any concerns. 

Regards, 
Rahul 


CH chandradev December 9, 2020 05:24 PM UTC

Hi Rahul,

Thanks for sharing the exact working code. I have one more question,  is there event on combobox ? Whenever I click on remove button, it should also remove from ship country column.


RN Rahul Narayanasamy Syncfusion Team December 10, 2020 12:52 PM UTC

Hi Chandradev, 

Thanks for the update. 

Query: Thanks for sharing the exact working code. I have one more question,  is there event on combobox ? Whenever I click on remove button, it should also remove from ship country column.  

We have validated your query and you can resolve the reported problem by adding  below condition in ValueChange event of SfComboBox. Find the below code snippets and sample for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents OnCellSave="CellSavedHandler" OnCellEdit="CellEditHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
        <GridColumn Field=@nameof(Order.Quantity) HeaderText="Quantity" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Right" Width="120"> 
            <EditTemplate> 
                <SfComboBox @ref="ComboBox" ID="Quantity" TValue="int?" TItem="Games" @bind-Value="@((context as Order).Quantity)" DataSource="@LocalData"> 
                    <ComboBoxFieldSettings Value="ID" Text="ID"></ComboBoxFieldSettings> 
                    <ComboBoxEvents Created="Created" TValue="int?" TItem="Games" ValueChange="OnValueChangeForCol6"></ComboBoxEvents> 
                </SfComboBox> 
            </EditTemplate> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    . . . 
    public List<Order> Orders { get; set; } 
 
    . . . 
 
    private async Task OnValueChangeForCol6(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Games> args) 
    { 
        var Value = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]; 
        if(args.Value != null)   // you can resolve by adding this condition 
        { 
            await Grid.UpdateCell(IndexValue, "ShipCountry", Value); 
        } 
    } 
} 


Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon