JqxGrid filter is lost after I reload the page

Question

I am working with an overview page, where I use JqxGrid to display all the items in our company. You can click on an item to go to the next page where you can view the details of this item. If you set a filter in the overview page and go to the detail page you lose this filter. Which is not most user-friendly. I was wondering if anybody knows how I could prevent this from happening? I tried jq cookies already but it doesnt seem to work.

$(document).ready(function () {
    var sourcePO =
    {
      datatype: "xml",
      datafields: [
        { name: 'Name', type: 'string'},
        { name: 'ID', type: 'string'},
        { name: 'Manufacturer', type: 'string'},
        { name: 'Application', type: 'string'},
        { name: 'Version', type: 'string'},
        { name: 'Status',      type: 'string'},
        { name: 'Product',       type: 'string'},
        { name: 'Requester',    type: 'string'}
      ],
      root: "Data",
      record: "record",
      id: 'id',
      url: "Data.xml",
    };

    var dataAdapterPO = new $.jqx.dataAdapter(sourcePO);
    var DocumentHeight = $(document).height();
    $("#jqxgridPO").jqxGrid(
      {
        theme: 'metro',
        width: '100%',
        height: (DocumentHeight - 250),
        source: dataAdapterPO,
        showfilterrow: true,
        filterable: true,
        sortable: true,
        selectionmode: 'singlerow',
        columnsresize: true,
        columns: [
          { text: 'Name', filtertype: 'textbox', datafield: 'Name',  width: '11%' },
          { text: 'ID', filtertype: 'textbox', datafield: 'ID',  width: '11%' },
          { text: 'Manufacturer', filtertype: 'textbox', datafield: 'Manufacturer',  width: '11%' },
          { text: 'Application', filtertype: 'textbox', datafield: 'Application',  width: '11%' },
          { text: 'Version', filtertype: 'textbox', datafield: 'Version',  width: '4%' },
          { text: 'Status',      filtertype: 'checkedlist', datafield: 'Status',       width: '7%' },
         { text: 'Product',       filtertype: 'textbox', datafield: 'Product',        width: '7%' },
          { text: 'Requester',    filtertype: 'textbox', datafield: 'Requester',     width: '10%' },
        ]
      }
    );
        
          $("#jqxgridPO").on("rowdoubleclick", function (event) {
              var data = $('#jqxgridPO').jqxGrid('getrowdata', event.args.rowindex);
              window.location.assign("../Productdetail.php?id=" + data.Name +  data.ID);
          });

Does anybody have any idea on how I keep the filters after clicking on a product and leaving for the product webpage? Particularly the checkbox type filters.

Thank you!

Answer 1

Why not have your page just hide the Grid and show the product details in a Modal JQXWindow, when the modal window closes, show your grid again.