Clearting Out and re-populating filteringtable

[MW]

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.

[MW]

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.

[Joe la Poutre]

On 12/8/06, MW <martinw@...> 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?

This works just fine for me: this.fTable.store.setData([]);

which may be just a tad cleaner if the columns field was not intended
to be exposed (just guessing here).

Cheers,

Joe.
_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest@...
http://dojotoolkit.org/mailman/listinfo/dojo-interest

[MW]

Thanks for that Joe.

Just come accross another problem though:

this
 this.fTable.valueField = data["key"];

doesnt seem to be working, the returned data returns the key [ valueField] thats unique in the returned dataset.

If it set it when the filtertable is instantiated ...

_this.fTable = dojo.widget.createWidget("FilteringTable",{alternateRows:"true", valueField: "ID"},_this._fTable);

it works fine, but I dont want this to happen. I want the returned dataset to set the vaueField - can the valueField only be specified when the widget is created?

any help muchly appreciated.

Martin.

Joe la Poutre wrote:

On 12/8/06, MW <[e-mail]> 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?

This works just fine for me: this.fTable.store.setData([]);

which may be just a tad cleaner if the columns field was not intended
to be exposed (just guessing here).

Cheers,

Joe.
_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
[e-mail]
http://dojotoolkit.org/mailman/listinfo/dojo-interest

[Tom Trenka]

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


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.

[Tom Trenka]

Yes, it can only be set when the widget is created.


Thanks for that Joe.

Just come accross another problem though:

this
 this.fTable.valueField = data["key"];

doesnt seem to be working, the returned data returns the key [ valueField] thats unique in the returned dataset.

If it set it when the filtertable is instantiated ...

_this.fTable = dojo.widget.createWidget("FilteringTable",{alternateRows:"true", valueField: "ID"},_this._fTable);

it works fine, but I dont want this to happen. I want the returned dataset to set the vaueField - can the valueField only be specified when the widget is created?

any help muchly appreciated.

Martin.

Joe la Poutre wrote:

On 12/8/06, MW <[e-mail]> 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?

This works just fine for me: this.fTable.store.setData([]);

which may be just a tad cleaner if the columns field was not intended
to be exposed (just guessing here).

Cheers,

Joe.
_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
[e-mail]
http://dojotoolkit.org/mailman/listinfo/dojo-interest

[sos]

The reason for this is that when you assign value field as the beginning, the FilteringTable sets the valueField on it's "store" element, and from then on uses that (see the postCreate function).  You should instead set the FilteringTable's store.keyField element, or set them both.

Shane

On 08/12/06, MW <martinw@...> wrote:

Thanks for that Joe.

Just come accross another problem though:

this
this.fTable.valueField = data["key"];

doesnt seem to be working, the returned data returns the key [ valueField]
thats unique in the returned dataset.

If it set it when the filtertable is instantiated ...

_this.fTable =
dojo.widget.createWidget("FilteringTable",{alternateRows:"true", valueField:
"ID"},_this._fTable);

it works fine, but I dont want this to happen. I want the returned dataset
to set the vaueField - can the valueField only be specified when the widget
is created?

any help muchly appreciated.

Martin.



Joe la Poutre wrote:

>
> On 12/8/06, MW <martinw@...> 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?
>
> This works just fine for me: this.fTable.store.setData([]);
>
> which may be just a tad cleaner if the columns field was not intended
> to be exposed (just guessing here).
>
> Cheers,
>
> Joe.
> _______________________________________________
> Dojo FAQ: http://dojo.jot.com/FAQ
> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
> Dojo-interest@...
> http://dojotoolkit.org/mailman/listinfo/dojo-interest
>
>

--
View this message in context: http://www.nabble.com/Clearting-Out-and-re-populating-filteringtable-tf2779995.html#a7758573
Sent from the Dojo mailing list archive at Nabble.com.

_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest@...
http://dojotoolkit.org/mailman/listinfo/dojo-interest

_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest@...
http://dojotoolkit.org/mailman/listinfo/dojo-interest

[KevinTrainer]

I had the same issue.  For the app I am developing, the user is allowed to choose a query and I am displaying the results in a filtering table.  What I ended up doing was destroying the existing Filtering table, which deletes the DOM node for the table.  The I programatically created a new table node, created a new FilteringTable, populated the new columns and data then appended the table node to a content div.  This seems to work well.  


......................................

            var testColumns = tableDat.headerInfo
            var testData    = tableDat.rowInfo
           
            if(filteringTable)
              filteringTable.destroy()
         
           table=document.createElement("table");  
           table.className="data";
             
          filteringTable = dojo.widget.createWidget("dojo:FilteringTable",{valueField: "myId"},table);
     
          for (var x = 0; x<testColumns.length; x++) {
        filteringTable.columns.push(filteringTable.createMetaData(testColumns[x]));
          }
                       
                       
        filteringTable.store.setData(testData);

       document.getElementById('content').appendChild(table);
......................................

However I am a newbie when it comes to the dojo toolkit so if there is a better way Id like to know about it.

By the way, I think the tool kit is fantastic!

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.

[Angel Monterde]

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.