Html Grid

Set the filterable 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">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<h1 class='otc-h1'>OTC Workflow</h1>
<div id="splitter">
  <div style="visibility: hidden; border: none;" id='jqxTree'>
  </div>

  <div id="ContentPanel">
    <div id='DetailForm' style="width: 400px; height: auto;"></div>
  </div>
</div>
<div id='Events'>Events Location</div>

JavaScript

var source = [
  { "label": "WP - ShipConfirm", "id": "101"},
  { "label": "LogPro/Workman/ToSAP", "icon": "/jqwidgets/images/php.png", "expanded": "true", "id": "102",
   items: [
     { "label": "MoveRename - SAP/OTC/ToSAP", "icon": "/jqwidgets/images/php.png", "expanded": "true", "id": "103",
      items: [
        { "label": "Map - SAP/OTC/ToSAP", "icon": "/jqwidgets/images/php.png", "expanded": "true", "id": "104",
         items: [
           { "label": "Copy - SAP/OTC/ToSAP/Processed", "icon": "/jqwidgets/images/php.png", "id": "105"},
           { "label": "Post - SAP", "icon": "/jqwidgets/images/php.png", "id": "106"} ]} ,
        { "label": "Move - SAP/OTC/ToSAP/Processed", "icon": "/jqwidgets/images/php.png", "id": "107"} ] } ] } 
];

var template = [
  { bind: 'subid', label: 'Subscription ID',
   type: 'text', required: true, labelWidth: '125px', width: '50px' },
  { bind: 'distid', label: 'Distribution ID',
   type: 'text', required: true, labelWidth: '125px', width: '50px' },
  { bind: 'action', label: 'Action',
   type: 'text', required: true, labelWidth: '125px', width: '50px' },
  { bind: 'frompath', label: 'FromPath',
   type: 'text', required: true, labelWidth: '125px', width: '200px' },
  { bind: 'topath', label: 'ToPath',
   type: 'text', required: true, labelWidth: '125px', width: '200px' },
  { bind: 'filter', label: 'Filter',
   type: 'text', required: true, labelWidth: '125px', width: '200px' },
  { bind: 'rename', label: 'Rename',
   type: 'text', required: true, labelWidth: '125px', width: '100px' },
  { bind: 'condition', label: 'Condition',
   type: 'text', required: true, labelWidth: '125px', width: '100px' },
  { bind: 'customer', label: 'Cust',
   type: 'text', required: true, labelWidth: '125px', width: '50px' },
  { bind: 'procgroup', label: 'Proc Group',
   type: 'text', required: true, labelWidth: '125px', width: '200px' },
  { bind: 'processs', label: 'Process',
   type: 'text', required: true, labelWidth: '125px', width:...