Row Click Event-jsGrid

by Danish Farman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>
<div id="label"></div>

JavaScript

var clients = [{
  "Name": "Otto Clay",
  "Age": 25,
  "Country": 1
}, {
  "Name": "Connor Johnston",
  "Age": 45,
  "Country": 2
}, {
  "Name": "Lacey Hess",
  "Age": 29,
  "Country": 3
}, {
  "Name": "Timothy Henson",
  "Age": 56,
  "Country": 1
}, {
  "Name": "Ramona Benton",
  "Age": 32,
  "Country": 3
}];

$("#jsGrid").jsGrid({
  width: "100%",
  height: "300px",
  inserting: false,
  editing: false,
  sorting: true,
  paging: true,
  data: clients,
  selecting: true,
  fields: [{
    name: "Name",
    width: 150
  }, {
    name: "Age",
    width: 50
  }, {
    name: "Country"
  }],
  rowClick: function(args) {
    console.log(args)
    var getData = args.item;
    var keys = Object.keys(getData);
    var text = [];

    $.each(keys, function(idx, value) {
      text.push(value + " : " + getData[value])
    });

    $("#label").text(text.join(", "))
  }
});