focus on the first cell of that column whose EditTemplate is ComboBox, when the user performs Add or Edit.

[Duong Quoc]

Question: ​

     focus on the first cell of that column whose EditTemplate is ComboBox, when the user performs Add or Edit

code:  

<SfGrid @ref="SfGridPhieuChiCT" DataSource="@PhieuChiCTCreateRequests" AllowSorting="true" AllowResizing="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete","Cancel", "Update"})" Height="150">

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

      <GridEvents Created="CreatedPhieuChiCT" OnActionBegin="ActionBeginPhieuChiCT" OnActionComplete="ActionCompletedPhieuChiCT" TValue="PhieuChiCTCreateRequest"></GridEvents>

      <GridColumns>

       <GridColumn Field=@nameof(PhieuChiCTCreateRequest.Id) HeaderText="#" IsPrimaryKey="true" AllowAdding="false" AllowEditing="false" TextAlign="TextAlign.Center" Width="60"></GridColumn>

       <GridColumn Field=@nameof(PhieuChiCTCreateRequest.NgoaiTeId) HeaderText="Mã nt" AllowAdding="false" AllowEditing="false" TextAlign="TextAlign.Center" Width="150">

                           <EditTemplate>

                               <SfComboBox @bind-Value="@((context as PhieuChiCTCreateRequest).NgoaiTeId)" DataSource="@NgoaiTeDTOs" Enabled="false" Autofill="true" AllowCustom="false" class="form-control" CssClass="e-multi-column" PopupWidth="700" PopupHeight="300">

                                   <ComboBoxFieldSettings Text="NgoaiTeUd" Value="Id"></ComboBoxFieldSettings>

                               </SfComboBox>

                           </EditTemplate>

      </GridColumn>

        <GridColumn Field=@nameof(PhieuChiCTCreateRequest.GhiNoTk) HeaderText="Ghi nợ TK" AllowAdding="false" AllowEditing="false" TextAlign="TextAlign.Center" Width="150">

                           <EditTemplate>

                               <SfComboBox @bind-Value="@((context as PhieuChiCTCreateRequest).GhiNoTk)" DataSource="@TaiKhoanDTOs" Enabled="false" Autofill="true" AllowCustom="false" class="form-control" CssClass="e-multi-column" PopupWidth="700" PopupHeight="300">

                                   <ComboBoxFieldSettings Text="TaiKhoanUd" Value="Id"></ComboBoxFieldSettings>

                               </SfComboBox>

                           </EditTemplate>

      </GridColumn>

   </GridColumns>

[Monisha Saravanan]

Hi Duong Quoc,

Greetings from Syncfusion.

We would like to inform that by default in DataGrid the focus will be set to the first editable column while performing editing. But in your scenario you have disabled the adding and editing at column level. So the inbuilt focus is not applied.

We suggest you to use FocusAsync method at ComboBox created event to apply focus to the specific ComboBox. Kindly check the below attached sample and code snippet for your reference.

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

 

<SfGrid 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" AllowAdding="false" AllowEditing="false" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>

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

            <EditTemplate>

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

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

 

                    <ComboBoxEvents TItem="Country" TValue="string" Created="@CreatedHandler"></ComboBoxEvents>

                </SfComboBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" AllowAdding="false" AllowEditing="false" ValidationRules="@(new ValidationRules{ Required=true})" Width="120">

            <EditTemplate>

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

                    <ComboBoxFieldSettings Value="CustomerName" Text="CustomerName"></ComboBoxFieldSettings>

                </SfComboBox>

            </EditTemplate>

        </GridColumn>

          

    </GridColumns>

</SfGrid>

 

@code {

    public SfComboBox<string, Country> Combo { get; set; }

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

 

    private async Task CreatedHandler(Object args)

    {

        await Combo.FocusAsync();

    }

}

Please let us know if you have any concerns.

Regards,

Monisha