Using dropdown on columns in grid

[junghwi]

hi.

To apply dropdown to the grid column, I entered the source code below, but the code value continues to appear.

When opening a pop-up for registration or modification, it is displayed normally through the applied dropdown (Image 1), but in the grid, it is displayed only as a code (image 2).

Is there anything wrong?

( Image 1)

(image 2)

(source code)

<GridColumn Field="@nameof(Gateway.gtw_nm)" TextAlign="TextAlign.Center" IsPrimaryKey="true" Width="150">

<HeaderTemplate>

<div class="headercenter">

데이터 이름

</div>

</HeaderTemplate>

</GridColumn>

<GridColumn HeaderText="경고기준" TextAlign="TextAlign.Center">

<GridColumns>

<GridColumn Field="@nameof(Gateway.gtw_wng_use_yn)" HeaderText="사용여부" DisplayAsCheckBox="true" TextAlign="TextAlign.Center" Width="45"></GridColumn>

<GridColumn Field="@nameof(Gateway.gtw_wng_operator)" HeaderText="연산자" TextAlign="TextAlign.Center" Width="80" EditType="EditType.DropDownEdit">

<EditTemplate>

<SfDropDownList Value="@((context as Gateway).gtw_wng_operator)" TValue="string"

TItem="frame_Code" DataSource="_Codes">

<DropDownListEvents TValue="string" TItem="frame_Code"></DropDownListEvents>

<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

<GridColumn Field="@nameof(Gateway.gtw_wng_value)" HeaderText="값" TextAlign="TextAlign.Center" Width="50"></GridColumn>

<GridColumn Field="@nameof(Gateway.gtw_wng_desc)" HeaderText="설명" TextAlign="TextAlign.Center" Width="100"></GridColumn>

</GridColumns>

</GridColumn>

[Prathap Senthil]

Hi junghwi,

Based on the reported problem, we would like to clarify that the Value in DropDownListFieldSettings returns the value bound to the grid. However, the text property in DropDownListFieldSettings is displayed when editing the dropdown list popup. This is the default behavior.

Reference: https://blazor.syncfusion.com/documentation/dropdown-list/value-binding#text-and-value

Regards,

Prathap S

[junghwi]

The problem now is that the dropdown in the pop-up is normally displayed as text. The problem is that the grid continues to be displayed as Value.

Image 1 above is normal, and Image 2 is abnormal.

I want the Text property to come out of the grid.

[Prathap Senthil]

Based on your query, the Value in DropDownListFieldSettings returns the value bound to the grid. So, before proceeding with the reporting of the problem, we require some additional clarification from your end. Please share the following details to proceed further on our end.

• To analyze the reported issue, could you please share a simple and reproducible sample with duplicate data that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
• Could you please share us the what the NuGet version you have used?.

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.

[junghwi]

As requested, I am uploading the necessary parts and partial data from the entire source.

(  NuGet version is 24.2.3 )

-------------------------

<SfGrid @ref="Grid_Detail" DataSource="@gate_Detail" AllowPaging="true" Height="100%" Width="100%" AllowSorting="false" AllowTextWrap="true" GridLines="GridLine.Vertical"

                    AllowFiltering="false" AllowGrouping="false" ShowColumnChooser="true" AllowReordering="true">

                <GridPageSettings PageSize="16"></GridPageSettings>

                <GridEvents OnActionBegin="Grid_Detail_Begin"

                            OnActionComplete="Grid_Detail_Complete"

                            TValue="Gateway"></GridEvents>

                <GridTextWrapSettings WrapMode="@WrapModeValue"></GridTextWrapSettings>

                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" NewRowPosition="NewRowPosition.Bottom" Mode="Syncfusion.Blazor.Grids.EditMode.Dialog" Dialog="DialogParams">

                    <HeaderTemplate>

                        @{

                            <span>info</span>

                        }

                    </HeaderTemplate>

                    <Template>

                        @{

                            var gateway = (context as Gateway);

                            <div>

                                <table>

                                    <tr style="text-align:center;vertical-align:middle;border:1px solid black;">

                                        <td style="text-align:center;" class="container"><label class="e-form-label">연산자</label></td>

                                        <td style="text-align:center;" class="container">

                                            <SfDropDownList Value="@(gateway.gtw_wng_operator)" TValue="string"

                                                                TItem="CommDDList" DataSource="@_Codes">

                                                            <DropDownListEvents TValue="string" TItem="CommDDList"></DropDownListEvents>

                                                            <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings>

                                            </SfDropDownList>

                                        </td>

                                    </tr>

                                </table>

                            </div>

                        }

                    </Template>

                    <FooterTemplate>

                        <SfButton OnClick="@sub_SaveClick">save</SfButton>

                        <SfButton OnClick="@sub_Cancel">cancel</SfButton>

                    </FooterTemplate>

                </GridEditSettings>

                <GridTextWrapSettings WrapMode="@WrapModeValue"></GridTextWrapSettings>

                <GridColumns>

                    <GridColumn HeaderText="경고기준" TextAlign="TextAlign.Center">

                        <GridColumns>

                            <GridColumn Field="@nameof(Gateway.gtw_wng_operator)" HeaderText="연산자" TextAlign="TextAlign.Center" Width="80" EditType="EditType.DropDownEdit">

                                <EditTemplate>

                                    <SfDropDownList Value="@((context as Gateway).gtw_wng_operator)" TValue="string"

                                                    TItem="CommDDList" DataSource="@_Codes">

                                        <DropDownListEvents TValue="string" TItem="CommDDList"></DropDownListEvents>

                                        <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings>

                                    </SfDropDownList>

                                </EditTemplate>                                    

                            </GridColumn>

                        </GridColumns>

                    </GridColumn>

                </GridColumns>

</SfGrid>

@code {

    public List<Gateway>? gate_Detail { get; set; }

    List<CommDDList> _Codes = new List<CommDDList>

    {

        new CommDDList() { Code = "LESSTHAN", Name = "< (적다)"},

        new CommDDList() { Code = "GREATERTHAN", Name = "> (크다)"},

        new CommDDList() { Code = "LESSTHANOREQUAL", Name = "<= (적거나 같다)"},

        new CommDDList() { Code = "GREATERTHANOREQUAL", Name = ">= (크거나 같다)"}

    };

    List<Gateway> gate_Detail = new List<Gateway>

    {

        new Gateway() { gtw_wng_operator = "LESSTHAN"},

        new Gateway() { gtw_wng_operator = null},

    }

[Prathap Senthil]

Hi Junghwi,

Upon preparing a sample based on your shared code snippet, the code values were bound to the grid, and the name values were displayed while editing the dropdown grid column. As we mentioned earlier, the Value property in DropDownListFieldSettings returns the value bound to the grid. However, the Text property in DropDownListFieldSettings is displayed when editing the dropdown list popup. This is the default behavior of the component.

Kindly refer the attached sample for your reference.

Sample: https://blazorplayground.syncfusion.com/rjBpZIXBpgQMKZxw

If you have any further queries or still issue persists, we request you to share an entire runnable sample to us or reproduce a reported issue in the provided sample. It’ll be more helpful to further validate your query and provided precise  solution ASAP from our end.

Regards,
Prathap S

[junghwi]

I enjoyed the sample for reference.

However, what I want is for the name value to appear in the grid list as well as the editing status.

[Prathap Senthil]

Based on your requirement, we suggest that the DropDownListFieldSettings Value property also be set to the Name because, based on the Value in DropDownListFieldSettings, it returns the value bound to the grid . Please refer to the modified code snippet and sample provided below for your reference.

      <EditTemplate>

          <SfDropDownList Placeholder="@((context as Order).gtw_wng_operator)" ID="gtw_wng_operator" TItem="CommDDList" TValue="string" @bind-Value="@((context as Order).gtw_wng_operator)" DataSource="@_Codes">

              <DropDownListFieldSettings Value="Name" Text="Name"></DropDownListFieldSettings>

          </SfDropDownList>

      </EditTemplate>

  </GridColumn>

Sample:

https://blazorplayground.syncfusion.com/embed/LXVTZytlsycmgFUO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5