Html Grid

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

by txhi

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>
<div id="scheduler"></div>

JavaScript

var appointments = new Array();

var appSTART = "2018-08-03 09:00";
var appEND = "2018-08-03 16:00";

var appointment6 = {
  id: "1",
  description: "",
  location: "",
  subject: "APPOINTMENT NUMBER 1",
  calendar: "Room 1",
  start: appSTART,
  end: appEND
}

appointments.push(appointment6);


// prepare the data
var source =
    {
      dataType: "array",
      dataFields: [
        { name: 'id', type: 'string' },
        { name: 'description', type: 'string' },
        { name: 'location', type: 'string' },
        { name: 'subject', type: 'string' },
        { name: 'calendar', type: 'string' },
        { name: 'resizable', type: 'boolean' },
        {
          name: 'start', type: 'date',
          format: "yyyy-MM-dd HH:mm"
        },
        {
          name: 'end', type: 'date',
          format: "yyyy-MM-dd HH:mm"
        }
      ],
      id: 'id',
      localData: appointments
    };
var adapter = new $.jqx.dataAdapter(source);

$("#scheduler").jqxScheduler({
  date: new $.jqx.date(2018, 07, 03),
  //width: getWidth("Scheduler"),
  height: 600,
  source: adapter,
  showLegend: true,
  ready: function () {
    $("#scheduler").jqxScheduler('ensureAppointmentVisible', '1');
  },
  resources:
  {
    colorScheme: "scheme05",
    dataField: "calendar",
    source:  new $.jqx.dataAdapter(source)
  },
  appointmentDataFields:
  {
    from: "start",
    to: "end",
    id: "id",
    description: "description",
    location: "place",
    subject: "subject",
    resourceId: "calendar",
    resizable: 'resizable'
  },
  view: 'weekView',
  views:
  [
    'dayView',
    'weekView',
    'monthView'
  ]
});