Clear custom field filter
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>
JavaScript
var users = ["John", "Jane", "Joe", "Jane"];
//userfield for user
var UserField = function (config) {
jsGrid.Field.call(this, config);
};
UserField.prototype = new jsGrid.Field({
//properties
editing: false,
validate: "required",
//templates
insertTemplate: function (value) {
return this._insertControl = $("<Input type ='text'>").autocomplete({
source: users
});
},
filterTemplate: function (value) {
return this._filterControl = $("<Input type ='text'>").autocomplete({
source: users
});
},
insertValue: function () {
return this.insertTemplate.val();
},
filterValue: function (val) {
return 'Otto;'
}
});
//define
jsGrid.fields.user = UserField;
var clients = [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];
var countries = [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
filtering: true,
sorting: true,
paging: true,
autoload: true,
controller: {
loadData: function () {
return clients;
}
},
fields: [
{ name: "Name", type: "text", width: 150,...