CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc-4jquery-jtable
sheir
sheir

Reputation: 393

How to have to jTable grid keep its selection on paging/sorting?

Environment:

I notice that when paging is done, the previously selected rows disappears .. meaning they are no longer selected. Following the SelectedRows demo, I saw that the div is populated with some fields from the currently selected rows. But once you page off, that selection is lost.

Have commented on an existing issue https://github.com/hikalkan/jtable/issues/243

But no forth coming solution.

In my little testing, I selected a row, then I page off to the next page. The following events were fired in this order:

The same issue happens on a Sort too [selection is lost] with same order of events being fired.

Now, I am by no means a jQuery or Javascript guy.

But wondering if it is possible to create a collection class then when user selects a row, add the row's key to the collection (or remove it if unchecking the row). On paging, have the loadingRecords update the collection and when selectionChanged is fired, if there are items in the collection; it just re-selects them.

Thoughts/solutions?

Upvotes: 3

Views: 1858

Answers (2)

hardika
hardika

Reputation: 642

I think the following should be required.

  • i.e you have to assign a key to the column.
  • use $(table_id).jtable('reload');

reload - will keep your state recording.

        columnname: {
            key: true,
            list: false,
        },

Upvotes: 0

xeo
xeo

Reputation: 832

Found this question unanswered, then just added this functionality to a site. so I'm sharing what I did in hopes it helps others. i think there may be some optimizations available so feel free to offer them as comments.

my strategy was to make a $colleges array to store the row keys, to update this array to match the selection, and use this array to select rows during paging activities. the selectionChanged event only includes visible rows. so in this version i first remove all visible rows from the $colleges array then add back any currently visible and selected rows.

            var $colleges;
            ...
            $('#collegeSearchContainer').jtable ({ 
            ...
            fields: {
                uid: { key:true, list:false, edit:false, create:false }
                ...
            },
    selectionChanged: function () {

        var $table = $('#collegeSearchContainer');

        // Get all currently selected rows
        var $selectedRows = $table.jtable('selectedRows');

        // DEL - add all non-visible rows to colnew then swap
        var $colnew = [];
        for (var i = 0, len = $colleges.length; i < len; i++) {
            $row = $table.jtable('getRowByKey', $colleges[i]);
            if (!$row)
                $colnew.push($colleges[i]);
        }
        $colleges = $colnew;

        // ADD - make sure currently selected rows are selected
        if ($selectedRows.length > 0) {
            $selectedRows.each(function () {
                var record = $(this).data('record');
                if ($.inArray(record.uid, $colleges) < 0) 
                    $colleges.push(record.uid);
            });
        }

        // UPDATE selection indicator for colleges
        $('#email_schools').html($colleges.length);         
    },
    rowInserted: function (event, data) {
        // select those colleges that have been selected in the past
        if ($.inArray(data.record.uid, $colleges) >= 0) {
            $('#collegeSearchContainer').jtable('selectRows', data.row);
        }
    },

Upvotes: 2

Related Questions