Forum


20:10

03/10/2011

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.
20:43

03/10/2011

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 });
Most Users Ever Online: 715
Currently Online:
62 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66