jQuery Grid

Set the altrows property of the jqxGrid. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.material.css">
<div id="jqxgrid"></div>

JavaScript

function generatedata (rowscount, hasNullValues) {
  let data = [];
  if (rowscount == undefined) rowscount = 100;

  let products =
      [
        {id: 1, brand: 'Fiat', model: 'Punto' },
        {id: 2, brand: 'Ford', model: 'Ka' },
        {id: 3, brand: 'Honda', model: 'Civic' },
        {id: 4, brand: 'Renault', model: 'Clio' },
        {id: 5, brand: 'Opel', model: "Corsa" },
        {id: 6, brand: 'Toyota', model: "Rav4" },
      ]; 

  let countries =
      [
        {id: 1, name: 'France' },
        {id: 2, name: 'Poland' },
        {id: 3, name: 'Germany' }
      ];


  for (let i = 0; i < products.length; i++) {
    let row = {};
    let countryindex = Math.floor(Math.random() * 3);

    row.id = i + 1;
    row.productId = products[i].id;
    row.productBrand = products[i].brand;
    row.countryId = countries[countryindex].id;
    row.countryName = countries[countryindex].name;
    row.quantity = Math.floor(Math.random() * 100);

    data[i] = row;
  }

  return data;
}

var source = {
  localdata: generatedata(10, false),
  datafields:
  [
    { name: 'id', type: 'number' },
    { name: 'productId', type: 'number' },
    { name: 'productBrand', type: 'string' },
    { name: 'countryId', type: 'number' },
    { name: 'countryName', type: 'string' },
    { name: 'quantity', type: 'number' }
  ], 
  datatype: 'json'
};

var columns = [
  {
    text: 'Brand', 
    datafield: 'productId', 
    displayField: 'productBrand', 
    filtertype: 'checkedlist', width: 170
  },
  {
    datafield: 'productBrand',
    hidden: true
  },
  {
    text: 'Country', 
    datafield: 'countryId', 
    displayField: 'countryName', 
    filtertype: 'checkedlist', width: 170
  },
  {
    datafield: 'countryName',
    hidden: true
  },
  {
    text: 'Quantity', 
    datafield: 'quantity'
  }
];

var dataAdapter = new $.jqx.dataAdapter(source, {
  loadComplete: function (data) {},
  loadError: function (xhr, status, error) {}
});

$("#jqxgrid").on("bindingcomplete", function...