<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource:ej.DataManager(shipDetails),
allowPaging :true,
columns: [
{
field: "ShipName", width: 100, filterBarTemplate: {
create: function (args) {
return "<input>"
},
write: function (args) {
var data = ej.DataManager(shipDetails).executeLocal(new ej.Query().select("ShipName"));
args.element.ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true, focusOut: ej.proxy(args.column.filterBarTemplate.read, this, args) });
},
read: function (args) {
var filterObject = {
value: args.element.val(),
field: "ShipName",
operator: (args.element.val() == ''|| args.element.val() == null)? "equal" : "startswith",
type: "string",
predicate: "and",
};
this.model.filterSettings.filteredColumns.push(filterObject);
this.refreshContent();
},
},
},
{ field: "ShipCity", headerText: "Ship City", width: 80 }
],
});
});
var shipDetails = [
{ ShipName: null, ShipCity: 'Brazil' },
{ ShipName: 'Ale', ShipCity: 'USA' },
{ ShipName: 'Ricardo Adocicados', ShipCity: 'Brazil' }
];
</script>
|