jQuery Grid Plugin - jqGrid - Topic: virtual scroll pager not working

jQuery Grid Plugin - jqGrid - Topic: virtual scroll pager not working http://www.trirand.com/blog/?page_id=393/help/virtual-scroll-pager-not-working Simple:Press Version 5.7.5.3 milad on virtual scroll pager not working http://www.trirand.com/blog/?page_id=393/help/virtual-scroll-pager-not-working#p24967 Help http://www.trirand.com/blog/?page_id=393/help/virtual-scroll-pager-not-working#p24967 Quick update on this. If I change the grid configuration to the below, the pager no longer shows up at the bottom, but the still scroll bars exist for paging:

function RenderGrid() {

        var hGgrid = $("table[id$='divHoldings']");
        var hScroll = $("table[id$='divScroll']");

//        jQuery("#divHoldings").jqGrid({
            /*datatype: function (pdata) {
                getData(pdata);
            },*/
            //                datatype: 'jsonstring',
            //                datastr: GetJSON(),
        hGgrid.jqGrid({
            height: 355,
            colNames: ['Description', 'Symbol', 'Custodian', 'Account Type', 'Biz Line', 'Account', 'vchC360AccountName', 'Quantity', 'Price ($)', 'Value ($)', 'Pct. Assets (%)', 'Previous<br />Value ($)', '1-Day Price<br />Change (%)', 'Position Type', 'Tax Cost ($)', 'Tax Gain/Loss ($)', 'Tax Gain/Loss (%)', 'Principal ($)', 'Principal<br />Gain/Loss ($)', 'Principal<br />Gain/Loss (%)', 'Avg. Cost<br />Per Share ($)', 'Asset Type', 'Asset Category', 'Est. Annual<br />Income ($)', 'Current<br />Yield (%)', 'Dividend<br />Instructions', 'Capital Gain<br />Instructions', '', '', '', 'Initial<br/>Purchase Date'],
            colModel: [
        { name: 'vchLongName', index: 'vchLongName', width: 325, align: "left", title: false },
        { name: 'vchTicker', index: 'vchTicker', width: 80, align: "left", title: false, formatter: FormatMenu },
        { name: 'Custodian', index: 'Custodian', width: 150, align: "left", title: false, hidden: true },
        { name: 'AccountType', index: 'AccountType', width: 150, align: "left", hidden: true, title: false },
        { name: 'BizLineDesc', index: 'BizLineDesc', width: 150, align: "left", hidden: true, title: false },
        { name: 'Account', index: 'Account', width: 150, align: "left", hidden: true, title: false },
        { name: 'vchC360AccountName', index: 'vchC360AccountName', width: 150, align: "left", hidden: true, title: false },
        { name: 'dQuantity', index: 'dQuantity', width: 100, align: "right", title: false, classes: 'PaddingRight20px', formatter: FormatNumberField, sorttype: 'number' },
        { name: 'mPrice', index: 'mPrice', width: 100, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mMarketValue', index: 'mMarketValue', width: 120, title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'PercentMarketValue', index: 'PercentMarketValue', width: 120, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mPriorDayCloseValue', index: 'mPriorDayCloseValue', width: 120, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mChangeOneDay', index: 'mChangeOneDay', width: 110, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'positiontype', index: 'positiontype', width: 100, align: "left", title: false },
        { name: 'mCostBasisWReInvest', index: 'mCostBasisWReInvest', width: 120, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mGainLossWInvest', index: 'mGainLossWInvest', width: 130, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'pGainLossWInvest', index: 'pGainLossWInvest', width: 130, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mCostBasisWNOReInvest', index: 'mCostBasisWNOReInvest', width: 120, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mGainLossWNoInvest', index: 'mGainLossWNoInvest', width: 120, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'pGainLossWNoInvest', index: 'pGainLossWNoInvest', width: 120, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mAvgCostPerShare', index: 'mAvgCostPerShare', width: 120, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'AssetType', index: 'AssetType', width: 120, align: "left", title: false },
        { name: 'AssetCategory', index: 'AssetCategory', width: 120, align: "left", title: false },
        { name: 'EstimatedAnnualIncome', index: 'EstimatedAnnualIncome', width: 120, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'CurrentYield', index: 'CurrentYield', width: 130, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'DividendInst', index: 'DividendInst', width: 120, align: "left", title: false },
        { name: 'CapGainsInst', index: 'CapGainsInst', width: 120, align: "left", title: false },
        { name: 'iPPSAccountID', index: 'iPPSAccountID', width: 150, align: "left", hidden: true, title: false },
        { name: 'UniqueID', index: 'UniqueID', width: 150, align: "left", hidden: true, title: false },
        { name: 'TotalMarketValue', index: 'TotalMarketValue', width: 150, align: "left", hidden: true, title: false },
        { name: 'InitialDate', index: 'InitialDate', width: 110, align: "left", title: false }
        ],
            altRows: true,
            sortable: true,
            datatype: "local",
            data: holdings,
//            /*height: "auto",*/
//            height: 255,
//            gridview: true,
//            rowNum: 20,
//            rowTotal: 2000,
//            /*rowList: [20, 30, 50],*/
//            scroll: true,
//            scrollrows: true,
//            loadonce: true,
//            mtype: "GET",
//            rownumbers: true,
//            rownumWidth: 40,
//            pager: '#divScroll',
//            hoverrows: true,
//            grouping: true,
//            groupingView: {
//                groupField: ['vchC360AccountName'],
//                groupColumnShow: [false],
//                groupText: ['<b>{0}</b>'],
//                groupCollapse: false,
//                groupOrder: ['asc'],
//                groupSummary: [true],
//                showSummaryOnHide: true,
//                groupDataSorted: true
//            },
//            sortname: 'vchLongName',
//            /*rowNum: 10000,*/
//            authwidth: false
            rowNum: 10,
            rowTotal: 2000,
            rowList: [20, 30, 50],
            scroll: 1,
            loadonce:true,
            mtype: "GET",
            rownumbers: true,
            rownumWidth: 40,
            gridview: true,
            pager: '#divScroll',
            sortname: 'vchLongName',
            viewrecords: true
        });

hGgrid.jqGrid('navGrid', "#divScroll", { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true });

]]> Mon, 24 Oct 2011 20:43:38 +0300 milad on virtual scroll pager not working http://www.trirand.com/blog/?page_id=393/help/virtual-scroll-pager-not-working#p24965 Help http://www.trirand.com/blog/?page_id=393/help/virtual-scroll-pager-not-working#p24965 Hello,

I am unable to get virtual scroll paging working. My configuration is below. Instead of adding a scroll bar for the pager, the pager gets added below the grid which is not what I want.

Here is how the controls are defined:

<table id="divHoldings">
                </table>
                <div id="divScroll" ></div>

Here is the configuration:

function RenderGrid() {

        var hGgrid = $("table[id$='divHoldings']");
        var hScroll = $("table[id$='divScroll']");

        hGgrid.jqGrid({
            colNames: ['Description', 'Symbol', 'Custodian', 'Account Type', 'Biz Line', 'Account', 'vchC360AccountName', 'Quantity', 'Price ($)', 'Value ($)', 'Pct. Assets (%)', 'Previous<br />Value ($)', '1-Day Price<br />Change (%)', 'Position Type', 'Tax Cost ($)', 'Tax Gain/Loss ($)', 'Tax Gain/Loss (%)', 'Principal ($)', 'Principal<br />Gain/Loss ($)', 'Principal<br />Gain/Loss (%)', 'Avg. Cost<br />Per Share ($)', 'Asset Type', 'Asset Category', 'Est. Annual<br />Income ($)', 'Current<br />Yield (%)', 'Dividend<br />Instructions', 'Capital Gain<br />Instructions', '', '', '', 'Initial<br/>Purchase Date'],
            colModel: [
        { name: 'vchLongName', index: 'vchLongName', width: 325, align: "left", title: false },
        { name: 'vchTicker', index: 'vchTicker', width: 80, align: "left", title: false, formatter: FormatMenu },
        { name: 'Custodian', index: 'Custodian', width: 150, align: "left", title: false, hidden: true },
        { name: 'AccountType', index: 'AccountType', width: 150, align: "left", hidden: true, title: false },
        { name: 'BizLineDesc', index: 'BizLineDesc', width: 150, align: "left", hidden: true, title: false },
        { name: 'Account', index: 'Account', width: 150, align: "left", hidden: true, title: false },
        { name: 'vchC360AccountName', index: 'vchC360AccountName', width: 150, align: "left", hidden: true, title: false },
        { name: 'dQuantity', index: 'dQuantity', width: 100, align: "right", title: false, classes: 'PaddingRight20px', formatter: FormatNumberField, sorttype: 'number' },
        { name: 'mPrice', index: 'mPrice', width: 100, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mMarketValue', index: 'mMarketValue', width: 120, title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'PercentMarketValue', index: 'PercentMarketValue', width: 120, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mPriorDayCloseValue', index: 'mPriorDayCloseValue', width: 120, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mChangeOneDay', index: 'mChangeOneDay', width: 110, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'positiontype', index: 'positiontype', width: 100, align: "left", title: false },
        { name: 'mCostBasisWReInvest', index: 'mCostBasisWReInvest', width: 120, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mGainLossWInvest', index: 'mGainLossWInvest', width: 130, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'pGainLossWInvest', index: 'pGainLossWInvest', width: 130, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mCostBasisWNOReInvest', index: 'mCostBasisWNOReInvest', width: 120, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mGainLossWNoInvest', index: 'mGainLossWNoInvest', width: 120, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'pGainLossWNoInvest', index: 'pGainLossWNoInvest', width: 120, align: "right", title: false, formatter: FormatNumberFieldAndAddColor, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'mAvgCostPerShare', index: 'mAvgCostPerShare', width: 120, align: "right", title: false, formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'AssetType', index: 'AssetType', width: 120, align: "left", title: false },
        { name: 'AssetCategory', index: 'AssetCategory', width: 120, align: "left", title: false },
        { name: 'EstimatedAnnualIncome', index: 'EstimatedAnnualIncome', width: 120, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'CurrentYield', index: 'CurrentYield', width: 130, align: "right", title: false, summaryType: 'sum', formatter: FormatNumberField, classes: 'PaddingRight20px', sorttype: 'number' },
        { name: 'DividendInst', index: 'DividendInst', width: 120, align: "left", title: false },
        { name: 'CapGainsInst', index: 'CapGainsInst', width: 120, align: "left", title: false },
        { name: 'iPPSAccountID', index: 'iPPSAccountID', width: 150, align: "left", hidden: true, title: false },
        { name: 'UniqueID', index: 'UniqueID', width: 150, align: "left", hidden: true, title: false },
        { name: 'TotalMarketValue', index: 'TotalMarketValue', width: 150, align: "left", hidden: true, title: false },
        { name: 'InitialDate', index: 'InitialDate', width: 110, align: "left", title: false }
        ],
            altRows: true,
            sortable: true,
            datatype: "local",
            data: holdings,
            /*height: "auto",*/
            height: 255,
            gridview: true,
            rowNum: 10,
            rowTotal: 2000,
            /*rowList: [20, 30, 50],*/
            scroll: true,
            scrollrows: true,
            loadonce: true,
            mtype: "GET",
            rownumbers: true,
            rownumWidth: 40,
            pager: '#divScroll',
            hoverrows: true,
            grouping: true,
            groupingView: {
                groupField: ['vchC360AccountName'],
                groupColumnShow: [false],
                groupText: ['<b>{0}</b>'],
                groupCollapse: false,
                groupOrder: ['asc'],
                groupSummary: [true],
                showSummaryOnHide: true,
                groupDataSorted: true
            },
            sortname: 'vchLongName',
            authwidth: false
        });

hGgrid.jqGrid('navGrid', "#divScroll", { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: false });

Any thoughts/suggestions are appreciated?

Thanks.

]]> Mon, 24 Oct 2011 20:10:37 +0300