jsGrid data not showing after adding select box

1.2k Views Asked by At

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.

1

There are 1 best solutions below

6
On

Possibly, removing "," from "readOnly: false," in third field definition can help.