Programmatic usage of FilteringTable

I’m using FilteringTable in a dynamically generated website, here’s how I got it working…

Thanks to Tom Trenka for the original nudge in the direction of the Dojo nightly test for the programmatic usage of FilteringTable

/*
* Dynamic Filtering Table
*/

// Creates the FilteringTable widget and ties it to an existing HTML Table.
// Call once on load.

function doCreateFilteringTable(view) {
// debugger;
dojo.io.bind({
url: "/get_columns?view="+view,
load: handleCreateFilteringTable,
error: handleError,
timeout: handleTimeout,
mimetype: "application/json"
});
}

// Populates the FilteringTable widget with live data.
// Call whenever you want.

function doUpdateFilteringTable(view) {
// debugger;
var url;
url="/get_rows?view="+view;

dojo.io.bind({
url: url,
load: handleUpdateFilteringTable,
error: handleError,
timeout: handleTimeout,
mimetype: "application/json"
});
}

function handleCreateFilteringTable(type,data,evt) {
var e;

// debugger;

try {

var table_id="tbl_"+data.view;
var widget_id=table_id; // they don't need to be the same

var table;
table=dojo.widget.createWidget(
"dojo:FilteringTable",
{
// this provides unique id for table rows
valueField:"id",

// must provide this so that we can find it again,
// otherwise random id is generated
widgetId: "tbl_"+data.view,

},
dojo.byId(table_id)
);

// add the columns
for (x in data.columns)
{
var col=data.columns[x];
table.columns.push(table.createMetaData(col));
}

// set the initial data set to be empty
table.store.setData([]);

// fetch the data
doUpdateFilteringTable(data.view);
} catch (e) {
var errstr=e.name+": "+e.message;
doLog(errstr,"error");
}
}

function handleUpdateFilteringTable(type,data,evt) {
// debugger;

var e;

/* get list of tickers and build table from them */
try {
var view=data.view;

// fill in table body
var tabledata=[];
var table;
var id;
var entry;
var x;
var col;

table=dojo.widget.byId("tbl_"+view);
for (id in data.list)
{
// construct line
var line={};
entry=data.list[id];

for (x in entry)
{
// add one cell
// This is the format expected by dojo:filteringTable
var value;
col=entry[x];
line["id"]=id;
line[col["heading"]]=col["value"]
}

// now add the row
tabledata.push(line);
}

table.store.setData(tabledata);
} catch (e) {
var errstr=e.name+": "+e.message;
doLog(errstr,"error");
}
}

In this example, the server is returning this for get_columns():

{
"columns": [
{"dataType": "String", "field": "Column1"},
{"dataType": "String", "field": "Column2"},
{"dataType": "String", "field": "Column3"},
etc...
],
other stuff...
}

and get_rows() returns this from the server:

{
"list": {
"id1": [
{"heading": "Column1", "value": 25},
{"heading": "Column2", "value": "ABC.L"},
{"heading": "Column3", "value": 395}
],
"id2": [
{"heading": "Column1", "value": 57},
{"heading": "Column2", "value": "MFXYZ.L"},
{"heading": "Column3", "value": 42}
]
}
}

(I've removed non-relevant stuff from these responses for clarity.)

14 Comments

  • Mehul

    Reply Reply December 28, 2006

    Hi,

    Instead of using dojo.io.bind, I’m using Spring MVC to determine what JSP page will be displayed and what data is should display.

    So instead of data in your example, I would have companies that I would need to loop through.

    //populate my store for filteringTable

    My question is, how can I use company.id, company.symbol, company.name etc to populate a javascript array that would be my store for the table? I’m not able to figure out how to extract the value from JSTL variable into Javascript.

    Any suggestions?

  • Mehul

    Reply Reply December 28, 2006

    In my previous post, my JSTL stuff somehow didn’t show up…basically it was a forEach statement with items=”${companies}” and var=”company”

  • Rachel

    Reply Reply December 28, 2006

    I don’t use JSP or JSTL myself so don’t know the answer to your question.

    However, I wonder whether you are confusing client-side Javascript with server-side JSTL?

    In my example, the server-side is generating JSON which is being returned to the JavaScript client-side. Could you do the same from your JSP page? In this case, your question would really be: how to extract the variable from JSTL into JSON – the Javascript client should then be able to get direct access to the JSON data array.

  • Joshua

    Reply Reply February 20, 2007

    What does the data format returned by get_columns and get_holdings look like?

  • Rachel

    Reply Reply February 20, 2007

    Joshua,

    I’ve added some detail about the returned data from get_columns and get_holdings above, hope that helps…

  • Adam

    Reply Reply March 12, 2007

    Hi Rachel,

    Do you know where I can find the complete list of data types supported by the table columns? Also, do you know if an image is displayed, if a sortable weight can be assigned?

  • Seb

    Reply Reply March 16, 2007

    Hello all,

    I’m currently looking for a way to filter my data regarding a page size (max table length) and an offset, so I could reduced the size off the view of my table.

    Did someone managed to do it with the dojo library and the FilteringTable widget ?

    Thanks in advanced.

  • Guest

    Reply Reply May 23, 2007

    The Link to the nightly build for demo of Filtering table is not working:
    Dojo nightly test for the programmatic usage of FilteringTable
    Can someone point to the updated page please.

  • Rachel

    Reply Reply June 2, 2007

    Apparently, they’re not going to put FilteringTable in the new 0.9 release, which the nightly build site is now using. There’s going to be a new Grid widget instead.

  • ovidiu

    Reply Reply June 25, 2007

    Hi everyone,

    Each time a person wants to add data to a filteringTable the setData method is use.

    A filteringTable can’t be filled colum after column in a programmatic way?

    I need it to show a table with teacher name’s and for each teacher I need a column with his courses. The courses are contained in a Select widget

    For this kind of manipulation the setData method is inadapted

    How can I proceed?

  • ljn

    Reply Reply July 20, 2007

    How do I programatically destroy the table.

  • Jeff

    Reply Reply October 15, 2007

    Can we add image in a filtering table?

  • anatolyg

    Reply Reply November 28, 2007

    Hello.

    I am using this apprach to show the table.
    I got the problem with big tables.

    When we try sorting of big table (350rows X 6 columns)IE shows Dialog saying:

    Stop running this script?

    A script on this page is causing Internet Explorer to run slowly.
    If it continues to run, you computer may become unresponsive.
    Yes No

    The size of the table is like that:
    columns: 6
    rows: 350

    If the table have 300 rows it is ok.

    The table shows all loaded modules in the system like msinfo32.exe on XP and number of rows is 900 on my PC

    Anybody have such perfomance problem?
    Any idea how to solve?

    This IE Dialog appears each time I start Sorting of the table.

    I can send file with JSON table

    Thanks,
    Anatoly

Leave A Response

* Denotes Required Field