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
close icon

Select a row after EndEditAsync

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!


11 Replies

MS Monisha Saravanan Syncfusion Team November 11, 2022 03:50 AM

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 November 13, 2022 06:42 PM

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.



MS Monisha Saravanan Syncfusion Team November 15, 2022 07:37 AM

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 November 15, 2022 09:18 AM

Hi,

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

The e-mail for the login is Teste@Teste.com 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


MS Monisha Saravanan Syncfusion Team November 16, 2022 10:18 AM

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 replied to Monisha Saravanan November 22, 2022 08:07 AM

Any news?



MS Monisha Saravanan Syncfusion Team November 22, 2022 08:33 AM


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 November 22, 2022 11:25 AM

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.



MS Monisha Saravanan Syncfusion Team November 23, 2022 09:50 AM

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.



MS Monisha Saravanan Syncfusion Team November 28, 2022 07:10 AM

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 21st   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 November 28, 2022 07:32 AM

Than you very much!


Loader.
Live Chat Icon For mobile
Up arrow icon