Add element directly on click in edit template dropdownlist

[Geraud Bertrand]

Inside my grid, I use a EditTemplate with a DropDownList to select Element to add into datasource. When I want to add a element  with Grid.AddRecordAsync, the dropdownlist open, if i click on a item, i need to press "Enter". How can I do so that the element is chosen as soon as the click is made.

<SfGrid @ref="Grid" DataSource="@CategorieElement" TValue="TElem" ID="ElementGrid" Width="100%" AllowSorting="true">
            <GridEditSettings AllowAdding="true"></GridEditSettings>
            <GridEvents OnActionBegin="AddedElement" Created="SortElement" TValue="TElem"></GridEvents>
            <GridColumns>
                <GridColumn Field="IdxElement" Visible="false" IsPrimaryKey="true"></GridColumn>
                <GridColumn Field="Element.Nom" HeaderText="Element">
                    <EditTemplate>
                        <SfDropDownList TValue="string" TItem="TElem" @bind-Value="@((context as TElem).Element.Nom)"  AllowFiltering="true" DataSource="@NotInCat">
                            <DropDownListFieldSettings Value="Element.Nom" Text="Element.Nom"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </EditTemplate>
                    <HeaderTemplate Context="header">
                        <span class="d-flex justify-content-between">
                            <span>Element</span>
                            <SfButton CssClass="e-success" IconCss="e-icons e-plus-icon" Content="Ajouter un élément" @onclick="@(() => { AddElement(); })"></SfButton>
                        </span>
                    </HeaderTemplate>
                    <Template>
                        @{
                            var elem = (context as TElem);
                            <span class="d-flex justify-content-between align-items-center" style="font-weight:500;">
                                <span class="d-flex justify-content-between" style="width:20%!important;">
                                    <span style="cursor:pointer" @onclick="@(() => { DetailRow(elem); })">@elem.Element.Nom</span>
                                    <span>
                                        <span style="margin-right:10px;">Coef : @elem.CoefQualite</span>
                                        <span style="margin-right:5px;cursor:pointer" @onclick="@(() => { if(elem.CoefQualite > 1)elem.CoefQualite--;UpdateCategorie(); })">-</span>
                                        <span style="cursor:pointer;" @onclick="@(() => { if(elem.CoefQualite < 3)elem.CoefQualite++;UpdateCategorie(); })">+</span>
                                    </span>
                                </span>
                                <span>
                                    <span style="font-weight:bolder;margin-right:20px;">@CurrentCategorie.Operations.Where(op => op.IdxElement == elem.IdxElement).Count() </span>
                                    <SfButton CssClass="e-info" IconCss="e-icons e-plus-icon" @onclick="@( () => { AddOperation(elem); })" Content="Ajouter opération"></SfButton>
                                    <SfButton CssClass="e-round e-danger e-small last-child" IconCss="e-icons e-intermediate-state-icon" @onclick="@(() => { SuppElement(elem); })"></SfButton>
                                </span>
                            </span>
                        }
                    </Template>
                </GridColumn>
                @*
                    TODO
                *@
                <!--<GridColumn Uid="ToDelete" AutoFit="true" MinWidth="50" MaxWidth="150" TextAlign="TextAlign.Center">
                    <HeaderTemplate>
                        <SfButton CssClass="e-warning" Content="Supprimer" OnClick="SuppOp"></SfButton>
                    </HeaderTemplate>
                    <Template>
                        <SfCheckBox TChecked="bool" ></SfCheckBox>
                    </Template>
                </GridColumn>-->
            </GridColumns>
            <GridTemplates>
                <DetailTemplate>
                    @{ var element = (context as ElementCategorie);}
                    <SfListBox ID="@("DetailGrid" + element.IdxElement.ToString())"
                               TValue="string[]"
                               TItem="TOpe"
                               DataSource="@(CurrentCategorie.Operations.Where(o => !o.Deleted).Select(o => { if (o.Element == null) o.Element = NoElement.Element;  return o; }).ToList())"
                               Query="@(new Query().Where("IdxElement", "equal", element.IdxElement))">
                        <ListBoxEvents TItem="TOpe" TValue="string[]" ValueChange="ClickItem" />
                        <ListBoxFieldSettings Value="UUID"></ListBoxFieldSettings>
                        <ListBoxTemplates TItem="TOpe">
                            <ItemTemplate Context="Categ">
                                @{
                                    var operation = Categ;
                                    <span class="d-flex justify-content-between align-items-center">
                                        <span>@(operation.Operation.Nom)</span>
                                        <span>
                                            <span class="ml-2">@(operation.Frequence) / @(operation.Periode != null ? operation.Periode.Abreviation : "?")</span>
                                        </span>
                                    </span>
                                }
                            </ItemTemplate>
                        </ListBoxTemplates>
                    </SfListBox>
                </DetailTemplate>
            </GridTemplates>
        </SfGrid>

[Rahul Narayanasamy]

Hi Geraud,

Greetings from Syncfusion.

We are quite unclear about your requirement. Could you please share the below details which will be helpful to validate and provide a better solution?

• Whether did you want to new record while selecting the value in the dropdown list?
• Whether did you want to save the record while clicking the dropdown list item?
• Video demonstration of the problem.
• More details about your requirement with a simple sample if possible.

Regards,

Rahul

[Geraud Bertrand]

Hello,

What I want is the first point :

• Whether did you want to new record while selecting the value in the dropdown list

[Rahul Narayanasamy]

Hi Geraud,

Thanks for the update.

You want to add the new record after selecting the value in the dropdown list(which is rendered in EditTemplate). Based on your scenario, we have created a simple sample. Find the below code snippets and sample for your reference.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync

 

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

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

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        . ..

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">

            <EditTemplate>

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

                    <DropDownListEvents TItem="Country" TValue="string" ValueChange="@ValueChangeHandler" ></DropDownListEvents>

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

                </SfDropDownList>

            </EditTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    SfGrid<Order> Grid;

    public List<Order> Orders { get; set; }

 

    private async Task ValueChangeHandler(ChangeEventArgs<string, Country> args)

    {

        await Grid.CloseEditAsync();

        await Grid.AddRecordAsync(new Order() { OrderID = 123, CustomerID = "New", Freight = 223.2, ShipCountry = args.ItemData.CountryName });

    }

 

    .. .

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11049655974

Please let us know if you have any concerns.

Regards,

Rahul