Filter

[pankaj.mahajan]

I want to implement filter, I have referred your example and arranged the code in that way but it is not working.
I am getting the data from server side using url:"ExpenseController".
Please Help.

Code: [Select]

$(function () {
    //var pqFilter = $.paramquery.pqFilter;
    var pqFilter = {
    search: function () {
    var txt = $("input.pq-filter-txt").val().toUpperCase(),
    colIndx = $("select#pq-filter-select-column").val(),
    DM = $grid.pqGrid("option", "dataModel");
            DM.filterIndx = colIndx;
            DM.filterValue = txt;
            $grid.pqGrid("refreshDataAndView");
        },
    render: function (ui) {
    var DM = ui.dataModel,
    rowData = ui.rowData,
    dataIndx = ui.dataIndx,
    val = rowData[dataIndx],
    txt = DM.filterValue;
    txtUpper = txt.toUpperCase(),
    valUpper = val.toUpperCase();
            if (dataIndx == DM.filterIndx) {
                var indx = valUpper.indexOf(txtUpper);
                if (indx >= 0) {
                    var txt1 = val.substring(0, indx);
                    var txt2 = val.substring(indx, indx + txt.length);
                    var txt3 = val.substring(indx + txt.length);
                    return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
                }
            }
            return val;
        }
    }
    //define colModel
    var colM = [{ title: "Report No", width: 100, dataType: "integer", dataIndx: "reportNo", render: function (ui) {return pqFilter.render(ui);},
                { title: "Visit No", width: 100, dataType: "integer", dataIndx: "visitNo" },
                { title: "Entry Date", width: 200, dataType: "date", dataIndx: "entryDate"},                       
                { title: "Total Amount", width: 150, dataType: "float", align: "right", dataIndx: "totalAmount" },
                { title: "Approval Date", width: 200, dataType: "date", dataIndx: "approvalDate"},
                { title: "Status", width: 150, dataType: "string", dataIndx: "status"}
             ];
    //define dataModel
    var dataModel = {
        location: "remote",
        sorting: "remote",
        paging: "remote",
        dataType: "JSON",
        method: "POST",
        curPage: 1,
        rPP: 20,
        sortIndx: 2,
        sortDir: "up",
        rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],
        filterIndx: "",
        filterValue: "",
        fields: ['reportNo', 'visitNo', 'entryDate', 'totalAmount', 'approvalDate', 'status'],
        getUrl: function () {
            var sortDir = (this.sortDir == "up") ? "asc" : "desc";
            var queryString = "cur_page=" + this.curPage + "&records_per_page=" +
                this.rPP + "&sortBy=" + this.fields[this.sortIndx] + "&dir=" + sortDir;
            if (this.filterIndx != null && this.fields[this.filterIndx]) {
                queryString += "&filterBy=" + this.fields[this.filterIndx] + "&filterValue=" + this.filterValue;
            }
            var obj = { url: "ExpenseController", data: queryString };
            return obj;
        },
        getData: function (dataJSON) {
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
        }
    }
    var obj = { width: 800, height: 400,
        dataModel: dataModel,
        colModel: colM,
        editable: false,
        title: "Shipping Orders",
        topVisible: true,
        resizable: true,
        columnBorders: true,
        freezeCols: 2
    };
    //obj.render = pqFilter.pqgridrender;
    //append the filter toolbar in top section of grid
 
    obj.render = function (evt, obj) {
        var $toolbar = $("<div class='pq-grid-toolbar pq-grid-toolbar-search'></div>").appendTo($(".pq-grid-top", this));
 
        $("<span>Filter</span>").appendTo($toolbar);
 
        $("<input type='text' class='pq-filter-txt'/>").appendTo($toolbar).keyup(function (evt) {
            if (evt.keyCode == 13) {
                pqFilter.search();
            }
        });
 
        $("<select id='pq-filter-select-column'>\
        <option value='0'>Ship Country</option>\
        <option value='1'>Customer Name</option>\
        </select>").appendTo($toolbar).change(function () {
            pqFilter.search();
        });
        $("<span class='pq-separator'></span>").appendTo($toolbar);
 
    };
    var $grid = $("#grid_filter").pqGrid(obj);
});