igGrid - two grids set filters

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/employee-data-allDatatypes"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid1" style="margin-bottom: 1rem;"></table>
<table id="grid"></table>
<input type="button" id="refresh" value="Refresh" style="margin-top: 1rem;"/>

JavaScript

$(function () {
var regions = [
	{Region: "North America"},
  {Region: "Europe"},
	{Region: "Asia"},
]

var empleyees = [
	{FirstName: "Downs", LastName:"Holomb", Country:"Italy", Age:35},
  {FirstName: "Betty", LastName:"Trujillo", Country:"USA", Age:26},
	{FirstName: "Hollowe", LastName:"Hollkins", Country:"Spain", Age:31},
	{FirstName: "Joyce", LastName:"Munoz", Country:"Germany", Age:23},
	{FirstName: "Mcenzie", LastName:"Calderon", Country:"France", Age:27},
  {FirstName: "Jon", LastName:"Davis", Country:"USA", Age:25},
	{FirstName: "Bratt", LastName:"Calvin", Country:"China", Age:32}
];

var filterExpr1;
var filterExpr2;

var regionEuropeExpr = {fieldName: "Country", expr: "USA", cond: "doesNotContain", logic: "AND"};
var regionAmericaExpr = {fieldName: "Country", expr: "USA", cond: "contains", logic: "AND"};
var regionAsiaExpr = {fieldName: "Country", expr: "China", cond: "contains", logic: "AND"};



$("#grid1").igGrid({
				autoGenerateColumns: false,
        height: "250px",
        width: "100%",
				columns: [
            { headerText: "Region", key: "Region", dataType: "string" },
				],
				dataSource: regions,
				responseDataKey: "results",
        rendered: function(evt, ui) {
        	//if there is expresion 
       		let value = window.localStorage.getItem("firstGrid");
        	if(value !== "undefined"){
        		filterExpr1 = jQuery.parseJSON(window.localStorage.getItem("firstGrid"));
        	}
          if(filterExpr1){
          	//set again to the first grid and to the second grid
          	setTimeout(() => {
            //first grid set filters
  						$("#grid1").igGridFiltering("filter", ([filterExpr1]));
              let nextFilter = $("#grid1").data("igGrid").dataSource.dataView()[0].Region;
              //based on the value 
              //set filters to the second grid
              if(nextFilter === "Europe"){
                  $("#grid").igGridFiltering("filter", ([regionEuropeExpr]));
              } else if(nextFilter ===...