Bug: cannot reload/change data after sort

There is a long standing bug which prevents loading different data set after the grid was sorted either by clicking on the column header or calling sort() method.

This bug is related to the fact that in some cases it is necessary to reload the same dataset to reflect changed values but keep current selection and sort order. I still don't know what is the best way to distinguish between this scenario and the one where you load different data set and want to reset/clear selection and sort order (any suggestions are welcome :-).

There were already several workarounds in the forum but I want to publish them again as the old ones seem to be difficult to find.

Changing JS array
-----------------

When changing or replacing js array source you have to clear row, sort and selection models:

//	clear row model
obj.setRowProperty("value", function(i){return i});
obj.setRowProperty("order", function(i){return i});
obj.setRowProperty("count", myData.length);

//	clear selection model
obj.setSelectionProperty("index", -1);

//	clear sort model
obj.setSortProperty("index", -1);
obj.setSortProperty("direction", "none");

obj.refresh();

Full page example:

<html>
<head>
    <link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/grid.js"></script>

    <style>
        .active-controls-grid {height: 120px; border: 1px solid #ccc; font: menu;}
    </style>

    <script>
        var myData1 = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"]
        ];

        var myData2 = [
            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"]
        ];

        var myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];
    </script>
</head>
<body>

<button onclick="setNewData(myData1)">Dataset 1</button>
<button onclick="setNewData(myData2)">Dataset 2</button>

<script>

    var myData = myData1;

    var obj = new Active.Controls.Grid;

    obj.setRowProperty("count", myData.length);
    obj.setColumnProperty("count", 5);

    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});

    document.write(obj);

    function setNewData(dataArray){

        myData = dataArray;

        //	clear row model
        obj.setRowProperty("value", function(i){return i});
        obj.setRowProperty("order", function(i){return i});
        obj.setRowProperty("count", myData.length);

        //	clear selection model
        obj.setSelectionProperty("index", -1);

        //	clear sort model
        obj.setSortProperty("index", -1);
        obj.setSortProperty("direction", "none");

        obj.refresh();

    }

</script>
</body>
</html>

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

Reloading XML data

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

When loading different XML file you have to clear row, sort and selection models. You can add this code to the Active.HTTP.Request class:

// fixing 'response' method
Active.HTTP.Request.prototype.response = function(){

    var obj = this.$owner;

    if (!obj) {return}

    //	clear row model
    obj.setRowProperty("value", function(i){return i});
    obj.setRowProperty("order", function(i){return i});
    obj.setRowProperty("count", this.getCount());

    //	clear selection model
    obj.setSelectionProperty("index", -1);

    //	clear sort model
    obj.setSortProperty("index", -1);
    obj.setSortProperty("direction", "none");

    obj.refresh();
}

Full example (assumes you have two xml files: list1.xml and list2.xml)

<html>
<head>
    <link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/grid.js"></script>

    <style>
        .active-controls-grid {height: 200px; font: menu;}
    </style>
</head>
<body>
<button onclick="newData('list1.xml')">Dataset 1</button>
<button onclick="newData('list2.xml')">Dataset 2</button>
<script>

    // fixing 'response' method
    Active.HTTP.Request.prototype.response = function(){

        var obj = this.$owner;

        if (!obj) {return}

        //	clear row model
        obj.setRowProperty("value", function(i){return i});
        obj.setRowProperty("order", function(i){return i});
        obj.setRowProperty("count", this.getCount());

        //	clear selection model
        obj.setSelectionProperty("index", -1);

        //	clear sort model
        obj.setSortProperty("index", -1);
        obj.setSortProperty("direction", "none");

        obj.refresh();
    }


    var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

    var table = new Active.XML.Table;
    table.setURL("list1.xml");
    table.request();

    var obj = new Active.Controls.Grid;
    obj.setColumnProperty("texts", columns);
    obj.setDataModel(table);
    document.write(obj);

    function newData(URL){
        table.setURL(URL);
        table.request();
    }

</script>
</body>
</html>

Alex (ActiveWidgets)

October 19,

Hi Alex,
Will it work for V2 also ???

James

October 20,

I just tested.
It does not work in V2 with csv data source.
Alex!!!!!!!!!!!!!!!!
Help us to get out of it.

Cris

October 20,

Please give the solution for V2 also.

Vipin

October 21,

Alex,

Regarding your dilemma, you can define 2 method for grid.
one for refresh data [keep selection and/or sort order by argument(s)]
and another one: load data who clear selection & sort before.

Pascal

October 21,

anyone tris this patch with CSV data src and V2.
I tried , but didnt work :-(

Anushka

October 24,

Alex,

I am having the same issue, but I am not using the XML request method but rather am updating the XML dynamically from JavaScript.

I am using my refresh function:

/*
  **  Fills the specified grid with the specified XML string.
  */
  function doPopulateGrid (oGrid, sXML, bDeferRefresh) {

    // Create ActiveWidgets data model - XML-based table
    var table = new Active.XML.Table;
    
    // Provide data XML
    table.setXML (sXML);
    
    // Provide external model as a grid data source
    oGrid.setDataModel (table);
    if (!bDeferRefresh)
      oGrid.refresh ();
  }

Do you have a similar patch for this method?

Thanks!

Jason Johnson

November 17,

Thankyou Alex, I've been looking for this fix for a while now.

James Hawkins

December 11,

Mmmz.. this solution does not work when using the 'paging' patch, as provided with 1.0.2.

The same problem persists: nothing happens after adding/removing data.

Is there a solution?

Rekcor

October 13,

I rewrote the function for pagingated grids, but after this, sorting doesn't work anymore:

function dataGrid_paging_setNewData(oDatagrid, aDatagridData)
{ 
   
  obj    = oDatagrid;
  myData = aDatagridData; 
  alert(myData);
  //clear row model 
  obj.setProperty("row/value", function(i){return i}); 
  obj.setProperty("row/order", function(i){return i}); 
  obj.setProperty("row/count", myData.length);
  
  //clear selection model 
  obj.setSelectionProperty("index", -1); 

  // re-initialize the row values 
  var newCount = obj.getProperty("row/count");
   
  var rowValues = []; 
  for(var i=0; i < newCount; ++i)
  {
    rowValues[i] = i;
  }
   
  obj.setRowProperty("values", rowValues);
  
  //clear sort model 
  obj.setSortProperty("index", -1); 
  obj.setSortProperty("direction", "none");
    
  obj.refresh();      
}

Rekcor

October 14,

This topic is archived.

Bug: cannot reload/change data after sort

See also:

Search

New Data Grid

Version 2