We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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>


10 Replies

KG Keerthana Ganesan Syncfusion Team October 7, 2022 10:55 AM

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 11:13 AM

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 12:36 PM

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 13, 2022 11:39 PM

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 12:18 AM

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 18, 2022 10:40 PM

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 12:32 AM

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 07:41 AM

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 07:44 AM

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 26, 2022 10:10 PM

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

Loader.
Live Chat Icon For mobile
Up arrow icon