« Return to Thread: Clearting Out and re-populating filteringtable

Re: Clearting Out and re-populating filteringtable

by Angel Monterde :: Rate this Message:

Hi!, I know that is out date, but i have the same problem and I can change the columns, but the way is dirty, by dom manipulation. Full code is:

///////////////////////////
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Programmatic FilteringTable Test</title>

<style type="text/css">
/***
The following is just an example of how to use the table.
You can override any class names to be used if you wish.
***/
table {
font-family:Lucida Grande, Verdana;
font-size:0.8em;
width:100%;
border:1px solid #ccc;
border-collapse:collapse;
cursor:default;
background-color:#FFFFFF;
}
table td,
table th{
padding:2px;
font-weight:normal;
}
table thead td, table thead th {
background-image:url(img/ft-head.gif);
background-repeat:no-repeat;
background-position:top right;
}

table thead td.selectedUp, table thead th.selectedUp {
background-image:url(img/ft-headup.gif);
}

table tbody tr td{
border-bottom:1px solid #ddd;
}
table tbody tr.alt td{
background: #e3edfa;
}
table tbody tr.selected td{
background: yellow;
}
table tbody tr:hover td{
background: #a6c2e7;
}
table tbody tr.selected:hover td{
background:#ff9;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var djConfig = { isDebug: false, debugAtAllCosts: false };
</script>

<script type="text/javascript" src="dojo-0.4.2-ajax/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.FloatingPane");
dojo.require("dojo.widget.FilteringTable");
dojo.require("dojo.widget.Button");
dojo.hostenv.writeIncludes();

var parametros = {title: "Mi primer floating pane", id:"panFlo",resizable:true, hasShadow:true, displayCloseAction:true, executeScripts: true, toggle:"explode"
,toggleDuration:500};

var panelFlotante;

dojo.addOnLoad(function() {
var div =document.getElementById("panelFlotante");
div.setAttribute('id', 'panelFlotante');
//div.innerHTML = "Contenido del div";
div.style.position="absolute";
div.style.width="300px";
div.style.height="300px";
div.style.top="50px";
div.style.left="50px";
panelFlotante = dojo.widget.createWidget("FloatingPane",parametros,div);

// la tabla

filteringTable = dojo.widget.createWidget("dojo:FilteringTable",{id:"miTabla", valueField: "myId", alternateRows:"true"},dojo.byId("content"));

for (var x = 0; x<testColumns.length; x++) {
filteringTable.columns.push(filteringTable.createMetaData(testColumns[x]));
}

filteringTable.store.setData(testData);

var botonDojo = dojo.widget.createWidget("dojo:Button", {}, dojo.byId("buscar"));

// enlazamos el onClick del botón con la función de seleccionar los datos marcados de la tabla
dojo.event.connect(botonDojo, "onClick", "muestraDatos");
});

var testColumns = [
{ field: "ColumnA" },
{ field: "ColumnB", dataType:"number" },
{ field: "ColumnC" }
];
var testData = [
{ myId:0, "ColumnA": "abc", "ColumnB": "123", "ColumnC": "!@#" },
{ myId:1, "ColumnA": "def", "ColumnB": "456", "ColumnC": "asdfasd" },
{ myId:2, "ColumnA": "hij", "ColumnB": "789", "ColumnC": "asdfasdf" },
{ myId:3, "ColumnA": "klm", "ColumnB": "098", "ColumnC": "asdfasdf"},
{ myId:4, "ColumnA": "opq", "ColumnB": "765", "ColumnC": "qowie" },
{ myId:5, "ColumnA": "rst", "ColumnB": "432", "ColumnC": "xcvms" },
{ myId:6, "ColumnA": "uvw", "ColumnB": "101", "ColumnC": "lwqkejr" },
{ myId:7, "ColumnA": "xyz", "ColumnB": "234", "ColumnC": "zpxocivu" }
];

function muestraDatos(evt){
var tabla = dojo.widget.byId("miTabla");
var objeto =tabla.getSelectedData();
alert(objeto);
debugger;

}

function replaceStructure(){
testColumns = [{ field: "p", dataType:"number"}, {field: "nombre" } ];
testData = [{ myId:0, "nombre": "perico de los palotes", "p": "123", "z": "!@#" },
{ myId:1, "nombre": "def", "p": "456", "z": "asdfasd" },
{ myId:2, "nombre": "hij", "p": "789", "z": "asdfasdf" }];

filteringTable.store.clearData();

/////////////////////// ELIMINAR HIJOS

var table = document.getElementById("content");

for(var i=0; i<table.childNodes.length; i++){
var child = table.childNodes[i];
//debugger;
if(child.tagName=="THEAD"){
table.removeChild(child);
}
}
filteringTable.columns = [];

var thead = document.createElement("thead");
table.appendChild(thead);

////////////////
// repoblate data
////////////////
for (var x = 0; x<testColumns.length; x++) {
filteringTable.columns.push(filteringTable.createMetaData(testColumns[x]));
}

filteringTable.store.setData(testData);
}

</script></head>
<body>

<div id="panelFlotante">
<table id="content" style="width: 400px; height: 100px"></table>
<button id="buscar">Buscar </button>
<button id="replaceStructure" onclick="replaceStructure()"> cambiar Estructura tabla</button>
</div>

</body>
</html>

//////////////////////////

I dont know if later can have a bug, I try it and i dont lost events, or filtering criteria. The function that change
structure is replaceStructure(). I define the new type of data (var testData) and structure (var testColumns), remove all data with

filteringTable.store.clearData();

and i take the dom node of table called "content". Then I take their childs and i remove only the child witch tagName is "THEAD".
Then i put a new array of columns in the filtering table with:

filteringTable.columns = [];

and append a new node thead to content, and i work with the filtering table normally.

Filtering wasn't designed to rebuild columns on the fly, just to repopulate the data within the columns. It's pretty rare you run across a situation where you need to rebuild the columns as well as the data; in general I'd say you're trying a solution that sounds to me like you should really be using 2 instances of Filtering for. While it's theoretically possible to do, I don't see the point of doing it.

Filtering.store.clearData() will clear all of the existing data out of the underlying store and reflect those changes in the table. While you can use setData([]), I would recommend that you use clearData (different events are fired, so there's performance differences).

trt

MW wrote:

Damn - I hate that - just posed this and found a solution -

removed
- this.fTable.store.clearData();
and replaced with
- this.fTable.columns = [];

is this correct? - or is there a method to clear the columns?

MW wrote:

Hi, just a quick question - if i want to re-use a filteringtable widget with a different dataset [ potentially different columns and rows ] - how do i clear out the columns ?

I've tried filteringtable.store.clearData();

but this throws an error -> jojo.html.setClass() failed [TypeError: node has no properties, file: http://auroradev.net/dojo/dojo.js, line: 4679]

code fragment below:-

populate: function(data){
var rows = data["rows"];
var columns = data["columns"];
this.fTable.store.clearData(); // if removed, then columns don't reset - left in produces error
this.fTable.valueField = data["key"];
for (var x = 0; x<columns.length; x++) {
this.fTable.columns.push(this.fTable.createMetaData(columns[x]));
}
this.fTable.store.setData(rows);
}

any help much appreciated.

« Return to Thread: Clearting Out and re-populating filteringtable