JQX Grid

by Nico D

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/knockout-3.0.0.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/styles/jqx.apireference.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/format.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.arctic.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/json2.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxknockout.js"></script>
<div data-bind="jqxGrid: {
    source: models,
    autoheight: false,
    width: '100%',
    height: 300,
    editable: false,
    selectionmode: 'multiplerowsadvanced',
    sortable: false,
    altrows: true,
    columnsresize: true,
    columnsreorder: true,
    columns: [{ text: 'Template', dataField: 'templateLongName', cellsalign: 'left', sortable: true, resizable: true, maxWidth: '300', }]}" id="ListModels">
</div>
<div data-bind="'html': result"></div>
<div>
  <input type="button" value="Clear Selection" id="ClearButton" />
</div>

JavaScript

var content = {
  'models': ko.observableArray([{
    'templateLongName': "Template A"
  }, {
    'templateLongName': "Template B"
  }, {
    'templateLongName': "Template C"
  }, {
    'templateLongName': "Template D"
  }, {
    'templateLongName': "Template E"
  }, {
    'templateLongName': "Template F"
  }]),
  'resultIndexes': ko.observableArray([]),
  'result': ko.observable("[]")
};

$("#ListModels").bind('rowselect', function(event) {
  var selectedRowIndex = event.args.rowindex;
  console.log("selectedRowIndex: " + selectedRowIndex);
  if (content.resultIndexes().indexOf(selectedRowIndex) < 0) {
    content.resultIndexes().push(selectedRowIndex);
  }
  content.result(ko.toJSON(content.resultIndexes()));
});

$("#ListModels").bind('rowunselect', function(event) {
  var unSelectedRowIndex = event.args.rowindex;
  content.resultIndexes().splice(content.resultIndexes().indexOf(unSelectedRowIndex), 1);
  content.result(ko.toJSON(content.resultIndexes()));
});

$("#ClearButton").click(function() {
  $("#ListModels").jqxGrid('clearSelection');
  content.resultIndexes([]);
  content.result(ko.toJSON(content.resultIndexes()));
});

ko.applyBindings(content);