My aim is to add select box in my grid system, and I get success to add select box following the below code.
But after adding select box my other data is not showing up, when I do search from my dropdown filter it is showing data.
$("#jsGrid").jsGrid({
height: 480,
width: "100%",
filtering: true,
editing: false,
sorting: true,
paging: true,
autoload: true,
clearFilterButton: true,
pageSize: 10,
pageButtonCount: 10,
controller: {
loadData: function(filter) {
criteria = filter;
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "myURL",
dataType: "json"
}).done(function(response) {
var res = [];
if (criteria.component !== "") {
response.forEach(function(element) {
if (element.component.indexOf(criteria.component) > -1) {
res.push(element);
response = res;
}
}, this);
} else res = response;
if (criteria.titleLong !== "") {
res = [];
response.forEach(function(element) {
if (element.titleLong.indexOf(criteria.titleLong) > -1)
res.push(element);
}, this);
} else res = response;
data.resolve(res);
});
return data.promise();
}
},
fields: [{
name: "component",
type: "textarea",
width: 150
}, {
name: "Id",
type: "text",
width: 50
}, {
name: "titleLong",
type: "select",
align: "center", // center text alignment
autosearch: true, // triggers searching when the user changes the selected item in the filter
items: ["", "A", "B", "C"], // an array of items for select
valueField: "", // name of property of item to be used as value
textField: "", // name of property of item to be used as displaying value
selectedIndex: -1, // index of selected item by default
valueType: "string", // the data type of the value
readOnly: false, // a boolean defines whether select is readonly (added in v1.4)
}, {
name: "unit",
type: "textarea",
width: 150
}, {
name: "descr",
type: "textarea",
width: 150
}]
});
So My aim is to display all the data on Page load and if someone perform search using select filter show it related data of the performed search.
Possibly, removing "," from "readOnly: false," in third field definition can help.