How to filter dojo categorized treeGrid?

Question

I have dojo treeGrid that works fine. It shows projects with cost categorized by year. Also it shows totals. But when I try to filter it by one of column it mess up the grid (breaks categories and filter records improperly). Do I use grid.filter properly? I need to keep categorized structure but remove/filter certain records. Or should I refresh jsonStore somehow instead?

//HTML
<div id="treeGrid"></div>

<a href="javascript:void(0)">
    <span id='button1'>Filter</span>
</a>


//JavaScript
var layout = [ 
    { cells: [ 
       [ {field: "year", name: "Year"}, 
         {field: "childItems", 
           children: [ { field: "status", name: "Status"}, 
                       { field: "programname", name: "Program Name"}, 
                       { field: "programcost", name: "Program Cost"}
                     ], 
                  aggregate: "sum" 
                  } 
                  ]] } ]

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "<........>"});

var grid = new dojox.grid.TreeGrid({ 
    structure: layout, 
    store: jsonStore, 
    query: {type: 'year'}, 
    queryOptions: {deep: true},
    rowSelector: true, 
    openAtLevels: [false],
    autoWidth: true,
    autoHeight: true
    }, 
    dojo.byId("treeGrid"));


    /* attach an event handler */
on(dom.byId("button1"),'click',
    function(e){
        grid.filter({status: "Approved"});
    }
   );


grid.startup();

dojo.connect(window, "onresize", grid, "resize");


/* sample data ======================================================
{
  "identifier": "id",
  "label": "name",
  "items": [
    {
      "id": "2018",
      "type": "year",
      "year": "2018",
      "childItems": [
        {
          "status": "Approved",
          "programname": "Program 1",
          "programcost": 100
        },
        {
          "status": "Pending",
          "programname": "Program 2",
          "programcost": 200
        }
      ]
    },
    {
      "id": "2016",
      "type": "year",
      "year": "2016",
      "childItems": [
        {
          "status": "Pending",
          "programname": "Program 3",
          "programcost": 300
        }
      ]
    }
  ]
}
*/