Author Topic: how to work with the column filter without invoking the listener action...  (Read 2710 times)

onyxplyr

  • Newbie
  • *
  • Posts: 10
    • View Profile
I am using PQGrid in an MVC app that makes use of column filters.  More specifically, a dropdown list filter that listens for a change in selected value.  When a new value is selected, an ajax call is triggered and the filter is appended to my SQL query on the server side (exactly as prescribed in the demo for Filters --> Remote Filter).  The raw filter info being sent back to the server from the grid looks like this:

"{\"mode\":\"AND\",\"data\":[{\"dataIndx\":\"ObjectName\",\"value\":\"<text goes here>\",\"condition\":\"equal\",\"dataType\":\"string\",\"cbFn\":\"\"}]}"

This string gets sent to the server to be deserialized and then used to construct the query predicate (per the PQGrid Filter documentation).

I am trying to re-create this output for another method that is triggered by a different event in the DOM.  I've tried to create a JSON object one the event is fired that replicates the string above, but it does not work.  It generates an "Invalid JSON primitive" error.

Rather than re-create the wheel, I believe there is a way to get the column filter object and values that behaves exactly as the built-in.  Here's what I've tried:

var colM = $("#grid_students").pqGrid("option", "colModel");
(test 1) var filter = colM[3].filter;
(test 2) var filter = colM[3].filter.value;

I've tried to send the entire object, but it's entirely too much (this can be seen in Chrome developer tools pretty clearly).  I've also tried getting the currently selected value of the filter and alter the LINQ query to no avail.

Please advise.

Here is how the grid is defined:

 var obj = {
            width: 1200,
            height: 800,
            wrap: false,
            hwrap: false,
            editable: false,
            showTop: true,
            showBottom: true,
            collapsible: false,
            showHeader: true,
            resizable: true,
            columnBorders: true,
            rowBorders: true,
            flexHeight: false,
            virtualX: false,
            sortable: true,
            numberCell: { show: true },
            filterModel: { mode: "AND", header: true },
            scrollModel: { autoFit: true, pace: 'optimum' },
            selectionModel: { type: 'row', mode: 'single' },
            toolbar: {
                items: items
            },
            colModel: columns...

onyxplyr

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: how to work with the column filter without invoking the listener action...
« Reply #1 on: September 16, 2016, 05:46:48 pm »
I re-read what I first submitted on this one and I feel it is a bit unclear what I'm asking.

what I am interested in learning is how the grid passes the filter object to the server side and what I must do to replicate it.

onyxplyr

  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: how to work with the column filter without invoking the listener action...
« Reply #2 on: September 17, 2016, 02:15:22 am »
I meant to show this code earlier...

        var colM = $("#grid_students").pqGrid("option", "colModel");
        var fltr = $("#grid_students").pqGrid("option", "filterModel");
        var filter = colM[3].filter;
        var fMode = fltr.mode;
        var pq_filter = {
            "mode": fMode,
            "data": [{
                "dataIndx": colM[3].dataIndx,
                "value": filter.value,
                "condition": filter.condition,
                "dataType": colM[3].dataType,
                "cbFn": ""
            }]
        };

        alert(JSON.stringify(pq_filter));
        $.ajax({
            url: window.location.origin + "/Students/printStudentGrid/",
            type: "POST",
            data: JSON.stringify(pq_filter),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (response) {
                showFailMessage(response.responseText, 'Generate Template Failed!');
                //alert(response.responseText);
            },
            success: function (data) {
                //alert(JSON.stringify(data));
                var response = JSON.parse(JSON.stringify(data));
                window.location = '/Students/Download?fileGuid=' + response.FileGuid + '&fileName=' + response.FileName;
                //showSuccessMessage("Success!", 'Success!');
            }
        });
    }

In the tools, the json object looks exactly like the one that gets passed natively...still not working.  See the attached image.

Thanks.