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>

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

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

Please give the solution for V2 also.

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.

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

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!

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

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?

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();      

}

Forum search