Search code examples
javascriptjquerysharepointfilterjqgrid

jqGrid filterToolbar only works with some columns

When I try searching for the string Test in the column "Erstellt Von", I get no results. There's no error in the console either.

enter image description here

enter image description here

This is the codepart I used:

var colUserTemplate = {
    width: 160, align: 'left',
    formatter: function (cellvalue, options, rowObject) {
        return "Test";
    }
}

In another column, the filtering works perfectly fine:

enter image description here

Here's how grids are loaded and the filterToolbar:

function loadGrid(listname, query, divname, colnames, colmdodel, showFilter, showExcelExport) {

    $("#" + divname).jqGrid({
        datatype: function () { loadGridData(listname, query, divname); },
        colNames: colnames,
        colModel: colmdodel,
        height: "100%",
        loadonce: true,
        rowNum: 9999,
        gridComplete: function () {
            $("#" + divname + "no").html(" [" + $("#" + divname).jqGrid('getGridParam', 'records') + "]");
            $("#" + divname).jqGrid('setGridParam', { datatype: 'local' });
        },
        ondblClickRow: function (rowid, iRow, iCol, e) {
            onDoubleClickGrid(rowid, iRow, iCol, e, divname, listname);
        }
    });

    if (showFilter) {
        $("#" + divname).jqGrid('filterToolbar', {
            autosearch: true,
            stringResult: false,
            searchOnEnter: true,
            defaultSearch: "cn",
        });
    }
}

I tried using

if (showFilter) {
    $("#" + divname).jqGrid('filterToolbar', {
        autosearch: true,
        stringResult: true,
        searchOnEnter: true,
        defaultSearch: "cn", ignoreCase: true
    });
}

but it didn't change anything.

If you want to have a look, here's the full code.

Been trying to fix this issue for hours, so any help is appreciated!

EDIT:

When writing this:

var thegrid = $("#" + divname)[0];
console.log("data.d.results: " + data.d.results);
thegrid.addJSONData(data.d.results); //Binding data to the grid
console.log("thegrid:" + thegrid.innerHTML);

I get the following result: enter image description here

Here's the expanded object:

enter image description here

Solution

  • You use a function to load the data:

    function loadGridData(listname, query, divname) {

$.ajax({
    url: "/tools/AKG/_api/web/lists/getbytitle('" + listname + "')/Items?" + query,
    type: "GET",
    headers: { "Accept": "application/json;odata=verbose" },
    success: function (data, textStatus, xhr) {
        var thegrid = $("#" + divname)[0];
        thegrid.addJSONData(data.d.results); //Binding data to the grid
    },
    error: function (xhr, textStatus, errorThrown) {
        alert("error:" + JSON.stringify(xhr));
        $('#' + divname + 'records').html(" [0]");
    }
});
}

    In the success function data.d.results contain your grid data. Before to put this data in addJSONData loop over that column and change its value or better do it at server if possible