Programmatically select a row

[Ian Hicks]

Hi,

Please can you let me know how I can programmatically select a row in the grid control? (asp.net mvc 5)

I want to implement a search feature that selects the first matching row in a paged data grid rather than only showing the matching results.

Thanks,

Ian

[Ajith R]

Hi Ian,

Thanks for using Syncfusion products.

Query: How I can programmatically select a row in the grid control? I want to implement a search feature that selects the first matching row in a paged data grid rather than only showing the matching results.

We suggest you to use ActionComplete client side event and select the first row by using selectRows function to achieve your requirement. Please refer the below code snippet for further details.

@(Html.EJ().Grid<SelectRowGrid.OrdersView>("FlatGrid")

        --------

        --------

        .ClientSideEvents(eve=>eve.ActionComplete("onActionComplete"))               

)

<script type="text/javascript">

    function onActionComplete(args) {

        if (args.requestType == "searching")

            this.selectRows(0); // Select first row on search data

    }
</script>

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119312/ze/SearchGridSelection1849605459

Please let us know if you have any concerns.

Regards,
Ajith R

[Ian Hicks]

Thanks for this, if the row I wish to select is on a different page is there a way to select the relevant page?

E.g.  Data grid is paged showing 10 rows per page and we want to select row 14 how would I select page 2 before selecting row 4?

<script type="text/javascript">
            function onActionComplete(args) {
                if (args.requestType == "searching") {
                    this.selectPage(2); //want to do something like this
                    this.selectRows(4); 
                    
                }
            }
        </script>

Thanks

[Ajith R]

Hi Ian,

Thanks for your update.

Query: I wish to select is on a different page is there a way to select the relevant page?

We suggest you to use gotoPage method and call the corresponding page number to achieve your requirement. We have to check the page count and current view data length as larger than the required page number and selected row.

For example, If we need to go to page number 2 and select 4^th row means we have to check whether the search result have more than one page count and the current view data have greater than or equal to 4 records otherwise it will display “No records to display” when returns less number of search results. Please refer the below code snippet for further details.

<script type="text/javascript">

    function onActionComplete(args) {

       if (args.requestType == "searching") {

            if (this.model.pageSettings.pageCount > 1 && this.model.currentViewData.length >= 4) {

                this.gotoPage(2) // Go to page 2

                this.selectRows(3); // Select fourth row

            }            

        }   

    }
</script>

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119312/ze/SelectRowGrid-1291400915

Please refer the below JS Doc to know about the methods, members and events in ejGrid.

JS Doc: http://help.syncfusion.com/UG/JS_CR/ejGrid.html

Please let us know if you have any concerns.

Regards,
Ajith R