3.2.0

Refshing the grid

Hi,

I am using grid examples and trying to refresh/reload the grid after performing sort on some columns.

I used obj.refresh() but this does nothing.

The examples in turorial folder have refresh button that refreshes the grid properly. however, I dont want to use the additional javascript file used to generate the button and rund the code.

I want to add a Refresh button on Basic.htm sample and refresh the grid on click. Can it be done using the <textarea> as done in tutorial samples?

please help.

I tried the following but no luck.
<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="../../runtime/lib/grid.js"></script>

    <!-- grid format -->
    <style>
        .active-controls-grid {height: 100%; font: menu;}

        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;} /* background-color: threedlightshadow;}*/
        .active-column-2 {text-align: right;}
        .active-column-3 {text-align: right;}
        .active-column-4 {text-align: right;}

        .active-grid-column {border-right: 1px solid threedshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}

    </style>

    <!-- grid data -->
    <script>
        var myData = [
            ["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 myColumns = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];
    </script>
</head>
<body>
<p align="center">
<textarea id="grid4" name="griddef" wrap="off" style="height:100; width:700" target="width:700px;height:375px" rows="10" cols="10">  
 var myData = [
    ["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 myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

    var obj = new Active.Controls.Grid;
    obj.setRowHeaderWidth("0px");	//hide first column
    obj.setRowProperty("count", 5);
    obj.setColumnProperty("count", 5);
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});	
    obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
  	document.write(obj);

</textarea>
    <input type="button" id="bt" name="rsh" value="Refresh" onclick="refresh()"></input>
</p>
<div align="center">
  <center>
<table border="1" cellspacing="1" height=200 bordercolor="#FDF9C8" width="50%" id="AutoNumber1" bordercolorlight="#99CCFF" bordercolordark="#6699FF">
  <tr>
    <td width="100%" align="center">	<script> 
    		var obj = new Active.Controls.Grid;
        obj.setRowProperty("count", 5);
        obj.setColumnProperty("count", 5);

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

        obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
        document.write(obj);
     </script>   &nbsp;</td>
  </tr>
</table>

  </center>
</div>
<script>
    function draw_grid()	//if I call this from <td> does not work.  I must put the code between <td></td> as above
    {
        var obj = new Active.Controls.Grid;
        obj.setRowProperty("count", 5);
        obj.setColumnProperty("count", 5);

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

        obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
        document.write(obj);
    }

    function refresh()
    {
        var text = document.getElementById("grid4").value;
        alert(text);
        document.write(text);
        
        
        
        /*var array = obj.getSelectionProperty("values");
        alert(array[0]);
        alert(obj.getRowProperty("count"));
        alert("refreshin...");*/
    }
</script>
</body>
</html>
MAK
April 28,
Calling refresh() will not change the order of the rows. 'Refresh' method just sends the current state of the grid js object into HTML. So you have to change the grid state (row order) and then call refresh(). The simplest way to reset the row order is by assigning row/count property (it can be the same one).
Alex (ActiveWidgets)
May 4,
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>

<!-- grid format -->
<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;} /* background-color: threedlightshadow;}*/
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}

</style>

<!-- grid data -->
<script>
var myData = [
["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 myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>
<p align="center">
<textarea id="grid4" name="griddef" wrap="off" style="height:100; width:700" target="width:700px;height:375px" rows="10" cols="10">
var myData = [
["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 myColumns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

var obj = new Active.Controls.Grid;
obj.setRowHeaderWidth("0px"); //hide first column
obj.setRowProperty("count", 5);
obj.setColumnProperty("count", 5);
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
document.write(obj);

</textarea>
<input type="button" id="bt" name="rsh" value="Refresh" onclick="refresh()"></input>
</p>
<div align="center">
<center>
<table border="1" cellspacing="1" height=200 bordercolor="#FDF9C8" width="50%" id="AutoNumber1" bordercolorlight="#99CCFF" bordercolordark="#6699FF">
<tr>
<td width="100%" align="center"> <script>
var obj = new Active.Controls.Grid;
obj.setRowProperty("count", 5);
obj.setColumnProperty("count", 5);

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

obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
document.write(obj);
</script> &nbsp;</td>
</tr>
</table>

</center>
</div>
<script>
function draw_grid() //if I call this from <td> does not work. I must put the code between <td></td> as above
{
var obj = new Active.Controls.Grid;
obj.setRowProperty("count", 5);
obj.setColumnProperty("count", 5);

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

obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
document.write(obj);
}

function refresh()
{
var text = document.getElementById("grid4").value;
alert(text);
document.write(text);



/*var array = obj.getSelectionProperty("values");
alert(array[0]);
alert(obj.getRowProperty("count"));
alert("refreshin...");*/
}
</script>
</body>
</html>
HEYYYYYYYYYYYY<33
dfgdfhfgh
May 12,

This topic is archived.

See also:


Back to support forum