Highlight selected jsGrid row

Question

I found this example which highlights a row after it has been selected but the problem with it is that it keeps the previous row(s) highlighted after another one has been selected.

Here's part of the code

//js
rowClick: function(args) {
        var $row = this.rowByItem(args.item);

      $row.toggleClass("highlight");
    }, 

//css
tr.highlight td.jsgrid-cell {
    background-color: green;
}

I can't find a solution to unhighlight the previously selected row

Answer 1

A little late to the party on this one, however the accepted answer by @Narenda didn't completely solve my problem. This may help someone else that stumbles across this later.

If you need a single select only, here's a way of doing it:

Extend the jsGrid plugin with a method to find a row by index:

    jsGrid.Grid.prototype.rowByIndex = function(arg){
        //this._content.find("tr")[arg] returns a DOM element instead of a jQuery object
        //Pass the DOM element to the find method to get a jQuery object representing it
        return this._content.find(this._content.find("tr")[arg]);
    };

Modify the rowClick function in @Narenda's answer:

    rowClick: function ( args ) {
        //Deselect all rows
        for(var i = 0; i<this.data.length; i++){
            this.rowByIndex(i).removeClass("jsgrid-highlight-row");
        }

        //Everything else as per the previous answer
        var $row = this.rowByItem(args.item),
        selectedRow = $("#jsGrid").find('table tr.jsgrid-highlight-row');

        if (selectedRow.length) {
            selectedRow.toggleClass('jsgrid-highlight-row');
        };
        $row.toggleClass("jsgrid-highlight-row");
        //Any other code to run on item click
    }

And add some CSS. This mimics the row hover in the default theme:

    tr.jsgrid-highlight-row td.jsgrid-cell {
         background:#c4e2ff;
         border-color:#c4e2ff;
    }

Answer 2

If you came looking for a solution in which only 1 line is selected and which also deselects the same line, here is the solution:

selectedVal = null;

$(document).ready(function(){
jsGrid.Grid.prototype.rowByIndex = function(arg) {
         //this._content.find("tr")[arg] returns a DOM element instead of a jQuery object
         //Pass the DOM element to the find method to get a jQuery object representing it
         return this._content.find(this._content.find("tr")[arg]);
     };
});

rowClick: function (args) {

             selectedVal = args.item;

             let $row = this.rowByItem(args.item);

             if ($row.hasClass("highlight") === false) {
                 //Deseleciona todas as linhas
                 for (let i = 0; i < this.data.length; i++) {
                     this.rowByIndex(i).removeClass("highlight");
                 }
                 $row.toggleClass("highlight");

             } else {
                 selectedVal = null;
                 $row.toggleClass("highlight");

             }
             console.log(selectedVal);
         }