jQuery UI Widgets › Forums › Grid › Grid does not resize when window is resized.
Tagged: datagrid component, grid
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 5 years, 4 months ago.
-
Author
-
Hello,
I have a <div>, inside that I am loading 2 jqxgrid(jquery) alternatively based on user selection. When user resize window and clicks on link to load other jqxgrid and resize it back to normal width, the grid is not resized and it leaves white spaces. I have tried different ways but nothing seems to work. Please help. Below is code for both the grid.This is First Grid
var strategyDetails = {
strategyDetailsScript: function () {var url = “/Details?handler=StrategyDetails&companyId=” + $(‘#CompanyId’).val();
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘StrategyID’, type: ‘number’ },
{ name: ‘StrategyName’, type: ‘string’ },
{ name: ‘PlatformNames’, type: ‘string’ },
{ name: ‘ProductNames’, type: ‘string’ },
{ name: ‘PortfolioManagers’, type: ‘string’ },
{ name: ‘StrategyAUM’, type: ‘number’ },
{ name: ‘StrategyAUMLink’, type: ‘string’ },
{ name: ‘OrganizationChanges’, type: ‘string’ },
{ name: ‘OrganizationChangesLink’, type: ‘string’ },
{ name: ‘AssetsGainedLost’, type: ‘number’ },
{ name: ‘AssetsGainedLostLink’, type: ‘string’ },
{ name: ‘InvestmentProfessionalsGained’, type: ‘number’ },
{ name: ‘InvestmentProfessionalsGainedLink’, type: ‘string’ },
{ name: ‘InvestmentProfessionalsLost’, type: ‘number’ },
{ name: ‘InvestmentProfessionalsLostLink’, type: ‘string’ },
{ name: ‘StrategyWatchListDate’, type: ‘date’ },
{ name: ‘StrategyWatchListCount’, type: ‘number’ },
{ name: ‘StrategySalesforceLink’, type: ‘string’ },
{ name: ‘StrategyActivityDate’, type: ‘date’ }
],
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
var columns = [
{ text: ‘Strategy’, dataField: ‘StrategyID’, hidden: true },
{ text: ‘Strategy’, dataField: ‘StrategyName’, minwidth: 150, pinned: true, cellclassname: ‘alignTopLeft’, width: ‘20%’, filtertype: ‘input’, renderer: this.Renderer, classname: ‘gridHeader’ },
{ text: ‘Platforms’, dataField: ‘PlatformNames’, minwidth: 150, cellclassname: ‘alignTopLeft’, width: ‘20%’, filtertype: ‘input’, renderer: this.Renderer, classname: ‘gridHeader’ },
{ text: ‘Portfolios’, dataField: ‘ProductNames’, minwidth: 150, cellclassname: ‘alignTopLeft w-preline’, width: ‘20%’, filtertype: ‘input’, renderer: this.Renderer, classname: ‘gridHeader’, enabletooltips: true },
{ text: ‘Portfolio Managers’, dataField: ‘PortfolioManagers’, minwidth: 70, align: ‘center’, cellclassname: ‘alignTopLeft w-preline’, width: ‘10%’, filtertype: ‘input’, renderer: this.Renderer, classname: ‘gridHeader’, enabletooltips: true},
{ text: ‘*Strategy AUM ($M)’, dataField: ‘StrategyAUM’, minwidth: 60, align: ‘center’, cellsalign: ‘center’, width: ‘9%’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: strategyDetails.CellsRendererStrategy},
{ text: ‘StrategyAUMLink’, dataField: ‘StrategyAUMLink’, hidden: true },
{ text: ‘*Net Assets Gained/Lost ($M)’, dataField: ‘AssetsGainedLost’, minwidth: 80, align: ‘center’, width: ‘8%’, cellsalign: ‘center’, align: ‘center’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: strategyDetails.CellsRendererStrategy, enabletooltips: false },
{ text: ‘AssetsGainedLostLink’, dataField: ‘AssetsGainedLostLink’, hidden: true },
{ text: ‘*Organizational Changes’, dataField: ‘OrganizationChanges’, minwidth: 80, align: ‘center’, width: ‘11%’, cellsalign: ‘center’, align: ‘center’, filtertype: ‘checkedlist’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: strategyDetails.CellsRendererStrategy, enabletooltips: false },
{ text: ‘OrganizationChangesLink’, dataField: ‘OrganizationChangesLink’, hidden: true },
{ text: ‘*Investment Professionals Gained’, dataField: ‘InvestmentProfessionalsGained’, minwidth: 80, cellsalign: ‘center’, align: ‘center’, width: ‘9.5%’, align: ‘center’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: strategyDetails.CellsRendererStrategy, enabletooltips: false },
{ text: ‘InvestmentProfessionalsGainedLink’, dataField: ‘InvestmentProfessionalsGainedLink’, hidden: true },
{ text: ‘*Investment Professionals Lost’, dataField: ‘InvestmentProfessionalsLost’, minwidth: 80, cellsalign: ‘center’, align: ‘center’, width: ‘9.5%’, align: ‘center’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: strategyDetails.CellsRendererStrategy, enabletooltips: false },
{ text: ‘InvestmentProfessionalsLostLink’, dataField: ‘InvestmentProfessionalsLostLink’, hidden: true },
{
text: ‘Latest Watch List’, dataField: ‘StrategyWatchListDate’, minwidth: 80, width: ‘8%’, cellsalign: ‘center’, align: ‘center’, filtertype: ‘date’, cellsformat: ‘MM/dd/yyyy’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (rowdata.StrategyWatchListDate == null || rowdata.StrategyWatchListDate == undefined) {
return ”;
}
return ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px; margin-left: 5px;”>‘ + dataAdapter.formatDate(value, “MM/dd/yyyy”) + ‘</div>’;
}, enabletooltips: false
},
{
text: ‘Latest Activity’, dataField: ‘StrategyActivityDate’, minwidth: 80, width: ‘8%’, cellsalign: ‘center’, align: ‘center’, filtertype: ‘date’, cellsformat: ‘MM/dd/yyyy’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (rowdata.StrategyActivityDate == null || rowdata.StrategyActivityDate == undefined) {
return ”;
}
return ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px; margin-left: 5px;”>‘ + dataAdapter.formatDate(value, “MM/dd/yyyy”) + ‘</div>’;
}, enabletooltips: false
}
];
$(‘#StrategyPortfolioGrid’).jqxGrid({
width: ‘100%’,
// columnsheight=’70’,
source: dataAdapter,
showpinnedcolumnbackground: false,
showfiltercolumnbackground: false,
showsortcolumnbackground: false,
showdefaultloadelement: true,
autoshowloadelement: true,
showtoolbar: false,
sortable: true,
showfilterrow: true,
showgroupmenuitems: false,
filterable: true,
enabletooltips: true,
clipboard: true,
columnsResize: false,
pageable: true,
// pagesize: 10,
autoheight: true,
selectionmode: ‘singlerow’,
enablebrowserselection: true,
closeablegroups: false,
columns: columns,
columnsheight: 60,
altrows: true,
autoheight: true,
autorowheight: true,
pagesizeoptions: [’10’, ’20’, ‘100’],
showgroupmenuitems: false,
showgroupsheader: false,
localization:
{
filterselectstring: “Filter”
},
ready: function () {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘autoresizecolumns’, ‘cells’);
}}).on(“bindingcomplete”, function () { $(‘#divExpandCollapse’).removeClass(“d-block”); $(‘#divFilter’).addClass(“d-block”);
});
},
CellsRendererStrategy : function (row, column, value, defaultSettings, columnSettings, rowdata) {if (value === undefined)
return ”;var anchor = ”;
if (column == “StrategyAUM”)
if (rowdata.StrategyAUM != null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”>‘ + new Intl.NumberFormat(‘en-US’, { style: ‘decimal’, minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(rowdata.StrategyAUM) + ‘</div>’;
else if (rowdata.StrategyAUM == null && rowdata.StrategyAUMLink != null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>N/A</span></div>’;
else
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>-</span></div>’;
else if (column == “AssetsGainedLost”)
if(rowdata.AssetsGainedLost!=null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”>‘ + new Intl.NumberFormat(‘en-US’, { style: ‘decimal’, minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(rowdata.AssetsGainedLost) + ‘</div>’;
else if (rowdata.AssetsGainedLost == null && rowdata.AssetsGainedLostLink != null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>N/A</span></div>’;
else
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>-</span></div>’;
else if (column == “OrganizationChanges”) {
if (!value || value == ‘-No Data-‘)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>N</span></div>’;
else
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”>Y</div>’;
}
else if (column == “InvestmentProfessionalsGained”)
if (rowdata.InvestmentProfessionalsGained != null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”>‘ + rowdata.InvestmentProfessionalsGained + ‘</div>’;
else if (rowdata.InvestmentProfessionalsGained == null && rowdata.InvestmentProfessionalsGainedLink != null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>N/A</span></div>’;
else
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>-</span></div>’;
else if (column == “InvestmentProfessionalsLost”)
if (rowdata.InvestmentProfessionalsLost != null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”>‘ + rowdata.InvestmentProfessionalsLost + ‘</div>’;
else if (rowdata.InvestmentProfessionalsLost == null && rowdata.InvestmentProfessionalsLostLink != null)
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>N/A</span></div>’;
else
anchor = ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px;”><span>-</span></div>’;
return anchor;
},
Renderer: function (value, columnHeight, align) {
return ‘<div style=”height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center;”><div>’ + value + ‘</div></div>’;
}
}This is second grid
var portfolioDetails = {
portfolioDetailsScript : function () {var url = /Details?handler=PortfolioDetails&companyId=” + $(‘#CompanyId’).val();
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘StrategyID’, type: ‘number’ },
{ name: ‘StrategyName’, type: ‘string’ },
{ name: ‘PlatformNames’, type: ‘string’ },
{ name: ‘ProductID’, type: ‘number’ },
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘QTDBenchmarkExcess’, type: ‘number’ },
{ name: ‘QTDRank’, type: ‘number’ },
{ name: ‘OneYBenchmarkExcess’, type: ‘number’ },
{ name: ‘OneYRank’, type: ‘number’ },
{ name: ‘ThreeYBenchmarkExcess’, type: ‘number’ },
{ name: ‘ThreeYRank’, type: ‘number’ },
{ name: ‘Flag5’, type: ‘string’ },
{ name: ‘Flag6’, type: ‘string’ },
{ name: ‘ProductWatchListDate’, type: ‘date’ },
{ name: ‘ProductWatchListCount’, type: ‘number’ },
{ name: ‘ProductSalesforceLink’, type: ‘string’ }
],
url: url
};var dataAdapter = new $.jqx.dataAdapter(source);
var columns = [
{ text: ‘Strategy’, dataField: ‘StrategyID’, hidden: true },
{ text: ‘StrategyName’, dataField: ‘StrategyName’, hidden: true },
{ text: ‘PlatformNames’, dataField: ‘PlatformNames’, hidden: true },
{ text: ‘Portfolio’, dataField: ‘ProductName’, minwidth: 100, cellclassname: ‘alignTopLeftMarginLeft’, width: ‘30%’, filtertype: ‘input’, renderer: this.Renderer, classname: ‘gridHeader’ },
{ text: ‘QTD Benchmark Excess’, dataField: ‘QTDBenchmarkExcess’, minwidth: 80, align: ‘center’, cellsalign: ‘center’, width: ‘8%’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, enabletooltips: false },
{ text: ‘QTD Rank’, dataField: ‘QTDRank’, minwidth: 80, align: ‘center’, cellsalign: ‘center’, width: ‘8%’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, enabletooltips: false},
{ text: ‘1Y Benchmark Excess’, dataField: ‘OneYBenchmarkExcess’, minwidth: 80, align: ‘center’, cellsalign: ‘center’, width: ‘8%’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, enabletooltips: false },
{ text: ‘1Y Rank’, dataField: ‘OneYRank’, minwidth: 80, width: ‘8%’, align: ‘center’, cellsalign: ‘center’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, enabletooltips: false },
{ text: ‘3Y Benchmark Excess’, dataField: ‘ThreeYBenchmarkExcess’, minwidth: 80, width: ‘8%’, align: ‘center’, cellsalign: ‘center’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, filtertype: ‘number’, enabletooltips: false },
{ text: ‘3Y Rank’, dataField: ‘ThreeYRank’, minwidth: 80, width: ‘8%’, align: ‘center’, cellsalign: ‘center’, filtertype: ‘number’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, enabletooltips: false },
{ text: ‘Flag 5’, dataField: ‘Flag5’, minwidth: 80, width: ‘7%’, align: ‘center’, cellsalign: ‘center’, filtertype: ‘checkedlist’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, enabletooltips: false },
{ text: ‘Flag 6’, dataField: ‘Flag6’, minwidth: 80, width: ‘7%’, align: ‘center’, cellsalign: ‘center’, filtertype: ‘checkedlist’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: portfolioDetails.CellsRendererPortfolio, enabletooltips: false },
{
text: ‘Watch List’, dataField: ‘ProductWatchListDate’, minwidth: 80, width: ‘8%’, align: ‘center’, cellsalign: ‘center’, filtertype: ‘date’, cellsformat: ‘MM/dd/yyyy’, renderer: this.Renderer, classname: ‘gridHeader’, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
{
if (rowdata.ProductWatchListDate == null || rowdata.ProductWatchListDate == undefined) {
return ”;
}return ‘<div class=”jqx-grid-cell-middle-align” style=”margin-top: 7px; margin-left: 5px;”>‘ + dataAdapter.formatDate(value, “MM/dd/yyyy”) + ‘</div>’;
}
}, enabletooltips: false,
ready: function () {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘autoresizecolumns’, ‘cells’);
}}
];
$(‘#StrategyPortfolioGrid’).jqxGrid({
width: ‘100%’,
// columnsheight=’70’,
source: dataAdapter,
showpinnedcolumnbackground: false,
showfiltercolumnbackground: false,
showsortcolumnbackground: false,
showdefaultloadelement: true,
autoshowloadelement: true,
showtoolbar: false,
sortable: true,
showfilterrow: true,
showgroupmenuitems: false,
filterable: true,
enabletooltips: true,
clipboard: true,
columnsResize: false,
pageable: true,
// pagesize: 5,
autoheight: true,
selectionmode: ‘none’,
enablebrowserselection: true,
groupable: true,
groupsexpandedbydefault: true,
groupsrenderer: portfolioDetails.GroupsRenderer,
closeablegroups: false,
columns: columns,
columnsheight: 60,
altrows: true,
autoheight: true,
autorowheight: true,
pagesizeoptions: [’10’, ’20’, ‘100’],
groups: [‘StrategyID’],
showgroupsheader: false,
localization:
{
filterselectstring: “Filter”
}
}).on(“bindingcomplete”, function () {
$(‘#divExpandCollapse’).addClass(“d-block”);
$(‘#divFilter’).addClass(“d-block”);
$(“#StrategyPortfolioGrid”).on(“pagechanged”, function (event) {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘expandallgroups’);
//console.log(“teting page size..”);
//console.log($(document).scrollTop())
return false;
})
//$(“#StrategyPortfolioGrid”).on(“pagesizechanged”, function (event) {
// $(‘#StrategyPortfolioGrid’).jqxGrid(‘expandallgroups’);
// return false;
//})});
},
CellsRendererPortfolio : function (row, column, value, defaultSettings, columnSettings, rowdata) {
if (value === undefined)
return ”;
var anchor = ”;
if (column == “Flag5” || column == “Flag6″) {
if (value === ‘Flag’)
return ‘<div class=”‘ + $(defaultSettings).attr(‘class’) + ‘” style=”‘ + $(defaultSettings).attr(‘style’) + ‘”><i class=”fas fa-times fa-lg red”></i></div>’;
else if (value === ‘-No Data-‘)
return ‘<div class=”‘ + $(defaultSettings).attr(‘class’) + ‘” style=”‘ + $(defaultSettings).attr(‘style’) + ‘”>-</div>’;
else
return ”;
}
else if (column == “QTDBenchmarkExcess” || column == “OneYBenchmarkExcess” || column == “ThreeYBenchmarkExcess”)
if (value)
return ‘<div class=”‘ + $(defaultSettings).attr(‘class’) + ‘” style=”‘ + $(defaultSettings).attr(‘style’) + ‘”>’ + new Intl.NumberFormat(‘en-US’, { style: ‘decimal’, minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value) + ‘</div>’;
else
return ‘<div class=”‘ + $(defaultSettings).attr(‘class’) + ‘” style=”‘ + $(defaultSettings).attr(‘style’) + ‘”>-</div>’;
else if (column == “QTDRank” || column == “OneYRank” || column == “ThreeYRank”)
if (value)
return ‘<div class=”‘ + $(defaultSettings).attr(‘class’) + ‘” style=”‘ + $(defaultSettings).attr(‘style’) + ‘”>’ + value + ‘</div>’;
else
return ‘<div class=”‘ + $(defaultSettings).attr(‘class’) + ‘” style=”‘ + $(defaultSettings).attr(‘style’) + ‘”>-</div>’;return anchor;
},
GroupsRenderer: function (text, group, expanded, data) {
var portfolio = ” Portfolios”;
if (data.subItems.length == 1)
portfolio = ” Portfolio”;
return ‘<div class=”jqx-grid-groups-row” style=”position: absolute;”><span style=”overflow-wrap” >Strategy:’ +
‘</span > <span class=”jqx-grid-groups-row-details”>’ + data.subItems[“0″].StrategyName
+ ‘ (<b>’ + data.subItems.length + portfolio + ‘</b>)’
+ ‘<br/><b class=”mt-5”>Platforms: </b>’ + data.subItems[“0”].PlatformNames + ‘</span></div > ‘
// group = group + data.subItems[“0”].PlatformNames;
},
ExpandAll: function () {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘expandallgroups’);
return false;
},
CollapseAll: function () {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘collapseallgroups’);
return false;
},
ClearFilters: function () {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘clearfilters’);
return false;
},
InitLoad: function () {
//$(“#StrategyPortfolioGrid”).on(“pagechanged”, function (event) {
// $(‘#StrategyPortfolioGrid’).jqxGrid(‘expandallgroups’);
//}).on(“bindingcomplete”, function () { });
//$(“#StrategyPortfolioGrid”).on(“pagesizechanged”, function (event) {
// $(‘#StrategyPortfolioGrid’).jqxGrid(‘expandallgroups’);
//}).on(“bindingcomplete”, function () { });
},
Renderer: function (value, columnHeight, align) {
return ‘<div style=”height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center;”><div>’ + value + ‘</div></div>’;
}
}
$(function () {
$(“#StrategyPortfolioGrid”).on(“pagechanged”, function (event) {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘expandallgroups’);
return false;
})
$(“#StrategyPortfolioGrid”).on(“pagesizechanged”, function (event) {
$(‘#StrategyPortfolioGrid’).jqxGrid(‘expandallgroups’);
return false;
})
});This is my HTML
<div id=”divDetails”>
<div id=”StrategyPortfolioGrid”></div>
</div>
$(“#aStrategyDetails”).click(function () {
$(‘#divDetails’).empty();
$(‘#divDetails’).prepend(‘<div id=”StrategyPortfolioGrid”></div>’);
strategyDetails.strategyDetailsScript();
});
$(“#aPortFolioDetails”).click(function () {
$(‘#divDetails’).empty();
$(‘#divDetails’).prepend(‘<div id=”StrategyPortfolioGrid”></div>’);
portfolioDetails.portfolioDetailsScript();});
</script>Hi,
Could you share online sample in codepen or jsfiddle about that? Have you tried calling updatebounddata or refresh methods?
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.