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

Set focus on sfDataGrid on web

In my webApp, user changes the selected row using cursor key up and down. When some special row is selected, an event update another part of gui and the sfDataGrid lost focus, so if the user continue to browse rows using cursor keys, nothing happens anymore.

Is there a way to set focus by code, again on the sfDataGrid?

Thanks in advance

Peter


3 Replies 1 reply marked as answer

TP Tamilarasan Paranthaman Syncfusion Team October 11, 2022 08:11 AM

Hi Pietro Beccegato,


As per your requirement, you can achieve that by using the FocusScope widget. Wrap the DataGrid as a child of the FocusScope widget and set the FocusScopeNode to the FocusScope.node property. You can request the focus by using the FocusScopeNode.requestFocus method. We have prepared a simple sample for that. In that sample, select any one row in the DataGrid then tap the TextField which is added above the DataGrid, you will lose the DataGrid focus. We request the focus again on the DataGrid in that button click. Now you can change the selected row using the cursor key up and down. Please check the following sample and code snippet.


 FocusScopeNode focusScopeNode = FocusScopeNode();

 

@override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: const Text('Syncfusion Flutter SfDataGrid')),

      body: Column(

        children: [

          const Padding(padding: EdgeInsets.all(10)),

          SizedBox(

            height: 50,

            width: 200,

            child: ElevatedButton(

                onPressed: (() {

                  focusScopeNode.requestFocus();

                }),

                child: const Text('Request Focus')),

          ),

          const SizedBox(

            width: 400,

            child: TextField(),

          ),

          Expanded(

            child: Card(

              margin: const EdgeInsets.all(30),

              child: FocusScope(

                node: focusScopeNode,

                child: SfDataGrid(

                    source: _employeeDataSource,

                    columns: getColumns,

                    selectionMode: SelectionMode.single,

                    columnWidthMode: ColumnWidthMode.fill),

              ),

            ),

          ),

        ],

      ),

    );

  }

}


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


We hope this helps. In case we misunderstood your requirement, please provide more specific or clear use case details. It will be helpful for us to check and provide an appropriate solution.


Regards,

Tamilarasan


Marked as answer

PB Pietro Beccegato October 12, 2022 05:29 AM

Perfect! Solved!

Many thanks for your awesome job




TP Tamilarasan Paranthaman Syncfusion Team October 13, 2022 04:33 AM

Hi Pietro Beccegato,


We are glad that the provided response meets your requirement. If you are satisfied with our response, please mark it as an answer. so that other members can locate it more quickly. Please let us know if you require further assistance. As always, we are happy to help you out.


Regards,

Tamilarasan


Loader.
Live Chat Icon For mobile
Up arrow icon