Author Topic: Filter and Sort not working with Virtual Scroll  (Read 219 times)

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Filter and Sort not working with Virtual Scroll
« on: November 04, 2022, 12:19:48 pm »
We are using Virtual Scroll to support a table with about 5000+ rows, to filter + sort, and display data. While doing so we were able to display the data via remote and call new data using virtual scroll.

Link: https://paramquery.com/pro/demos/virtual_scroll

We are currently facing an issue in sending sorting and filtering requests from the table.

We are not being able to fetch the value we have filled in the filter header, or the sorting direction clicked by the user because of which we are not being able to pass the filter/sort instruction to the server.

I have attached the aspx and cs file with web method

Kindly guide us how this can be fixed.

---- paramquery-gridv7.aspx

Code: [Select]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="paramquery-gridv7.aspx.cs" Inherits="paramquery_gridv7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/include/style_sheet.css?v=1.0.5" />
    <link rel="stylesheet" href="/pq-grid/jquery-ui-1.11.4.custom/jquery-ui.min.css" />
    <script src="/pq-grid/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
    <script src="/pq-grid/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
    <style>
        .pq-grid, .pq-grid * {
            box-sizing: content-box;
        }

            .pq-grid table {
                border-collapse: separate;
            }
    </style>

    <script src="/pq-grid/jszip-2.5.0/jszip.min.js"></script>
    <script src="/pq-grid/jquery-ui-touch-punch/touch-punch/touch-punch.min.js"></script>

    <!--pqSelect-->
    <link rel="Stylesheet" href="/pq-grid/pqselect/trial/pqselect.min.css" />
    <script src="/pq-grid/pqselect/trial/pqselect.min.js"></script>

    <link rel="stylesheet" href="/pq-grid/Content/css3.5.1/pqgrid.min.css" />
    <link rel="stylesheet" href="/pq-grid/Content/css3.5.1/pqgrid.ui.min.css" id="pqgrid_ui_link" />
    <link rel="stylesheet" href="/pq-grid/Content/css3.5.1/themes/steelblue/pqgrid.css" id="pqgrid_office_link" />

    <script src="/pq-grid/Content/js3.5.1/pqgrid.min.js"></script>
</head>
<body>

    <script class="ppjs">
        $(function () {
            var pqVS = {
                rpp: 10, //records per page.
                init: function () {
                    this.totalRecords = 0;
                    this.requestPage = 1; //begins from 1.
                    this.data = [];
                }
            };
            pqVS.init();

            var obj = {
                scrollModel: {
                    autoFit: true
                },
                numberCell: { width: 60 },
                title: "Virtual Scrolling",
                virtualX: true,
                virtualY: true,
                resizable: true,
                filterModel: { on: true, header: true, type: 'remote' },
                sortModel: { type: 'remote', sorter: [{ dataIndx: 'Symbol', dir: 'up' }] },
                beforeSort: function (evt) {
                    if (evt.originalEvent) {//only if sorting done through header cell click.
                        pqVS.init();
                    }
                },
                beforeTableView: function (evt, ui) {

                    var initV = ui.initV,
                        finalV = ui.finalV,
                        data = pqVS.data,
                        rpp = pqVS.rpp,
                        requestPage;

                    if (initV != null) {

                        //if records to be displayed in viewport are not present in local cache,
                        //then fetch them from remote database/server.

                        if (data[initV] && data[initV].pq_empty) {
                            requestPage = Math.floor(initV / rpp) + 1;
                        }
                        else if (data[finalV] && data[finalV].pq_empty) {
                            requestPage = Math.floor(finalV / rpp) + 1;
                        }

                        if (requestPage >= 1) {
                            if (pqVS.requestPage != requestPage) {

                                pqVS.requestPage = requestPage;

                                //initiate remote request.                       
                                this.refreshDataAndView();
                            }
                        }
                    }
                }
            };
            obj.colModel = [
                //{
                //    title: "Company", dataIndx: 'company',
                //    filter: {
                //        condition: 'begin',
                //        listeners: [{
                //            'change': function () {
                //                pqVS.init();

                //                var $grid = $(this).closest(".pq-grid");
                //                $grid.pqGrid('filter', {
                //                    oper: 'replace',
                //                    data: [{ dataIndx: 'company', value: $(this).val() }]
                //                });
                //            }
                //        }],
                //        type: 'textbox',
                //        value: 'C', on: true
                //    }
                //},
                //{ title: "Notes", dataIndx: 'notes' },
                //{ title: "Revenues", dataType: "float", dataIndx: 'revenue', format: '#,###.00' },
                //{ title: "Profit", dataType: "float", dataIndx: 'profits', format: '#,###.00' }

                { title: "#", width: 100, dataIndx: "inRowIndex", align: "center" },
                { title: "Exchange", width: 130, dataIndx: "Exchange" },
                {
                    title: "Symbol", width: 190, dataIndx: "Symbol",
                    filter: {
                        condition: 'begin',
                        listeners: [{
                            'change': function () {
                                pqVS.init();

                                var $grid = $(this).closest(".pq-grid");
                                $grid.pqGrid('filter', {
                                    oper: 'replace',
                                    data: [{ dataIndx: 'Symbol', value: $(this).val() }]
                                });
                            }
                        }],
                        type: 'textbox',
                        value: 'ACC', on: true
                    }
                },
                { title: "Type", width: 100, dataIndx: "OrderType", align: "center" },
                { title: "B/S", width: 100, dataIndx: "BuySell", align: "center" },
                { title: "O. Qty", width: 100, dataIndx: "Qty", align: "right" },
                { title: "P. Qty", width: 100, dataIndx: "QtyRemaining", align: "right" },
                { title: "Price", width: 100, dataIndx: "OrderPrice", align: "right" },
                { title: "Status", width: 100, dataIndx: "OrderStatus" },
                { title: "Time", width: 100, align: "right", dataIndx: "stCreationTime" },
                { title: "Row Index", width: 120, dataIndx: "OrderUID" }
            ];

            obj.dataModel =
            {
                //method: "GET",
                location: "remote",
                //contentType: "application/json; charset=utf-8",
                beforeSend: function (jqXHR, settings)
                {
                    console.log(settings.url);
                    jqXHR.setRequestHeader("Content-Type", "application/json");
                },

                getUrl: function ()
                {
                    debugger;
                    //console.log("pq_sort: " + this.sortIndx);
                   // console.log("pq_filter: " + obj.filter.pq_filter);

                    var sortDir = (pqVS.sortDir == "up") ? "asc" : "desc";
                    var sort = ['inRowIndex', 'Exchange', 'Symbol', 'OrderType', 'BuySell', 'Qty', 'QtyRemaining', 'OrderPrice', 'OrderStatus', 'stCreationTime', 'OrderUID'];

                    var loData = 'fsSymbol=&pq_datatype="JSON"&pq_filter=""&pq_sort=""&pq_curpage=' + pqVS.requestPage + '&pq_rpp=' + pqVS.rpp;
                    //alert("1a");
                    return {
                        //url: "jquerygrid.aspx/GetCustomers", data: "cur_page=" + this.curPage + "&records_per_page=" + this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir
                        url: "/paramquery-gridv7.aspx/getOrders",
                        data: loData
                        //postData: function () {
                        //    return {
                        //        pq_datatype: "JSON",
                        //        pq_filter: "",
                        //        pq_sort: "",
                        //        pq_curpage: pqVS.requestPage,
                        //        pq_rpp: pqVS.rpp
                        //    };
                        //}
                    };
                },

                getData: function (response) {
                    var response = $.parseJSON(response.d);
                    //debugger;
                    //console.log("pqVS.requestPage: " + pqVS.requestPage);
                    //console.log("response.curPage: " + response.curPage);
                    var data = response.data,
                        totalRecords = response.totalRecords,
                        len = data.length,
                        curPage = response.curPage,
                        pq_data = pqVS.data,
                        init = (curPage - 1) * pqVS.rpp;

                    if (!pqVS.totalRecords) {
                        //first time initialize the rows.
                        for (var i = len; i < totalRecords; i++) {
                            pq_data[i + init] = { pq_empty: true };
                        }
                        pqVS.totalRecords = totalRecords;
                    }
                    for (var i = 0; i < len; i++) {
                        pq_data[i + init] = data[i];
                        pq_data[i + init].pq_empty = false;
                    }
                    return { data: pq_data }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //debugger;
                    if (jqXHR.statusText != "abort")
                        alert(jqXHR.responseText);
                }
            };

            //obj.dataModel = {
            //    dataType: "JSON",
            //    location: "remote",
            //    //url: "https://paramquery.com/pro/infiniteData",
            //    url: "paramquery-gridv7.aspx/getOrders",
            //    postData: function () {
            //        return {
            //            pq_curpage: pqVS.requestPage,
            //            pq_rpp: pqVS.rpp
            //        };
            //    },
            //    getData: function (response) {
            //        //debugger;
            //        var data = response.data,
            //            totalRecords = response.totalRecords,
            //            len = data.length,
            //            curPage = response.curPage,
            //            pq_data = pqVS.data,
            //            init = (curPage - 1) * pqVS.rpp;

            //        if (!pqVS.totalRecords) {
            //            //first time initialize the rows.
            //            for (var i = len; i < totalRecords; i++) {
            //                pq_data[i + init] = { pq_empty: true };
            //            }
            //            pqVS.totalRecords = totalRecords;
            //        }
            //        for (var i = 0; i < len; i++) {
            //            pq_data[i + init] = data[i];
            //            pq_data[i + init].pq_empty = false;
            //        }
            //        return { data: pq_data }
            //    },
            //    error: function (jqXHR, textStatus, errorThrown) {
            //        //alert(errorThrown);
            //    }
            //};

            $("#grid_infinite").pqGrid(obj);
        });
    </script>

    <form id="form1" runat="server">
        <div>
            <div id="grid_infinite"></div>
        </div>
    </form>
</body>
</html>

--- paramquery-gridv7.aspx.cs

Code: [Select]
using MongoDB.Bson;
using MongoDB.Bson.IO;
using System;
using System.Collections.Generic;
using System.IO.Compression;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class paramquery_gridv7 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod(EnableSession = true), ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
    public static string getOrders(string fsSymbol, string pq_datatype, string pq_filter, string pq_sort, int pq_curpage, int pq_rpp)
    {
        //HttpContext.Current.Response.AppendHeader("Content-encoding", "gzip");
        //HttpContext.Current.Response.Filter = new GZipStream(HttpContext.Current.Response.Filter, CompressionMode.Compress);

        string lsOrders = string.Empty;
        int liUserID = CommonFunction.getActiveSessionUserID();

        List<MTOrders> loOrderList = GlobalData.moOrders.Take(100).ToList();
        loOrderList = loOrderList.Where(p => p.inCreatedBy == liUserID &&
            ((p.dtCreatedOn >= CommonFunction.GetISTDateTime().Date) || p.dtModifiedOn >= CommonFunction.GetISTDateTime().AddSeconds(-10))).ToList();

        SRCWorkspaceOutput loAllOrders = new SRCWorkspaceOutput();
        List<dynamic> loOrdersByFilter = new List<dynamic>();

        if (loOrderList != null && loOrderList.Count > 0)
        {           
            foreach (MTOrders loItem in loOrderList.OrderBy(p => p.inRowIndex))
            {
                loOrdersByFilter.Add(new SRCOrderBook
                {
                    inRowIndex = loItem.inRowIndex,
                    Exchange = loItem.InstrumentInfo.Exchange,
                    Symbol = loItem.InstrumentInfo.Symbol,
                    OrderType = loItem.OrderType.ToString(),
                    BuySell = loItem.BuySell.ToString(),
                    Qty = loItem.Qty,
                    QtyRemaining = loItem.QtyRemaining,
                    OrderPrice = loItem.OrderPrice,
                    OrderStatus = (char)loItem.OrderStatus,
                    stCreationTime = loItem.stCreationTime,
                    OrderUID = loItem._id.ToString(),
                });
            }

            //if (fiExchange != 0)
            //{
            //    string lsExchange = "NSECM";
            //    if (fiExchange == 3)
            //        lsExchange = "BSE";
            //    else if (fiExchange == 2)
            //        lsExchange = "FNO";

            //    loOrderList = loOrderList.Where(p => p.InstrumentInfo.Exchange == lsExchange).ToList();
            //}

            //if (!string.IsNullOrEmpty(fsSymbol))
            //    loOrderList = loOrderList.Where(p => p.InstrumentInfo.Symbol == fsSymbol).ToList();

            //if (fiStatus != 0)
            //    loOrderList = loOrderList.Where(p => p.OrderStatus == (char)fiStatus).ToList();

            loAllOrders.data = loOrdersByFilter;
            loAllOrders.totalRecords = 10000;   // loOrdersByFilter.Count;
            loAllOrders.curPage = pq_curpage;
        }

        lsOrders = loAllOrders.ToJson(new MongoDB.Bson.IO.JsonWriterSettings { OutputMode = JsonOutputMode.Strict });
        return lsOrders;
    }

    [WebMethod(EnableSession = true), ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
    public static string getModifiedOrders(int fiExchange, string fsSymbol, int fiStatus)
    {
        HttpContext.Current.Response.AppendHeader("Content-encoding", "gzip");
        HttpContext.Current.Response.Filter = new GZipStream(HttpContext.Current.Response.Filter, CompressionMode.Compress);

        string lsOrders = string.Empty;
        int liUserID = CommonFunction.getActiveSessionUserID();

        List<MTOrders> loOrderList = GlobalData.moOrders.ToList();
        loOrderList = loOrderList.Where(p => p.inCreatedBy == liUserID && p.dtModifiedOn >= CommonFunction.GetISTDateTime().AddSeconds(-20)).ToList();

        SRCAllOrderBook loAllOrders = new SRCAllOrderBook();
        if (loOrderList != null && loOrderList.Count > 0)
        {
            List<SRCOrderBook> loOrdersByFilter = new List<SRCOrderBook>();
            List<SRCOrderBook> loModifiedOrders = new List<SRCOrderBook>();
            foreach (MTOrders loItem in loOrderList.OrderBy(p => p.inRowIndex))
            {
                loModifiedOrders.Add(new SRCOrderBook
                {
                    inRowIndex = loItem.inRowIndex,
                    Exchange = loItem.InstrumentInfo.Exchange,
                    Symbol = loItem.InstrumentInfo.Symbol,
                    OrderType = loItem.OrderType.ToString(),
                    BuySell = loItem.BuySell.ToString(),
                    Qty = loItem.Qty,
                    QtyRemaining = loItem.QtyRemaining,
                    OrderPrice = loItem.OrderPrice,
                    OrderStatus = (char)loItem.OrderStatus,
                    stCreationTime = loItem.stCreationTime,
                    OrderUID = loItem._id.ToString(),
                });
            }

            //var loOrders = loOrderList.Select(p => new
            //{
            //    inRowIndex = p.inRowIndex,
            //    Exchange = p.InstrumentInfo.Exchange,
            //    Symbol = p.InstrumentInfo.Symbol,
            //    OrderType = p.OrderType.ToString(),
            //    BuySell = p.BuySell.ToString(),
            //    Qty = p.Qty,
            //    QtyRemaining = p.QtyRemaining,
            //    OrderPrice = p.OrderPrice,
            //    OrderStatus = (char)p.OrderStatus,
            //    stCreationTime = p.stCreationTime,
            //    OrderUID = p._id.ToString()
            //}).OrderBy(p => p.inRowIndex).ToList();

            loAllOrders.OrdersByFilter = loOrdersByFilter;
            loAllOrders.OrdersByModified = loModifiedOrders;
        }

        lsOrders = loAllOrders.ToJson(new MongoDB.Bson.IO.JsonWriterSettings { OutputMode = JsonOutputMode.Strict });
        return lsOrders;
    }

}

Thanks!

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5787
    • View Profile
Re: Filter and Sort not working with Virtual Scroll
« Reply #1 on: November 07, 2022, 07:08:46 am »
Please don't use dataModel.getUrl as remote sorting and remote filtering parameter sending is inbuilt in the grid.

Remote sample code on how to handle remote filter and sort parameters is provided in this example:

https://paramquery.com/pro/demos/infinite_scroll

[email protected]

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 71
    • View Profile
Re: Filter and Sort not working with Virtual Scroll
« Reply #2 on: November 08, 2022, 09:50:56 am »
Thank you for your response.

If we follow the article below, the web service web method is not working.
https://paramquery.com/pro/demos/infinite_scroll

Please give me a sample code for the web service web method including search and filter parameters.

Also, let me know how to get search and filter parameters from the Javascript/jQuery.
« Last Edit: November 08, 2022, 09:59:03 am by pranit0405 »