jqGrid 4.4.4 How to use the filterToolbar with complex objects with formatted columns?

Question

I would like to have the filterToolbar filter the Sports? How can this be done? Currently, It returns nothing. The Sports column has concatenated all CatagoryID=1 in the data, example only: "Baseball, Chess, Hockey". The data object is complex in that it has arrays of other objects and has single elements too, like Sex or LastName. Sports is an array.

This is my working code...

$(document).ready(function() {

  var mydata = [{
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 2,
      "Value": "Chess"
    }],
    "Notes": [],
    "Id": "42",
    "FirstName": "Tony",
    "LastName": "Fischer",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Soccer"
    }],
    "Notes": [],
    "Id": "61",
    "FirstName": "Joe",
    "LastName": "Falcon",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Soccer"
    }],
    "Notes": [],
    "Id": "89",
    "FirstName": "Judith",
    "LastName": "Tinis",
    "Sex": "F"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 3,
      "Value": "Pingpong"
    }, {
      "CategoryID": 1,
      "Value": "Hockey"
    }, {
      "CategoryID": 1,
      "Value": "Checkers"
    }],
    "Notes": [],
    "Id": "89",
    "FirstName": "Boris",
    "LastName": "Spassky",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 2,
      "Value": "Chess"
    }],
    "Notes": [],
    "Id": "77",
    "FirstName": "Betty",
    "LastName": "Bundtcake",
    "Sex": "F"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Baseball"
    }],
    "Notes": [],
    "Id": "88",
    "FirstName": "Henry",
    "LastName": "Aaron",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Football"
    }, {
      "CategoryID": 1,
      "Value": "Soccer"
    }],
    "Notes": [],
    "Id": "99",
    "FirstName": "MaryLou",
    "LastName": "Terrin",
    "Sex": "F"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 3,
      "Value": "Pingpong"
    }, {
      "CategoryID": 1,
      "Value": "Hockey"
    }, {
      "CategoryID": 1,
      "Value": "Checkers"
    }],
    "Notes": [],
    "Id": "22",
    "FirstName": "Ralph",
    "LastName": "Parins",
    "Sex": "M"
  }, {
    "Addresses": [],
    "PhoneNumbers": [],
    "Certifications": [],
    "Sports": [{
      "CategoryID": 1,
      "Value": "Risk"
    }],
    "Notes": [],
    "Id": "35",
    "FirstName": "Svetzor",
    "LastName": "Gligorich",
    "Sex": "M"
  }];

  $("#mygrid").jqGrid({
    datatype: "local",
    data: mydata,
    loadOnce: true,
    colNames: ['Id', 'First', 'Last', 'Gender', 'Sports'],
    colModel: [{
      name: 'Id',
      index: 'Id',
      hidden: true,
      key: true,
      editable: false
    }, {
      name: 'FirstName',
      index: 'FirstName',
      width: 100,
      sortable: true
    }, {
      name: 'LastName',
      index: 'LastName',
      width: 120,
      sortable: true
    }, {
      name: 'Sex',
      index: 'Sex',
      width: 130,
      sortable: true
    }, {
      name: 'Sports',
      width: 250,
      jsonmap: 'Sports.0',
      // this formatter says if array data has something and it's CategoryID is 1, then join all the elements' 'Value' seperated by a ','
      formatter: function(cellvalue) {
        return cellvalue.length == 0 ? '' : $.map(cellvalue, function(obj) {
          return obj.CategoryID == 1 ? obj.Value : null
        }).join(', ');
      }
    }],
    sortname: 'LastName',
    pager: $('#pager'),
    rowNum: 5,
    rowList: [5, 10, 20, 50],
    sortorder: "desc",
    viewrecords: true,
    caption: "Team Members"
  });
  $("#mygrid").jqGrid('filterToolbar', {
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: "cn"
  });
});

html,
body {
  font-size: 75%;
}
.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select {
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Griddy</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body {
            font-size: 75%;
        }

        .ui-jqgrid .ui-search-table .ui-search-input > input, .ui-jqgrid .ui-search-table .ui-search-input > select {
            display: block;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        //$.jgrid.no_legacy_api = true;
        //$.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.4/js/jquery.jqGrid.src.js"></script>

</head>
<body>

    <table id="mygrid"></table>
    <div id="pager" style="text-align:left;"></div>
    <div id="pager"></div>

</body>

</html>