How to make the Grid always having a row selected

[DavaderMember]

Good day!

I have a question about jqxGrid. How a following behavior can be implemented:

We have jqxGrid, bound to JSON source. The grid has selectionmode: ‘singlerow’, it’s sortable, filterable and pageable. The task is to make the grid always having some row selected if any rows present atm. For instance, when a user uses sort fucntion, the rows are updated and previously selected row is not seen any more. In this case the top row should be selected. Same for paging and filtering.

I tried this code:

 $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                selectionmode: 'singlerow',
                theme: 'summer',
                pageable: true,
                sortable: true,
                autoheight: true,
                altrows: true,
                showsortcolumnbackground: false,
                pagerrenderer: pagerrenderer,
                ready: function () {
                    $("#jqxgrid").jqxGrid('sortby', 'ObjectId', 'asc');
                    $("#jqxgrid").jqxGrid('selectrow', 0);
                },
                columns: [
                  { text: 'Object Id', dataField: 'ObjectId', width: 120, cellsalign: 'right' },
                  { text: 'Object Name', dataField: 'ObjectName', width: 300, cellsalign: 'center' }
                ]
            }).bind('rowselect', function (event) {
                var selectedRowIndex = event.args.rowindex;
                alert(dataAdapter.records[selectedRowIndex].ObjectId);
            }).bind('pagechanged', function (event) {
                $("#jqxgrid").jqxGrid('selectrow', 0);
            }).bind('sort', function (event) {
                $("#jqxgrid").jqxGrid('selectrow', 0);
            });

What I’m getting is – on sorting or paging event (no matter what page is selected now or what type of sorting) it always shows the alert with ObjectId of an object from 1-st page and visually no row is selected.

Looks like, I’m doing this wrong, what is the correct way?

[Peter StoevKeymaster]

Hi Davader,

The selection requires a bound index, so the code should look like below:

        $("#jqxgrid").jqxGrid(
                       {
                           source: dataAdapter,
                           selectionmode: 'singlerow',
                           theme: 'summer',
                           pageable: true,
                           sortable: true,
                           filterable: true,
                           autoheight: true,
                           altrows: true,
                           showsortcolumnbackground: false,
                           ready: function () {
                               $("#jqxgrid").jqxGrid('sortby', 'ObjectId', 'asc');
                               $("#jqxgrid").jqxGrid('selectrow', 0);
                           },
                           columns: [
                             { text: 'Shipped Date', dataField: 'ShippedDate', width: 120, cellsalign: 'right' },
                             { text: 'Freight', dataField: 'Freight', width: 300, cellsalign: 'center' }
                           ]
                       }).bind('rowselect', function (event) {
                       }).bind('pagechanged', function (event) {
                           var row = $("#jqxgrid").jqxGrid('getrenderedrowdata', 0);
                           $("#jqxgrid").jqxGrid('selectrow', row.boundindex);
                       }).bind('sort', function (event) {
                           var row = $("#jqxgrid").jqxGrid('getrenderedrowdata', 0);
                           $("#jqxgrid").jqxGrid('selectrow', row.boundindex);
                       });

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DavaderMember]

Thanks a lot, your solutiuon helps!

[Deep ShahMember]

How to display custom tooltip when user mouse over on the row.

[Author]

Posts