How to set cursor focus in the combobox

[Tyrone]

Hi team,

I tried the EditCellAsync. But It seems doesn't work with SFcombobox EditTemplate GridForeigncolumn. but it work with simple gridcolumn..

here is my code 

I also attached the base code file and razor file.

//Code block

        public async void KeyDownHandlerItem(KeyboardEventArgs args)

        {

            if (GridDetail.IsEdit && args.Key == "Enter")

            {

                await GridDetail.AddRecordAsync();

                await GridDetail.EditCellAsync(RowIndexDetail, "ItemId");

            }

        }

//Razor

                <GridForeignColumn Field=@nameof(DRdetailEdit.ItemId)

                                   EditType="EditType.DefaultEdit"

                                   HeaderText="Item"

                                   ForeignKeyField="ItemId"

                                   ForeignKeyValue="Description"

                                   ForeignDataSource="@Items"

                                   Width="110">

                    <EditTemplate>

                        <div @onkeydown="@(e => KeyDownHandlerItem(e))">

                            <SfComboBox @ref="ComboBoxItem"

                                        ID="InventoryMasterID" TItem="InventoryMaster"

                                        TValue="int"

                                        AllowCustom="false"

                                        Autofill="true"

                                        Placeholder="Select Product"

                                        CssClass="e-multi-column"

                                        AllowFiltering="true"

                                        PopupHeight="300px"

                                        Width="110"

                                        DataSource="@Items"

                                        @bind-Value="@((context as DeliveryReceiptsDetailEdit).ItemId)">

                                <ComboBoxTemplates TItem="InventoryMaster">

                                    <HeaderTemplate>

                                        <table>

                                            <tr>

                                                <th class="e-text-center combo-width">ItemId</th>

                                                <th>Description</th>

                                                @*<th>UnitCost</th>

                                            <th>Size</th>*@

                                            </tr>

                                        </table>

                                    </HeaderTemplate>

                                    <ItemTemplate Context="ComboContext">

                                        <table>

                                            <tbody>

                                                <tr>

                                                    <td class="e-text-center combo-width">@((ComboContext as InventoryMaster).ItemId)</td>

                                                    <td>@((ComboContext as InventoryMaster).Description)</td>

                                                </tr>

                                            </tbody>

                                        </table>

                                    </ItemTemplate>

                                </ComboBoxTemplates>

                                <ComboBoxFieldSettings Value="ItemId" Text="Description"></ComboBoxFieldSettings>

                                <ComboBoxEvents TItem="InventoryMaster" TValue="int" Created="Created" ValueChange="OnValueChangeItem"></ComboBoxEvents>

                            </SfComboBox>

                        </div>

                    </EditTemplate>

                    <HeaderTemplate>

                        <div>

                            <span class="oi oi-fire e-icons headericon"></span> Item

                        </div>

                    </HeaderTemplate>

                </GridForeignColumn>

Hope you can help me.

Best Regards,

Tyrone

Attachment: Transaction_2f1057b1.rar

[Vignesh Natarajan]

Hi Tyrone,  

 

Thanks for contacting Syncfusion support.  

 

Query: “But It seems doesn't work with SFcombobox EditTemplate GridForeigncolumn. but it work with simple gridcolumn..” 

 

We have analyzed the reported query at our end by preparing a sample using your code example and we are not able to reproduce the reported query at our end. Kindly refer the below sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169008/ze/DataGrid_Server-1411138931.zip 

 

If you are still facing the reported issue. Kindly get back to us with following details.  

 

1. Share your Syncfusion.Blazor NuGet package version details.
2. Share the video demo of reported issue along with replication procedure.
3. If possible share the issue reproducible sample or try to reproduce the issue reproducible sample.

    

Above requested details will be very helpful for us to validate the reported query at our end and provide solution as early as possible. 

 

Regards, 

Vignesh Natarajan 

[Tyrone]

Thanks Vignesh Natarajan for update

I'm trying to create a POS like entry.. I'm using autocomplete sfcombobox as I posted in my first post.

Here are the steps

1) after I selected an item and press enter (same with barcode scanning like in groceries). it will automatically added a new  row..

2) And then should  set focus (with cursor) in the product item column of the new row for item selection..

I'm done with number 1)

but no success with number 2).

It need to doubleclick the cell just to get the cursor on. and this consumes time.

It goes like this as of now..

and I need it to go like this..

with editing cursor after adding of new row..

I tried Editcellasync. but seems it not worked with Gridcolumn with SFcombobox EditTemplate .

Hope you can help me.

Best Regards,

Tyrone

[Vignesh Natarajan]

Hi Tyrone, 

 

Thanks for the update.  

 

Query: “I tried Editcellasync. but seems it not worked with Gridcolumn with SFcombobox EditTemplate .” 

 

We are able to reproduce the reported behavior at our end. We suggest you introduce some delay in calling EditCellAsync method after AddRecordAsync method. Refer the below modified code example.  

 

public async void KeyDownHandlerItem(KeyboardEventArgs args) 

{ 

  

    if (GridDetail.IsEdit && args.Key == "Tab") 

    { 

        await GridDetail.EditCellAsync(RowIndexDetail, "OrderDate"); 

    } 

  

    if (GridDetail.IsEdit && args.Key == "Enter") 

    { 

        await GridDetail.AddRecordAsync(); 

        await Task.Delay(100); 

        await GridDetail.EditCellAsync(RowIndexDetail, "EmployeeID"); 

    } 

} 

 

 

Now we are able to focus the correct column properly without any error. Kindly download the modified sample from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169008/ze/DataGrid_Server834252281.zip 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

    

 

[Tyrone]

Thanks  Vignesh Natarajan for the update.

It did not work with with my program.. 

must be something to do with my model class entity..

I'll try to do some isolation. 

Best Regards,

Tyrone 

 

[Vignesh Natarajan]

Hi Tyrone,  

Thanks for the update.  

We will wait to hear from you. Kindly get back to us, if you need any further assistance on this.   

Regards, 

Vignesh Natarajan