1. Home
  2. Forum
  3. Blazor
  4. Grid Combobox

Grid Combobox

Hi,

I want to send the information to the server after the user enters the information (insert, edit, delete). How to set @bind-Value in this example.



@code{

 public int _itemValue = 1;

    public clsParent dto = new clsParent() { Id = 1, Name = "Parent1",lstItems= new List<clsItems>() { new clsItems() { Id = 1, ItemName = "Item1" ,Value=11}, new clsItems() { Id = 3, ItemName = "Item3",Value=33 } } };


    public List<clsItems> lstComboSource = new List<clsItems>() { new clsItems() { Id = 1, ItemName = "Item1" }, new clsItems() { Id = 1, ItemName = "Item2" }, new clsItems() { Id = 1, ItemName = "Item3" }, new clsItems() { Id = 1, ItemName = "Item1" } };


    public class clsParent

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public List<clsItems> lstItems { get; set; }


    }


    public class clsItems{

        public int Id { get; set; }

        public string ItemName { get; set; }

        public int Value { get; set; }

    }

    private async Task SubmitForm()

    {

        //Sending dto to the server

    }

}


<SfGrid TValue="clsItems" ID="Grid2" DataSource="@dto.lstItems" Toolbar="@(new List<string>() { "Add"})">

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal" NewRowPosition="NewRowPosition.Bottom" ShowDeleteConfirmDialog="true"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(clsItems.Id) HeaderText="Code" Visible="false"></GridColumn>



        <GridColumn Field=@nameof(clsItems.ItemName) HeaderText="Item Name" Width="150" IsPrimaryKey="true" EditType="EditType.DropDownEdit">

            <EditTemplate>

                <SfComboBox @bind-Value="_itemValue" ID="ItemId" Placeholder="select an item" AllowCustom="true" TItem="clsItems" TValue="int" DataSource="@lstComboSource">

                     <ComboBoxFieldSettings Text="@nameof(clsItems.ItemName)" Value="@nameof(clsItems.Id)"/>

                </SfComboBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(clsItems.Value) HeaderText="Value"></GridColumn>




        <GridColumn HeaderText="" Width="150">

            <GridCommandColumns>

                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>

                <GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-update", CssClass = "e-flat" })"></GridCommandColumn>

                <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn>

            </GridCommandColumns>

        </GridColumn>

    </GridColumns>

</SfGrid>


<EditForm Model="dto" OnValidSubmit="SubmitForm">


</EditForm>


11 Replies
KG Keerthana Ganesan Syncfusion Team October 7, 2022 03:55 PM UTC

Hi Sarah,

Query: Grid ComboBox

We have analyzed your query and we suggest you use the @bind-Value property of SfComboBox. We have discussed this similar topic in our UG documentation. Kindly refer to the attached documentation for your reference.

Reference link: https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#using-combobox-in-edittemplate

Kindly get back to us if you have any further queries.

Regards,

Keerthana.


SA Sarah October 8, 2022 04:13 PM UTC

Hi  Keerthana Ganesan,


I have seen what you said in the past. I have attached the relevant file. There are two problems:

1- In the combo box, Name is displayed correctly and after saving the code, it is displayed that I want Name to be displayed.


2-Please remove lines 10, 17, and 70 from comment mode. The problem is that I want to have an EditForm to get dto.Name from the user and I have set DataAnnotation for this property. If the data entered was incorrect, the corresponding error should be displayed to the user using DataAnnotation. And finally, when ButtonDialogSave() is executed, send dto.Name and dto.lstItems to the server.


thank you


Attachment: Index2_41100b85.rar

KG Keerthana Ganesan Syncfusion Team October 10, 2022 05:36 PM UTC

Hi Sarah,


The reported issue was reproduced at our end. Currently, we are validating your sample. Further details will be updated on or before 13th October 2022.

Until then we appreciate your patience.

Regards,

Keerthana.


KG Keerthana Ganesan Syncfusion Team October 14, 2022 04:39 AM UTC

Hi Sarah,


Sorry for the inconvenience caused 

Currently, we are validating your sample. Further details will be updated on or before 18th October 2022.

Until then we appreciate your patience.

Regards,

Keerthana.


SA Sarah October 18, 2022 05:18 AM UTC

Hi,

In addition to the previous two questions that have not yet been answered, please consider the following two questions


3- Is it possible to cancel the save operation in line 1?

4- I put ShowDeleteConfirmDialog =true . How can I find out if the user has approved this dialog or not, and if the user approves, I can delete it.

public void CommandClickHandler(CommandClickEventArgs args)

{

if (args.CommandColumn.ButtonOption.Content == "Save")

{

// if(...)

//{

Line1: // Is it possible to cancel the save operation here?

//}

}


if (args.CommandColumn.ButtonOption.Content == "Delete")

{

//This event happens as soon as the user hits the delete key. But it does not happen when the user confirms the dialog.

}

}


Attachment: Index3_900873e1.rar


KG Keerthana Ganesan Syncfusion Team October 19, 2022 03:40 AM UTC

Hi Sarah,


Thanks for the update.


Currently, we are validating your latest updated query. Further details will be updated on or before 21 Oct 2022,

Until then we appreciate your patience.

Regards,

Keerthana.


KG Keerthana Ganesan Syncfusion Team October 22, 2022 05:32 AM UTC

Hi Sarah,

Sorry for the inconvenience caused.

We have analyzed your query and we suspect that reported issue occurred because for passing same Id value to all the record in the DataSource. We suggest you use to assign a unique Id value to the record to overcome the reported issue. Kindly refer to the attached code snippet for your reference.


  public List<clsItems> lstComboSource = new List<clsItems>() { new clsItems() { Id = 1, ItemName = "Item1" }, new clsItems() { Id = 2, ItemName = "Item2" }, new clsItems() { Id = 3, ItemName = "Item3" }};


You can use the EditTemplate of the GridColumn component to add the custom component. you can access the parameters passed to templates using implicit parameters named context. Kindly refer to the attached document link for your reference.

Reference link: https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#custom-editors-using-templatecell-edit-template

<EditTemplate>

 

                            <SfComboBox @bind-Value="@((context as clsItems).Id)" ID="Id" Placeholder="select an item" AllowCustom="true" TItem="clsItems" TValue="int" DataSource="@lstComboSource">

 

                                <ComboBoxFieldSettings Text="@nameof(clsItems.ItemName)" Value="@nameof(clsItems.Id)" />

 

                            </SfComboBox>

 

                        </EditTemplate>


Kindly get back to us if you have any further queries.

Regards,

Keerthana.


SA Sarah October 24, 2022 12:41 PM UTC

Hi Keerthana Ganesan, 


I applied the changes you said, but the output did not change. I asked four questions and provided the source code for the questions. Please check.


Thank you


SA Sarah October 24, 2022 12:44 PM UTC

Hi Keerthana Ganesan ,


I applied the changes you said, but the output did not change. I have provided the source code for the four questions asked. Please check.


Thank you


KG Keerthana Ganesan Syncfusion Team October 27, 2022 03:10 AM UTC

Hi Sarah,

Welcome from Syncfusion support.

Query: In the combo box, the Name is displayed correctly and after saving the code, it is displayed that I want the Name to be displayed.

We have analyzed your query and we can be able to achieve your requirement by passing the same Id value to all the records in the DataSource. We suggest you use to assign a unique Id value to the record to overcome the reported issue. Kindly refer to the attached code snippet for your reference.


  public List<clsItems> lstComboSource = new List<clsItems>() { new clsItems() { Id = 1, ItemName = "Item1" }, new clsItems() { Id = 2, ItemName = "Item2" }, new clsItems() { Id = 3, ItemName = "Item3" }};


The EditTemplate of the GridColumn component to add the custom component. you can access the parameters passed to templates using implicit parameters named context. Kindly refer to the attached document link for your reference.

Reference link: https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#custom-editors-using-templatecell-edit-template

<EditTemplate>

                            <SfComboBox @bind-Value="@((context as clsItems).Id)" ID="Id" Placeholder="select an item" AllowCustom="true" TItem="clsItems" TValue="int" DataSource="@lstComboSource">

                                <ComboBoxFieldSettings Text="@nameof(clsItems.ItemName)" Value="@nameof(clsItems.Id)" />

                            </SfComboBox>

                        </EditTemplate>


Kindly refer to the attached video demo for your reference.

Query:

1. If the data entered was incorrect, the corresponding error should be displayed to the user using DataAnnotation.

2. Is it possible to cancel the save operation in line 1?

3. How can I find out if the user has approved this dialog or not, and if the user approves, I can delete it.

Currently, we are making samples based on your requirement. Further details will be updated on or before 31st October 2022.

Kindly get back to us if you have any further queries.

Regards,

Keerthana.


Attachment: ItemValue_2930f496.zip

PS Prathap Senthil Syncfusion Team January 19, 2023 12:18 PM UTC

Query1:If the data entered was incorrect, the corresponding error should be displayed to the user using DataAnnotation.


To display the corresponding error to the user when incorrect data is entered, we recommend utilizing the DataAnnotation feature. You can refer to our documentation for further information.

Documentation: https://blazor.syncfusion.com/documentation/datagrid/column-validation#validate-complex-column-using-data-annotation-attribute



Query 2:  Is it possible to cancel the save operation in line 1?

Yes, it is possible to cancel the save operation by setting args.cancel as true. You can refer to the code snippet provided below for an example of how this can be implemented:

public void CommandClickHandler(CommandClickEventArgs<clsItems> args)

    {

       

        if (args.CommandColumn.ButtonOption.Content == "Save")

        {

            args.Cancel = true;

         

        }

 

   }





Query 3:  How can I find out if the user has approved this dialog or not, and if the user approves, I can delete it.

We recommend using a custom dialogue while clicking the delete button. This will allow you to confirm with the user whether they wish to proceed with the deletion and ensure that the action is only taken if they approve.



Loader.
Up arrow icon