Losing filter after grid printing

[ArneaultParticipant]

Hi everybody,
I am new in programming jQuery and using jqWidgets, and now I have this issue: I made a grid with a filter and printing button. Filtering works fine, so does printing. But after closing the print window, the grid looses its filter and resets. I don’t want that. How can I maintain its filter?

My program so far is printed hereby:

$(document).ready(function () {
var source =
{
dataType: “json”,
cache: false,
dataFields: [
{ name: ‘record_id’, type: ‘integer’ },
{ name: ‘ToetsNr’, type: ‘string’ },
{ name: ‘PakketVak’, type: ‘string’ },
{ name: ‘LesGroep’, type: ‘string’ },
{ name: ‘Surveillant’, type: ‘string’ },
{ name: ‘Lokaal’, type: ‘string’ },
{ name: ‘AantalMinuten’, type: ‘string’ },
{ name: ‘Datum’, type: ‘string’ },
{ name: ‘Tijd’, type: ‘string’ },
{ name: ‘ToetsNaam’, type: ‘string’ },
{ name: ‘AantalLeerlingen’, type: ‘string’ },
{ name: ‘GewAantalSurv’, type: ‘string’ },
{ name: ‘VakDocentCode’, type: ‘string’ },
{ name: ‘VakCode’, type: ‘string’ },
{ name: ‘Afdeling’, type: ‘string’ },
{ name: ‘LesGroep2’, type: ‘string’ },
{ name: ‘NietAfdrukken’, type: ‘string’ },
{ name: ‘ingeleverd’, type: ‘integer’ }
],
url: ‘sql_getrooster.php’/*,
filter: function()
{
// update the grid and send a request to the server.
$(“#admintable”).jqxGrid(‘updatebounddata’, ‘filter’);
}*/
};

$(“#admintable”).jqxGrid(
{
width: 1150,
pageable: true,
columnsResize: true,
sortable: true,
editable: true,
autoheight: true,
filterable: true,
selectionmode: ‘singlerow’,
showfilterrow: true,
altrows: true,
ready: function () {
addfilter();
},
autoshowfiltericon: true,
pageSize: 25,
pagermode: ‘simple’,
pagerButtonsCount: 10,
showstatusbar: true,
statusbarheight: 50,
showaggregates: true,
source: source,
columns: [
{ text: ‘Ingeleverd’, dataField: ‘ingeleverd’, width: 150, columntype: ‘checkbox’, filtertype: ‘checkedlist’, editable: true,
aggregates: [{
‘Ingeleverd’: function (aggregatedValue, currentValue) {
if (currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}, {
‘Niet ingeleverd’: function (aggregatedValue, currentValue) {
if (!currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}]},
/*{ text: ‘ID’, dataField: ‘record_id’, width: 50, editable: false },*/
{ text: ‘Datum’, dataField: ‘Datum’, width: 130, editable: false, filtertype: ‘checkedlist’ },
{ text: ‘Groep’, dataField: ‘LesGroep’, width: 70, editable: false },
{ text: ‘Surveillant’, dataField: ‘Surveillant’, width: 100, editable: false },
{ text: ‘Lokaal’, dataField: ‘Lokaal’, width: 70, editable: false },
{ text: ‘Omschrijving’, dataField: ‘ToetsNaam’, width: 200, editable: false },
{ text: ‘Tijd’, dataField: ‘Tijd’, width: 100, editable: false },
{ text: ‘Tijdsduur’, dataField: ‘AantalMinuten’, width: 90, editable: false, cellsalign: ‘center’ },
{ text: ‘Vakdocent’, dataField: ‘VakDocentCode’, width: 110, editable: false },
{ text: ‘Vak’, dataField: ‘VakCode’, width: 60, editable: false, cellsalign: ‘center’ },
{ text: ‘Aantal lln’, dataField: ‘AantalLeerlingen’, width: 70, editable: false, cellsalign: ‘center’ }
]
});

$(“#admintable”).on(‘cellvaluechanged’, function (event) {
var args = event.args;
var datafield = event.args.datafield;

if (datafield == ‘ingeleverd’) {
// synchronize with the server – send update command
var rowBoundIndex = args.rowindex + 1;
var newvalue = args.newvalue;
var data = “ID=” + rowBoundIndex + “&ingeleverd=” + newvalue;

/*alert(data);*/

$.ajax({
dataType: ‘json’,
url: ‘sql_update_ingeleverd.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
// update failed
commit(false);
}
});
}
});

$(“#knoppen”).jqxToolBar({
theme: ‘energyblue’,
width: 1150,
height: 50,
/*tools: ‘button | button | button | button | button | button’,*/
tools: ‘button’,
initTools: function (type, index, tool, menuToolIninitialization)
{
switch (index) {
case 0:
tool.jqxButton({ height: 40, width: 140});
tool.text(‘Afdrukken’);

tool.on(“click”, function () {
var gridContent = $(“#admintable”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=1000, height=800’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<style>@page{size:landscape;}</style>’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>Voorblad – Dr.Knippenbergcollege</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});
break;
}
}
});
});

[NadezhdaParticipant]

Hello Arneault,

Please, find the following example which shows how to filter and print grid. If you need to implement server filtering you may look at the Grid Server Filtering demo or refer to the Grid Filtering help topic for more information about jqxGrid Filtering.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(10);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                altrows: true,
                sortable: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });
            $("#print").jqxButton();
            $("#filter").jqxButton();

            $("#print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });

            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');
            }

            $("#filter").click(function () {
                addfilter();
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Print" id='print' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Filter" id='filter' />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[ArneaultParticipant]

Hi Nadezhda

Thanks for your answer.
I have implemented your examplecode in mine and see that the problem is not in the grid, but in the toolbar.
In my code (see below) I have two print buttons. One in a toolbar and one in the html code. When pressing the printbutton in the html code, the filter remains in the grid. But when I press the printbutton in the toolbar, the filter is reset.
I want to use the printbutton in the toolbar and keeping the filter. Can you tell me what to do?

Thanks, Arneault

<!DOCTYPE html>
<html>
<head>
<title>Administratie</title>

<!–<link rel=”stylesheet” href=”styles/admin.css”>–>

<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.fresh.css” type=”text/css” />

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.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/jqxmenu.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.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.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtoolbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.export.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
var source =
{
dataType: “json”,
cache: false,
dataFields: [
{ name: ‘record_id’, type: ‘integer’ },
{ name: ‘ToetsNr’, type: ‘string’ },
{ name: ‘PakketVak’, type: ‘string’ },
{ name: ‘LesGroep’, type: ‘string’ },
{ name: ‘Surveillant’, type: ‘string’ },
{ name: ‘Lokaal’, type: ‘string’ },
{ name: ‘AantalMinuten’, type: ‘string’ },
{ name: ‘Datum’, type: ‘string’ },
{ name: ‘Tijd’, type: ‘string’ },
{ name: ‘ToetsNaam’, type: ‘string’ },
{ name: ‘AantalLeerlingen’, type: ‘string’ },
{ name: ‘GewAantalSurv’, type: ‘string’ },
{ name: ‘VakDocentCode’, type: ‘string’ },
{ name: ‘VakCode’, type: ‘string’ },
{ name: ‘Afdeling’, type: ‘string’ },
{ name: ‘LesGroep2’, type: ‘string’ },
{ name: ‘NietAfdrukken’, type: ‘string’ },
{ name: ‘ingeleverd’, type: ‘integer’ }
],
url: ‘sql_getrooster.php’/*,
filter: function()
{
// update the grid and send a request to the server.
$(“#admintable”).jqxGrid(‘updatebounddata’, ‘filter’);
}*/
};

$(“#admintable”).jqxGrid(
{
width: 1150,
theme: ‘fresh’,
pageable: true,
columnsResize: true,
sortable: true,
editable: true,
autoheight: true,
filterable: true,
selectionmode: ‘singlerow’,
showfilterrow: true,
altrows: true,
ready: function () {
addfilter();
},
autoshowfiltericon: true,
pageSize: 25,
pagermode: ‘simple’,
pagerButtonsCount: 10,
showstatusbar: true,
statusbarheight: 50,
showaggregates: true,
source: source,
columns: [
{ text: ‘Ingeleverd’, dataField: ‘ingeleverd’, width: 150, columntype: ‘checkbox’, filtertype: ‘checkedlist’, editable: true,
aggregates: [{
‘Ingeleverd’: function (aggregatedValue, currentValue) {
if (currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}, {
‘Niet ingeleverd’: function (aggregatedValue, currentValue) {
if (!currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}]},
/*{ text: ‘ID’, dataField: ‘record_id’, width: 50, editable: false },*/
{ text: ‘Datum’, dataField: ‘Datum’, width: 130, editable: false, filtertype: ‘checkedlist’ },
{ text: ‘Groep’, dataField: ‘LesGroep’, width: 70, editable: false },
{ text: ‘Surveillant’, dataField: ‘Surveillant’, width: 100, editable: false },
{ text: ‘Lokaal’, dataField: ‘Lokaal’, width: 70, editable: false },
{ text: ‘Omschrijving’, dataField: ‘ToetsNaam’, width: 200, editable: false },
{ text: ‘Tijd’, dataField: ‘Tijd’, width: 100, editable: false },
{ text: ‘Tijdsduur’, dataField: ‘AantalMinuten’, width: 90, editable: false, cellsalign: ‘center’ },
{ text: ‘Vakdocent’, dataField: ‘VakDocentCode’, width: 110, editable: false },
{ text: ‘Vak’, dataField: ‘VakCode’, width: 60, editable: false, cellsalign: ‘center’ },
{ text: ‘Aantal lln’, dataField: ‘AantalLeerlingen’, width: 70, editable: false, cellsalign: ‘center’ }
]
});

$(“#admintable”).on(‘cellvaluechanged’, function (event) {
var args = event.args;
var datafield = event.args.datafield;

if (datafield == ‘ingeleverd’) {
// synchronize with the server – send update command
var rowBoundIndex = args.rowindex + 1;
var newvalue = args.newvalue;
var data = “ID=” + rowBoundIndex + “&ingeleverd=” + newvalue;

/*alert(data);*/

$.ajax({
dataType: ‘json’,
url: ‘sql_update_ingeleverd.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
// update failed
commit(false);
}
});
}
});

$(“#knoppen”).jqxToolBar({
theme: ‘energyblue’,
width: 1150,
height: 50,
/*tools: ‘button | button | button | button | button | button’,*/
tools: ‘button’,
initTools: function (type, index, tool, menuToolIninitialization)
{
switch (index) {
case 0:
tool.jqxButton({ height: 40, width: 140});
tool.text(‘Afdrukken’);

tool.on(“click”, function () {
var gridContent = $(“#admintable”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=1000, height=800’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<style>@page{size:landscape;}</style>’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>Voorblad – Dr.Knippenbergcollege</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});
tool.text(‘Afdrukken’);

break;
}
}
});

$(“#print”).jqxButton();

$(“#print”).click(function () {
var gridContent = $(“#admintable”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=1000, height=800’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<style>@page{size:landscape;}</style>’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>jqWidgets</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});
});
</script>

</head>

<body>

<!–<div id=”jqxToolBar”></div>–>

<div id=”knoppen”></div>

<div style=’margin-top: 20px;’>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Afdrukken” id=’print’ />
</div>
</div>

<div style=”float: left;” id=”admintable”></div>

</form>
</body>
</html>

[NadezhdaParticipant]

Hi Arneault,

Here is an example with print button in jqxToolBar:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(10);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                altrows: true,
                sortable: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });
            $("#print").jqxButton();
            $("#filter").jqxButton();

            $("#print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });

            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');
            }

            $("#filter").click(function () {
                addfilter();
            });

            $("#jqxToolBar").jqxToolBar({
                width: 850, height: 35, tools: "button | dropdownlist combobox | input",
                initTools: function (type, index, tool, menuToolIninitialization) {
                    switch (index) {
                        case 0:
                            tool.text("printButton");
                            break;
                        case 1:
                            tool.jqxDropDownList({ width: 130, source: ["Affogato", "Breve", "Café Crema"], selectedIndex: 1 });
                            break;
                        case 2:
                            tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                            break;
                        case 3:
                            tool.jqxInput({ width: 200, placeHolder: "Type here..." });
                            break;
                    }
                }
            });

            $("button.jqx-toolbar-tool").jqxButton();
            $("button.jqx-toolbar-tool").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxToolBar">
        </div>
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Print" id='print' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Filter" id='filter' />
            </div>
        </div>
    </div>
</body>
</html>

If you would like you can also use print button in grid’s toolbar. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(10);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                altrows: true,
                sortable: true,
                filterable: true,
                showtoolbar: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });
            $("#print").jqxButton();
            $("#filter").jqxButton();

            $("#print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });

            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');
            }

            $("#filter").click(function () {
                addfilter();
            });

            $('#jqxgrid').jqxGrid({
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Grid's toolbar button: </span>");
                    var button = $("<input id='toolbarButton' type='button' value='toolbarButtonPrint' style='' />");
                    toolbar.append(container);
                    container.append(span);
                    container.append(button);

                    var oldVal = "";
                    button.on('click', function (event) {
                        var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                        var newWindow = window.open('', '', 'width=800, height=500'),
                        document = newWindow.document.open(),
                        pageContent =
                            '<!DOCTYPE html>\n' +
                            '<html>\n' +
                            '<head>\n' +
                            '<meta charset="utf-8" />\n' +
                            '<title>jQWidgets Grid</title>\n' +
                            '</head>\n' +
                            '<body>\n' + gridContent + '\n</body>\n</html>';
                        document.write(pageContent);
                        document.close();
                        newWindow.print();
                    });
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Print" id='print' />
            </div>
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Filter" id='filter' />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[ArneaultParticipant]

Hi Nadezhda, it works!!
Thanks for your good advice!

Arneault

[Author]

Posts