Select a row after EndEditAsync

[Társis]

Good morning,

I have an editable Grid and when I call EndEditAsync I want to select the next row.

But when I call  SelectRowAsync the grid selects the correct row, but if I press F2 in order to edit, the row edited is the row selected, but the row that receives focus is the prior one.

What should I do to resolve it?

Thanks in advance!

[Monisha Saravanan]

Hi Tarsis,

Greetings from Syncfusion support.

Query: “But when I call  SelectRowAsync the grid selects the correct row, but if I press F2 in order to edit, the row edited is the row selected, but the row that receives focus is the prior one. What should I do to resolve it?”

We can use JavaScript solution to set focus to the selected row. We have prepared an sample as per your shared requirement. Here we have set focus to the cell after performing select operation. Kindly check the attached sample and code snippet for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BLAZOR~1-327761332.zip

public async Task ActionBegin(ActionEventArgs<Order> args)

    {

        if(args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)

        {

            index = args.RowIndex;

        }

        if(args.RequestType == Syncfusion.Blazor.Grids.Action.Save && IsSave)

        {

            IsSave = false;

            args.Cancel = true;

            await Grid.EndEditAsync();

            double a = index + 1;

            await Grid.SelectRowAsync(a);

           var dotNetReference = DotNetObjectReference.Create(this);

           await JsRuntime.InvokeVoidAsync("SetFocus", a);

 

           

 

        }

 

    }

function SetFocus(index) {

    setTimeout(function () {

        var grid = document.getElementsByClassName('e-grid')[0];

 

        var rows = grid.querySelectorAll('.e-row')[index];

       if (rows) {

            var cell = rows.querySelector('.e-rowcell');

            cell.focus();

            cell.classList.add('e-focused');

            cell.classList.add('e-focus');

        }

          

    }, 200);

}

Please let us know if you have any concerns.

Regards,

Monisha

[Társis]

Thank you for your reply,

but I need to execute it from my ViewModel how can I achieve that? Particularly the  "var dotNetReference = DotNetObjectReference.Create(this)" 

and the SetFocus function.

[Monisha Saravanan]

Hi Tarsis,

Before proceeding further with your requirement. kindly share the below details to validate further at our end.

1. Share us the entire Grid code snippet.
2. Share us the video demonstration of the issue.
3. Confirm us whether you are using Blazor Grid at your end.
4. Share us how you have implemented the ViewModel.

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

Regards,

Monisha

[Társis]

Hi,

I'm sending you my application in order to see my ViewModel and grid in action.

The e-mail for the login is [e-mail] and the password is 123

The viewModel is DeParaCompraImportacaoXMLVM.cs and the razor file is DeParaCompraGrid.razor.

I've made a video of the steps to get in that page.

What I want is:

- When the user save the row, it should focus and edit the next row. Also focus the first one editable cell (in that case the "Produto.Codigo" cell.

You'll see inside the zip file one xml file, in order to select when click the "Selecione o Arquivo" button.

Attachment: GAFNETBlazor_5e2fe82e.zip

[Monisha Saravanan]

Hi Tarsis,

We are currently validating your query at our end and we will update further details within two business days. Until then we appreciate your patience.

Regards,

Monisha

[Társis]

Any news?

[Monisha Saravanan]

Hi Tarsis,

Thanks for the patience.

We have validated the shared sample and from your shared code snippet we could see that the ID property is not referred properly. So the focus is not in the first editable field by default. Kindly check the attached code snippet and documentation for your reference.

CRUD operation for complex field works properly only when we define ID property properly.

<GridColumn Field="Data.FirstName" HeaderText="Customer Name" Width="150">

            <EditTemplate>

                 <SfTextBox

                    ID="Data___FirstName"

                    @bind-Value="@((context as Order).Data.FirstName)"

                    >

                </SfTextBox>

            </EditTemplate>

        </GridColumn>

Reference: https://blazor.syncfusion.com/documentation/datagrid/editing#perform-crud-operation-for-complex-object-using-edittemplate

Please let us know if you have any concerns.

[Társis]

Sorry, but I didn't understand.  The viewModel is DeParaCompraImportacaoXMLVM.cs and the razor file is DeParaCompraGrid.razor. In that razor file, I have 2 SfTextBox and both have ID's.

The other problem is when I call await ProdutoFornecedorGrid.EndEditAsync() and 

 await ProdutoFornecedorGrid.SelectRowAsync(IndiceLinha + 1) from my viewModel it selects the next line, but if I press F2 it edits the prior line. It doesn't focus the next line. I need to do it from my ViewModel.

[Monisha Saravanan]

Hi Tarsis,

We would like to inform that when we start editing an row then by default the first editable cell will be focused. (i.e. the cursor will start blink at the focused cell. Kindly refer the below screen snip here after pressing  F2 the first editable cell customerID (BOLID) is focused.

And in your shared sample we could see that you have used EditTemplate feature of DataGrid and ID property is not referred properly. So after pressing F2 it will not focus the first editable cell. So you must define ID property for the complex column as (___) replacing the (.) operator in the Field value. And for the normal column you should define the field name.

 

<SfGrid  ID="Grid" DataSource="Dados" @ref="Grid" AllowPaging="true" AllowResizing="true" AllowSorting="true" TValue="ProdutoFornecedorModel">

    <GridEditSettings AllowEditing="true"></GridEditSettings>   

    <GridPageSettings PageSize="15"></GridPageSettings>

   

   

    <GridEvents CommandClicked="ViewModel.AoClicarCommandBtnProdFornGrid"

        RowSelected="AoSelecionarLinha"

        OnActionComplete="OnActionComplete"

        OnActionBegin="AoComecarAcao"

        TValue="ProdutoFornecedorModel" />

    <GridColumns>

        <GridColumn Field="CdProdForn" HeaderText="Cód. Forn." Width="150" IsPrimaryKey="true"></GridColumn>

        <GridColumn Field="DescProdForn" HeaderText="Nome Forn." Width="400"  AllowEditing="false"></GridColumn>

        <GridColumn Field="CdUnidadeForn" HeaderText="Unid. Forn." Width="120"  AllowEditing="false"></GridColumn>

        <GridColumn Field="Produto.Codigo" HeaderText="Código"  Width="150">

            <EditTemplate>

                <SfTextBox

                    ID="producto___Codigo"

                    @bind-Value="@((context as ProdutoFornecedorModel).Produto.Codigo)"

                    Blur="AoSairCodigoProdutoGrid">

                </SfTextBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="Produto.Nome" HeaderText="Nome" Width="400"  AllowEditing="false">

            <EditTemplate>

                <SfTextBox ID="Description" Value=@ViewModel.ProdutoFornecedorAtivo.Produto.Nome Readonly="true" TabIndex="-1"></SfTextBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn Field="FatorConversao" HeaderText="Fat. Conv." Width="150" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Right">

            <EditTemplate>

                <SfNumericTextBox ID="FatorConversao"

                                  TValue="decimal" @bind-Value="@((context as ProdutoFornecedorModel).FatorConversao)"

                                  ShowSpinButton="false"

                                  Format="0.0000000">

                    <NumericTextBoxEvents TValue="decimal" Blur="AoSairFatorConversao">

 

                    </NumericTextBoxEvents>

                </SfNumericTextBox>

            </EditTemplate>

        </GridColumn>

        <GridColumn HeaderText="Pesq." TextAlign="TextAlign.Center" Width="100">

            <GridCommandColumns>

                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { IconCss="fa fa-search", CssClass="btn-info btn-grid"})" Title="Item"></GridCommandColumn>

            </GridCommandColumns>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

For the below highlighted focus related issue after pressing F2 with SelectRowsAsync method. we are checking the possibility of the source level fix to fix the reported issue. So we will update further details within two business days.

Note: so kindly ignore the previous solution provided using JavaScript.

Please let us know if you have any concerns.

[Monisha Saravanan]

Hi Tarsis,

We have confirmed this as an issue and logged the defect report “ Focus is incorrect when using F2 after performing selection using SelectRowsAsync method” for the same. Thank you for taking time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our upcoming patch release which is expected to be rolled out on or before 21^st   Dec, 2022.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.       

https://www.syncfusion.com/feedback/39432/focus-is-incorrect-when-using-f2-after-performing-selection-using-selectrowsasync

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”

Regards,

Monisha

[Társis]

Than you very much!

[Monisha Saravanan]

Hi Tarsis,

We are facing difficulties in including the fix for the issue “Focus is incorrect when using F2 after performing selection using SelectRowsAsync method” in our latest release. We have planned to implement this in our upcoming patch release which is going to be held on January 11^th , 2023.

We will update you once the release is rolled out. Until then we appreciate your patience.

Disclaimer : Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

[Kevin Cabral]

Nice reply and keeping us updated on the status.

[Monisha Saravanan]

Hi Kevin,

Thanks. We will update once the reported issue is resolved. Until then we appreciate your patience.

[Monisha Saravanan]

Hi,

We are facing complexities in including the fix for the issue as promised in our latest release. We have planned to implement this in our upcoming patch release which is going to be held on January 18^th , 2023.

We will update you once the release is rolled out. Until then we appreciate your patience.

Disclaimer : Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

[Monisha Saravanan]

Hi Tarsis,

We are glad to announce that, we have included fix for the issue “Focus is incorrect when using F2 after performing selection using SelectRowsAsync method” in our release (20.4.0.44).  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the Nuget package for latest fixes and features from below.

Nuget : https://www.nuget.org/packages/Syncfusion.Blazor.Grid

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Please let us know if you have any concerns.

[Társis]

Good evening,

after updated to that new version, Visual Studio doesn't recognize 

@using Syncfusion.Blazor anymore.

Should I change something?

[Monisha Saravanan]

Hi Tarsis,

Query: “after updated to that new version, Visual Studio doesn't recognize ”

We understand that you are experiencing an issue and we apologize for any inconvenience this may have caused. After our volume 4, 2022 release, we currently only provide support for .Net6 and .Net7. We regret to inform you that support for .Net versions will be discontinued. Based on the information provided, it is possible that the issue you are experiencing may be related to this change. We recommend upgrading to .Net6 or .Net7 to see if this resolves the issue.

Reference: https://blazor.syncfusion.com/documentation/release-notes/20.4.38?type=all#breaking-changes

If you continue to experience difficulties or if we have misunderstood your query, please do not hesitate to reach out to us with detailed information. We will do our best to provide a solution as soon as possible.

Thank you for your patience and understanding.