Messages

1

Help for ParamQuery Grid (free version) / Re: how to work with the column filter without invoking the listener action...

« 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.

2

Help for ParamQuery Grid (free version) / Re: how to work with the column filter without invoking the listener action...

« 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.

3

Help for ParamQuery Grid (free version) / how to work with the column filter without invoking the listener action...

« on: September 16, 2016, 09:16:19 am »

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...

4

Help for ParamQuery Grid (free version) / Re: MVC view rendering raw JSON and not the grid...

« on: September 01, 2016, 04:59:50 pm »

I am fairly certain that this is a NOOB issue and nothing to do with the pqgrid.

I just cannot understand how using the same method in this view as all the others (that are working just fine) would be causing such issue!  I am tearing it down and starting from scratch one more time before giving up completely!

5

Help for ParamQuery Grid (free version) / MVC view rendering raw JSON and not the grid...

« on: September 01, 2016, 01:45:47 am »

Hi all:

I have been using the free version of this grid for a little while and I love it...until today.   

I am trying to pump the json result from a controller method into the grid in another view in my app (as I've done in about 6 other instances without issue) , but this time, the json is the only thing rendered in the browser.  I've even gone so far as to copy a working instance of pqgrid into the view in question and it works just fine.  From here, I edit the grid declaration to meet the requirements of the view and BAM!, right back to square one with raw json.

Here's the code:

CONTROLLER (attempts):

public ActionResult <method name>(int id)
{

List<usp_ProcToReturnData_Result> d = db.usp_ProcToReturnData(id).ToList();
StringBuilder sb = new StringBuilder(@"{""data"":");

JavaScriptSerializer js = new JavaScriptSerializer();
String json = js.Serialize(d);
sb.Append(json);
sb.Append("}");

return this.Content(sb.ToString(), "text/text");

}

public JsonResult <method name>(int id)
{

try
{
var result = db.usp_ProcToReturnData(id).ToList();
return new JsonResult() {Data = result, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
catch
{
return new JsonResult() {Data = "", JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

}

VIEW:
...
<div class="row">
    <div id="grid_SchoolData"></div>
</div>
...

<script>...
    $(function () {
        var obj = {
            width: 580,
            height: 700,
            wrap: false,
            hwrap: false,
            editable: false,
            showTop: false,
            showBottom: false,
            collapsible: false,
            showHeader: true,
            resizable: true,
            columnBorders: true,
            rowBorders: true,
            flexHeight: true,
            virtualX: false,
            sortable: false,
            numberCell: { show: true },
            filterModel: { mode: "AND", header: true },
            scrollModel: { autoFit: true, pace: 'optimum' },
            selectionModel: { type: 'row', mode: 'single' },
            title: "Report Periods",
            colModel: [
                { title: "SchoolId", dataType: "integer", dataIndx: "SchoolId", hidden: true },
                { title: "SchoolName", dataType: "string", dataIndx: "SchoolName" },
                { title: "HasData", dataType: "integer", dataIndx: "HasData", hidden: true },
                {
                    title: "", editable: false, sortable: false, width: 100, align: "center", render: function (ui) {
                        var rowData = ui.rowData;
                        if (rowData['HasData'] === 1) {
                            return "<input type='image' src='../../images/glyphicon_refresh_200x200.png' onClick=\"location.href='/Admin/DeleteUploadedData/SchoolId=" + rowData.SchoolId + "&ReportPeriodId=" + rowData.ReportPeriodId + "';\" title='Reset Data' width='20' height='20'>";
                        }
                    }
                }
            ],
            dataModel: {
                dataType: "JSON",
                location: "remote",
                recIndx: "SchoolId",
                url: "/Admin/ResetUploadByReportPeriod/" + window.location.href.substring(window.location.href.lastIndexOf('/') + 1),
                getData: function (dataJSON) {
                    return { data: dataJSON };
                }
            },
            pageModel: { type: 'local', rPP: 50 }
        }

        var grid = $("#grid_SchoolData").pqGrid(obj);
       
    });

Please advise!

Thanks!

6

Help for ParamQuery Grid (free version) / Re: Manipulating buttons on the toolbar (or the toolbar itself)...

« on: August 09, 2016, 05:09:13 pm »

Thanks for the example!  I will be integrating it now.

7

Help for ParamQuery Grid (free version) / Re: Manipulating buttons on the toolbar (or the toolbar itself)...

« on: August 09, 2016, 03:59:00 pm »

Thank you for the reply.

I am trying to implement the conditional render, but need some guidance on where it should be done.  My initial approach was to use the render method within each toolbar item, but that did not work.  Then I tried to wrap the items in an if statement...also didn't work.

What would be the best approach here?  Forgive my lack of understanding.  Still trying to learn the tool.

Thanks

8

Help for ParamQuery Grid (free version) / Manipulating buttons on the toolbar (or the toolbar itself)...

« on: August 08, 2016, 06:22:27 pm »

Good day:

I am trying to display certain buttons on the toolbar depending on the user type that is logged into the application.  More specifically, if a user is an Admin, I would like to show all functions.  If they are a regular user, I would only like to display one function.

Can this be done as the grid is being defined or can it be done once the grid and its parts are defined?

Here is the code...

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: [
                        {
                            cls: 'btn btn-default',
                            style: 'padding: 6px',
                            type: 'button',
                            icon: 'ui-icon-plus',
                            label: '&nbsp;Add Student&nbsp;',
                            listeners: [
                              {
                                  "click": function (evt, ui) {
                                      var grid = $(this).closest('.pq-grid');
                                      addStudentRow();
                                  }
                              }
                            ]
                        },
                        {
                            cls: 'btn btn-default',
                            style: 'padding: 6px',
                            type: 'button',
                            icon: 'ui-icon-close',
                            label: '&nbsp;Clear Filter&nbsp;',
                            listeners: [
                              {
                                  "click": function (evt, ui) {
                                      var filter_id = '';
                                      var id = 0;
                                      id = @(Url.RequestContext.RouteData.Values["id"] == null ? 0 : Url.RequestContext.RouteData.Values["id"]);
                                      if( id > 0 ) { filter_id = id; }
                                      var grid = $(this).closest('.pq-grid');
                                      // Clear out the filter criteria fields
                                      var $search_row = $("tr[class='pq-grid-header-search']");
                                      $search_row.find("input[name='SchoolName']").val('');
                                      $search_row.find("input[name='FirstName']").val('');
                                      $search_row.find("input[name='LastName']").val('');
                                      $search_row.find("input[name='Grade']").val('');
                                      $search_row.find("input[name='Suspension']").val('');
                                      $search_row.find("input[name='TotalAbsense']").val('');
                                      $search_row.find("input[name='ExcusedAbsense']").val('');
                                      $search_row.find("input[name='UnExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastTwoWeeksExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastTwoWeeksUnExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastFourWeeksExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastFourWeeksUnExcusedAbsense']").val('');
                                      // Now clear the filters
                                      grid.pqGrid("filter", {
                                          oper: 'replace',
                                          data: [
                                              { dataIndx: 'StudentId', condition: 'contain', value: "" },
                                              { dataIndx: 'HomeSchoolId', condition: 'contain', value: "" },
                                              { dataIndx: 'ServicingSchoolId', condition: 'contain', value: "" },
                                              { dataIndx: 'SchoolName', condition: 'equal', value: "" },
                                              { dataIndx: 'FirstName', condition: 'contain', value: "" },
                                              { dataIndx: 'LastName', condition: 'contain', value: "" },
                                              { dataIndx: 'Grade', condition: 'contain', value: "" },
                                              { dataIndx: 'Suspension', condition: 'contain', value: "" },
                                              { dataIndx: 'TotalAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'ExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'UnExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastTwoWeeksExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastTwoWeeksUnExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastFourWeeksExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastFourWeeksUnExcusedAbsense', condition: 'contain', value: "" }
                                          ]
                                      });
                                  }
                              },
                            ]
                        },
                        {
                            cls: 'btn btn-default',
                            style: 'padding: 6px',
                            type: 'button',
                            icon: 'ui-icon-document',
                            label: '&nbsp;Print/Export&nbsp;',
                            listeners: [
                                {
                                    "click": function (evt) {
                                        $("#grid_students").pqGrid("exportExcel", {url: window.location.origin + "/Home/excel",sheetName: "Student Data" });
                                    }
                                }
                            ]
                        }
                    ]
            },
... (there's a lot more to the grid, just cutting it off at this point to be succinct)

How can I display select toolbar items given a specific condition?  is there If Then logic that can be used (like in the colModel)?

Please advise.

Thanks!

9

Help for ParamQuery Grid (free version) / Re: render function in pqGrid not behaving properly...

« on: August 08, 2016, 06:14:14 pm »

Many thanks!!!  That was exactly the issue.

This is one of the best tools I've ever used!  Powerful!

Have a good one!

10

Help for ParamQuery Grid (free version) / render function in pqGrid not behaving properly...

« on: August 08, 2016, 05:48:11 pm »

Good day, all:

I am trying to use the render function to display an imagebutton in a column given a value returned in each data row (much like the example given on the demo site with the up and down arrows).  I am evaluating whether a column's value equals one of two values; if the value is 1, then display the image button, if it's 0 (zero), display nothing.  The problem is that either all rows get an image button or none of them do, depending on how I write the condition.  Here is the code:

$(function () {
        var obj = {
            width: 580,
            height: 700,
            wrap: false,
            hwrap: false,
            editable: false,
            showTop: false,
            showBottom: false,
            collapsible: false,
            showHeader: true,
            resizable: true,
            columnBorders: true,
            rowBorders: true,
            flexHeight: true,
            virtualX: false,
            sortable: false,
            numberCell: { show: true },
            filterModel: { mode: "AND", header: true },
            scrollModel: { autoFit: true, pace: 'optimum' },
            selectionModel: { type: 'row', mode: 'single' },
            title: "Report Periods",
            colModel: [
                { title: "ReportPeriodId", dataType: "integer", dataIndx: "ReportPeriodId", hidden: true },
                { title: "Report Date", width: 75, dataType: "string", dataIndx: "ReportPeriodName" },
                { title: "Date Span", width: 75, dataType: "string", dataIndx: "ReportPeriodDtSpan" },
                { title: "Upload Available", dataType: "integer", dataIndx: "UploadAvailable" },
                {
                    title: "", editable: false, sortable: false, width: 100, align: "center", render: function (ui) {
                        var rowData = ui.rowData;
                        if (rowData[3] = 1) { 
                            return "<input type='image' src='../../images/1450567121_editor-pencil-pen-edit-write-glyph.ico' onClick=\"location.href='..." + rowData.ReportPeriodId + "';\" title='Edit Info' width='20' height='20'>";
                        }
                        else
                        {
                            return "";
                        }
                    }
                }
            ],
            dataModel: {
                dataType: "JSON",
                location: "remote",
                recIndx: "ReportPeriodId",
                url: "/Home/ReportPeriodsByAcademicYear",
                getData: function (dataJSON) {
                    return { data: dataJSON.data };
                }
            },
            pageModel: { type: 'local', rPP: 20 }
        }

        var grid = $("#grid_ReportPeriods").pqGrid(obj);
        //var colM = grid.pqGrid("option", "colModel");

        //grid.pqGrid("option", "colModel", colM);
        //grid.pqGrid('refreshDataAndView');
    });

I am following the demo exactly and I've used the developer tools in Chrome to debug.  I have viewed what is being returned for 'rowData' and I can see the value in the array I want to evaluate, but it doesn't work.

Please advise.

Sincere thanks!