Jsgrid: I want to Highlight the row after row selection.

[himanshu0a]

Right now the row gets highlighted on hovering but I also want the row to be highlighted with a different color after it has been selected.

Please suggest a solution to this.

[soul3lade]

Hello,

You can use the rowClick function to achieve the highlighting effect. I've added a jsfiddle that @Tabalinas created showing how to highlight a row.

rowClick: function(args) { var $row = this.rowByItem(args.item); $row.toggleClass("highlight"); },

http://jsfiddle.net/tabalinas/mba4mLh8/

[tabalinas]

@soul3lade, Thank you for the answer.
@himanshu0a, please let us know if this is what you were looking for.

[himanshu0a]

Yes this is the correct answer and this is exactly i was looking for.

Thanks @soul3lade

[blainerothrock]

The above solution did not work for me, I had to set the background color for each cell in the row:

rowClick: function(args) {
  if ( selectedRow ) { selectedRow.children('.jsgrid-cell').css('background-color', ''); }
  var $row = this.rowByItem(args.item);
  $row.children('.jsgrid-cell').css('background-color','#F7B64B');
  selectedRow = $row;
},

[mansoor-omrani]

I changed @soul3lade 's fiddle a little bit (changed the CSS) to make it working (it seemed it was not working).

http://jsfiddle.net/mba4mLh8/277/

[JonilsonC]

Se você veio em busca de uma solução na qual apenas 1 linha é selecionada e que também desseleciona a mesma linha, aqui está a solução:

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);
         }