Html Grid

Set the filtermode 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>
<div id='sampleForm' style="width: 400px; height: auto;"></div>

JavaScript

var citiesTX = [
	"Houston",
  "San Antonio",
  "Dallas",
  "Austin"
];
var citiesNY = [
	"New York",
  "Buffalo",
  "Rochester",
  "Yonkers"
];
var template = [
	{
  	name: 'state',
    bind: 'state',
    type: 'option',
    label: 'State',
    required: true,
    labelWidth: '80px',
    width: '250px',
    component: 'jqxDropDownList',
    options: [
      { value: 'New York'},
      { value: 'Texas'}
    ]
  },
  {
  	name: 'city',
    bind: 'city',
    type: 'custom',
    label: 'City',
    required: true,
    labelWidth: '80px',
    width: '250px',
    init: function (component) {
      var options = [
        { value: 'California' },
        { value: 'New York'},
        { value: 'Oregon'},
        { value: 'Illinois'},
        { value: 'Texas'}
      ];

      component.jqxComboBox({
        width: 250,
        height: 30,
        source: citiesTX,
        placeHolder: "Choose city"
      });
      
      // Native binding to the "change" event of the jqxComboBox when using "init" callback
      component.on("change", function (event) {
      	console.log("change");
      });
    }
  }  
];
var sampleValue = {
  city: 'San Antonio',
  state: 'Texas'
};
var sampleForm = $('#sampleForm').jqxForm({
  template: template,
  value: sampleValue,
  padding: { left: 10, top: 10, right: 10, bottom: 10 }
});

sampleForm.on('formDataChange', function (event) {
//debugger;

	var args = event.args;
	var newValue = args.value;
	var previousValue = args.previousValue;

	for (var key in newValue) {
		var newInputValue = newValue[key]; // current input's value.
		var previousInputValue = previousValue[key]; // previous input's value.    
    if (newInputValue !== previousInputValue && key === "state") {
    	var combobox = sampleForm.jqxForm('getComponentByName', 'city');      
      if (newInputValue === "New York") {
      	combobox.jqxComboBox({ source: citiesNY });
      } else {
      	combobox.jqxComboBox({ source: citiesTX });
      }
    }
	}  
});