Silly problem grid works but dataView doesnt

[P Lyon]

What am I doing wrong...I can get the grid to work fine with a data array but NOT the dataView

This works 

--------------

<script>

  var dataView;

  var data = [];

  var grid;

  var columns = [

        {id:"id", name:"id", field:"id"},

        {id:"Town", name:"Town", field:"town"},

        {id:"County", name:"County", field:"county"},

        {id:"Postcode", name:"Postcode", field:"postcode"},

        {id:"Tele", name:"Tele", field:"tele"}

   ];

   var options = {

        enableCellNavigation: false,

        enableColumnReorder: false

   };

  var options = {

    editable: false,

    enableAddRow: false,

    enableCellNavigation: true

  };

  var percentCompleteThreshold = 0;

  var prevPercentCompleteThreshold = 0;

  var h_runfilters = null;

  function myFilter(item, args) {

    return item["percentComplete"] >= args;

  }

  

  $(function () {

 

    dataView = new Slick.Data.DataView({ inlineFilters: true });

    grid = new Slick.Grid("#myGrid", dataView, columns, options);

    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));

    // wire up model events to drive the grid

    dataView.onRowCountChanged.subscribe(function (e, args) {

      grid.updateRowCount();

      grid.render();

    });

    dataView.onRowsChanged.subscribe(function (e, args) {

      grid.invalidateRows(args.rows);

      grid.render();

    });

    // wire up the slider to apply the filter to the model

    $("#pcSlider").slider({

      "range": "min",

      "slide": function (event, ui) {

        if (percentCompleteThreshold != ui.value) {

          window.clearTimeout(h_runfilters);

          h_runfilters = window.setTimeout(filterAndUpdate, 10);

          percentCompleteThreshold = ui.value;

        }

      }

    });

    function filterAndUpdate() {

      var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold;

      var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold;

      var renderedRange = grid.getRenderedRange();

      dataView.setFilterArgs(percentCompleteThreshold);

      dataView.setRefreshHints({

        ignoreDiffsBefore: renderedRange.top,

        ignoreDiffsAfter: renderedRange.bottom + 1,

        isFilterNarrowing: isNarrowing,

        isFilterExpanding: isExpanding

      });

      dataView.refresh();

      prevPercentCompleteThreshold = percentCompleteThreshold;

    }

    // initialize the model after all the events have been hooked up

data<?=$data?> 

    grid = new Slick.Grid($("#myGrid"), data, columns, options);

  });

  

</script>

This Doesnt !!

--------------------

<script>

  var dataView;

  var data = [];

  var grid;

  var columns = [

        {id:"id", name:"id", field:"id"},

        {id:"Town", name:"Town", field:"town"},

        {id:"County", name:"County", field:"county"},

        {id:"Postcode", name:"Postcode", field:"postcode"},

        {id:"Tele", name:"Tele", field:"tele"}

   ];

   var options = {

        enableCellNavigation: false,

        enableColumnReorder: false

   };

  var options = {

    editable: false,

    enableAddRow: false,

    enableCellNavigation: true

  };

  var percentCompleteThreshold = 0;

  var prevPercentCompleteThreshold = 0;

  var h_runfilters = null;

  function myFilter(item, args) {

    return item["percentComplete"] >= args;

  }

  

  $(function () {

  

   //var data = <? echo json_encode($data ); ?>;

   //This is where we echo the PHP variable $data which contains our JavaScript array as a string.

    //grid = new Slick.Grid($("#myGrid"), data, columns, options);

   //<? echo $data ; ?> //This is where we echo the PHP variable $data which contains our JavaScript array as a string.

    

  

  

    dataView = new Slick.Data.DataView({ inlineFilters: true });

    grid = new Slick.Grid("#myGrid", dataView, columns, options);

    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));

    // wire up model events to drive the grid

    dataView.onRowCountChanged.subscribe(function (e, args) {

      grid.updateRowCount();

      grid.render();

    });

    dataView.onRowsChanged.subscribe(function (e, args) {

      grid.invalidateRows(args.rows);

      grid.render();

    });

    // wire up the slider to apply the filter to the model

    $("#pcSlider").slider({

      "range": "min",

      "slide": function (event, ui) {

        if (percentCompleteThreshold != ui.value) {

          window.clearTimeout(h_runfilters);

          h_runfilters = window.setTimeout(filterAndUpdate, 10);

          percentCompleteThreshold = ui.value;

        }

      }

    });

    function filterAndUpdate() {

      var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold;

      var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold;

      var renderedRange = grid.getRenderedRange();

      dataView.setFilterArgs(percentCompleteThreshold);

      dataView.setRefreshHints({

        ignoreDiffsBefore: renderedRange.top,

        ignoreDiffsAfter: renderedRange.bottom + 1,

        isFilterNarrowing: isNarrowing,

        isFilterExpanding: isExpanding

      });

      dataView.refresh();

      prevPercentCompleteThreshold = percentCompleteThreshold;

    }

    // initialize the model after all the events have been hooked up

data<?=$data?> 

    //grid = new Slick.Grid($("#myGrid"), data, columns, options);

       dataView.beginUpdate();

       dataView.setItems(data);

       dataView.setFilter(filter);

       dataView.endUpdate();

       dataView.render();

  });

  

</script>

Thanks

  

[Michael Leibman]

Please read https://github.com/mleibman/SlickGrid/wiki/DataView.

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.