Grid with custom filteritems, initial filter and virtual mode

[CarelNelParticipant]

I am attempting to create a grid on an MVC Razor page that the showfilterrow option enabled and handles all processing server-side. For some of the columns I want custom list items. These list items also need to be retrieved from the server.

Then, I want to apply an initial filter to some of the columns. This initial filter is not working since one of the parameters in the QueryString is: undefinedoperator=and

I gave a much more detailed description here: href=”http://stackoverflow.com/questions/29544452/jqwidgets-jqxgrid-with-custom-filteritems-initial-filter-and-server-side-proces

Below, I’ll just list all my JavaScript for the grid creation:

var complaintTypes = new Array();
var complaintTypesFiltergroup = new $.jqx.filter();
var directorates = new Array();
var directoratesFiltergroup = new $.jqx.filter();
var investigationOfficers = new Array();
var outcomeTypes = new Array();

$(document).ready(function () {

    $.ajax({
        method: "GET",
        dataType: "json",
        async: false,
        url: "@Url.Action("GetFilterItems", new { id = Model })"
    }).done(function (data) {
        console.log(data);

        for (var i = 0; i < data.length; i++) {
            if (data[i].Type === "ComplaintType") {
                complaintTypes.push(data[i].Name);

                if (data[i].Selected) {
                    var filter = complaintTypesFiltergroup.createfilter('stringfilter', data[i].Name, 'EQUAL');
                    complaintTypesFiltergroup.addfilter(1, filter);
                    console.log(filter);
                }
            }
            else if (data[i].Type === "Directorate") {
                directorates.push(data[i].Name);

                if (data[i].Selected) {
                    var filter = directoratesFiltergroup.createfilter('stringfilter', data[i].Name, 'EQUAL');
                    directoratesFiltergroup.addfilter(1, filter);
                    console.log(filter);
                }
            }
            else if (data[i].Type === "InvestigationOfficer") {
                investigationOfficers.push(data[i].Name);
            }
            else if (data[i].Type === "OutcomeType") {
                outcomeTypes.push(data[i].Name);
            }
        }

    }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
    })
});

var relatedCasesSource =
   {
       dataType: 'json',
       dataFields: [
           { name: 'CaseID', type: 'number' },
           { name: 'CaseNumber', type: 'string' },
           { name: 'InvestigationStartDate', type: 'Date' },
           { name: 'ComplaintTypeName', type: 'string' },
           { name: 'ComplainantName', type: 'string' },
           { name: 'DirectorateName', type: 'string' },
           { name: 'CurrentInvestiatingOfficer', type: 'string' },
           { name: 'OutcomeType', type: 'string' }
       ],
       id: 'CaseID',
       url: '@Url.Action("SearchRelatedCases", new { id = Model })',
       sort: function () {
           // update the grid and send a request to the server.
           $("#RelatedCasesGrid").jqxGrid('updatebounddata');
       },
       filter: function () {
           // update the grid and send a request to the server.
           $("#RelatedCasesGrid").jqxGrid('updatebounddata', 'filter');
       }
   };

var relatedCasesAdapter = new $.jqx.dataAdapter(relatedCasesSource, {
    downloadComplete: function (data) {
        relatedCasesSource.totalrecords = data.TotalRows;
    }
});

$("#RelatedCasesGrid").jqxGrid({
    width: '100%',
    autoHeight: true,
    source: relatedCasesAdapter,
    theme: 'CCtIntranet',
    showfilterrow: true,
    filterable: true,
    pageSize: 10,
    editable: false,
    sortable: true,
    altRows: true,
    selectionMode: 'none',
    pageable: true,
    columnsResize: true,
    enabletooltips: true,
    virtualmode: true,
    rendergridrows: function () {
        return relatedCasesAdapter.records;
    },
    columns: [
        {
            text: 'Case number',
            dataField: 'CaseNumber',
            cellclassname: "dataTableCells",
            filtertype: 'input',
            cellsRenderer: function (row, column, value, rowData) {

                return "<a href=@Url.Content("~/ManageCase/Index/")" + rowData.CaseID + ">" + value + "</a>";
            }
        },
        { text: 'Complaint type', dataField: 'ComplaintTypeName', cellclassname: "dataTableCells", filtertype: 'checkedlist', filteritems: complaintTypes, filter: complaintTypesFiltergroup },
        { text: 'Complainant', dataField: 'ComplainantName', cellclassname: "dataTableCells", filtertype: 'input' },
        { text: 'Directorate', dataField: 'DirectorateName', cellclassname: "dataTableCells", filtertype: 'checkedlist', filteritems: directorates, filter: directoratesFiltergroup },
        { text: 'Investiating Officer', dataField: 'CurrentInvestiatingOfficer', cellclassname: "dataTableCells", filtertype: 'checkedlist', filteritems: investigationOfficers },
        { text: 'Outcome', dataField: 'OutcomeType', cellclassname: "dataTableCells", filtertype: 'checkedlist', filteritems: outcomeTypes },
        { text: 'Start date', dataField: 'InvestigationStartDate', cellclassname: "dataTableCells", cellsformat: 'yyyy-MM-dd', filtertype: 'range' }
    ]
});

[DimitarParticipant]

Hello CarelNel,

Please move your grid initialization code to $(document).ready(), too, preferably in the Ajax done callback, after the filter objects’ definitions. You can also apply initial filters in the grid’s ready callback as an alternative (demo). Finally, make sure you are using the latest version of jQWidgets (3.7.1).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts