Leon Schmetz
Reputation: 1
JQuery grid filter menu disappearing behind modal
I have a web page showing a grid. I want to offer the user details about some row in the grid and display the result in a popup (modal) that also contains a grid. Everything looks fine except that the popup filter menu in the grid in the modal disappears behind the modal. To illustrate this I have modified one of jqxgrid demo pages and added a button to show the content in a modal window with exactly the same features.
I included the full page for easy reproduction. You might have to tweak the paths for including "css" and script files. "Demo.js" is - as I have learned - the new version of "generatedata.js".
I have also set the height of the grid in the modal to make visual what is happening.
I hope someone can help me out, either explain that this is not going to work or show some workaround or solution.
Thank you
<html lang="en">
<head>
<title id='Description'>This example illustrates the Grid filtering feature. Move the mouse cursor over a column header and click the dropdown button to open the filtering menu.</title>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="scripts/demos.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var theme = getDemoTheme();
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'productname',
type: 'string'
},
{
name: 'date',
type: 'date'
},
{
name: 'quantity',
type: 'number'
},
{
name: 'price',
type: 'number'
}
],
datatype: "array"
};
var addfilter = function() {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = 'Beate';
var filtercondition = 'contains';
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'Andrew';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
// apply the filters.
$("#jqxgrid").jqxGrid('applyfilters');
}
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 670,
source: adapter,
theme: theme,
filterable: true,
sortable: true,
ready: function() {
addfilter();
},
autoshowfiltericon: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
},
{
text: 'Last Name',
datafield: 'lastname',
width: 90
},
{
text: 'Product',
datafield: 'productname',
width: 170
},
{
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
},
{
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
},
{
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}
]
});
$('#events').jqxPanel({
width: 300,
height: 80,
theme: theme
});
$("#jqxgrid").on("filter", function(event) {
$("#events").jqxPanel('clearcontent');
var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
var eventData = "Triggered 'filter' event";
for (i = 0; i < filterinfo.length; i++) {
var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
$('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
}
});
$('#clearfilteringbutton').jqxButton({
height: 25,
theme: theme
});
$('#filterbackground').jqxCheckBox({
checked: true,
height: 25,
theme: theme
});
$('#filtericons').jqxCheckBox({
checked: false,
height: 25,
theme: theme
});
// clear the filtering.
$('#clearfilteringbutton').click(function() {
$("#jqxgrid").jqxGrid('clearfilters');
});
// show/hide filter background
$('#filterbackground').on('change', function(event) {
$("#jqxgrid").jqxGrid({
showfiltercolumnbackground: event.args.checked
});
});
// show/hide filter icons
$('#filtericons').on('change', function(event) {
$("#jqxgrid").jqxGrid({
autoshowfiltericon: !event.args.checked
});
});
});
function viewSubgridModalWithFilter(title) {
$("#jqxgridModal").remove();
$("#jqxgridmodalContainer").append('<div id="jqxgridModal" ></div>');
$("#gridmodalTitle").html(title);
var theme = getDemoTheme();
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'productname',
type: 'string'
},
{
name: 'date',
type: 'date'
},
{
name: 'quantity',
type: 'number'
},
{
name: 'price',
type: 'number'
}
],
datatype: "array"
};
var addfilter = function() {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = 'Beate';
var filtercondition = 'contains';
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtervalue = 'P';
filtercondition = 'starts_with';
var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$("#jqxgridModal").jqxGrid('addfilter', 'firstname', filtergroup);
// apply the filters.
$("#jqxgridModal").jqxGrid('applyfilters');
}
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgridModal").jqxGrid({
width: 670,
height: 100,
source: adapter,
theme: theme,
filterable: true,
sortable: true,
ready: function() {
addfilter();
},
autoshowfiltericon: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
},
{
text: 'Last Name',
datafield: 'lastname',
width: 90
},
{
text: 'Product',
datafield: 'productname',
width: 170
},
{
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
},
{
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
},
{
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}
]
});
$('#eventsM').jqxPanel({
width: 300,
height: 80,
theme: theme
});
$("#jqxgridModal").on("filter", function(event) {
$("#eventsM").jqxPanel('clearcontent');
var filterinfo = $("#jqxgridModal").jqxGrid('getfilterinformation');
var eventData = "Triggered 'filter' event";
for (i = 0; i < filterinfo.length; i++) {
var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
$('#eventsM').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
}
});
$('#clearfilteringbuttonM').jqxButton({
height: 25,
theme: theme
});
$('#filterbackgroundM').jqxCheckBox({
checked: true,
height: 25,
theme: theme
});
$('#filtericonsM').jqxCheckBox({
checked: false,
height: 25,
theme: theme
});
// clear the filtering.
$('#clearfilteringbuttonM').click(function() {
$("#jqxgridModal").jqxGrid('clearfilters');
});
// show/hide filter background
$('#filterbackgroundM').on('change', function(event) {
$("#jqxgridModal").jqxGrid({
showfiltercolumnbackground: event.args.checked
});
});
// show/hide filter icons
$('#filtericonsM').on('change', function(event) {
$("#jqxgridModal").jqxGrid({
autoshowfiltericon: !event.args.checked
});
});
$("#startSubgridModal").modal({
backdrop: "static"
});
}
</script>
</head>
<body class='default'>
<div class="modal fade" role="dialog" id="startSubgridModal">
<div class="modal-dialog" id="subgrid_dialog" style="width:90%;">
<!-- Modal content-->
<div class="modal-content" style="height=90%;overflow-y:auto">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="gridmodalTitle">Pallets</h3>
</div>
<div style="overflow:hidden">
<div id="jqxgridmodalContainer">
<div id="jqxgridModal"></div>
</div>
</div>
<div id="eventslogM" style="margin-top: 10px;">
<div style="width: 200px; float: left; margin-right: 10px;">
<input value="Remove Filter" id="clearfilteringbuttonM" type="button" />
<div style="margin-top: 10px;" id='filterbackgroundM'>Filter Background</div>
<div style="margin-top: 10px;" id='filtericonsM'>Show All Filter Icons</div>
</div>
<div style="float: left;">
Event Log:
<div style="border: none;" id="eventsM">
</div>
</div>
<input id="btnViewModalM" type="button" onclick="viewSubgridModalWithFilter('Grid modal')" value="Show modal" />
</div>
</div>
</div>
</div>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid">
</div>
<div id="eventslog" style="margin-top: 30px;">
<div style="width: 200px; float: left; margin-right: 10px;">
<input value="Remove Filter" id="clearfilteringbutton" type="button" />
<div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
<div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
</div>
<div style="float: left;">
Event Log:
<div style="border: none;" id="events">
</div>
</div>
<input id="btnViewModal" type="button" onclick="viewSubgridModalWithFilter('Grid modal')" value="Show modal" />
</div>
</div>
</body>
</html>
Upvotes: 0
Views: 672
Answers (0)
Related Questions
- free jqGrid search parameter disappearing in filterToolbar
- free-jqGrid filterToolbar removes search text after
- JQGrid filterToolbar row hidden when grid loads
- jqGrid filtertoolbar is invisible
- jqgrid filter removes one row on load once
- JQGRID Search Modal window is not popping up
- jqgrid filter strange behaviour
- jqGrid - Custom filtering works but not after reopening a grid in a modal window
- jqGrid filter row is out of sync with grid columns
- jQgrid Inside jQuery simple modal problems with z-index in edit/delete/add popups