Rachel’s Blog » Blog Archive » Programmatic usage of FilteringTable

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.)

				
				
					
						This entry was posted
												on Friday, December 15th, 2006 at 12:08 pm						and is filed under dojo.
						You can follow any responses to this entry through the RSS 2.0 feed.

													You can leave a response, or trackback from your own site.



	


	14 Responses to “Programmatic usage of FilteringTable”

	

	
		
			Mehul Says:
						


			December 28th, 2006 at 12:20 am 

			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 Says:
						


			December 28th, 2006 at 12:22 am 

			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 Says:
						


			December 28th, 2006 at 2:06 pm 

			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 Says:
						


			February 20th, 2007 at 4:53 pm 

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

		

	
	
		
			Rachel Says:
						


			February 20th, 2007 at 5:39 pm 

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

		

	
	
		
			Adam Says:
						


			March 12th, 2007 at 6:55 pm 

			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 Says:
						


			March 16th, 2007 at 4:00 pm 

			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 Says:
						


			May 23rd, 2007 at 2:02 pm 

			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 Says:
						


			June 2nd, 2007 at 3:24 pm 

			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.

		

	
	
		
			Thajeer Says:
						


			June 11th, 2007 at 4:44 pm 

			The filtering table test is available in
http://www.buildingblocks-inc.com/projects/tools/dojo/dojo-0.4.0-ajax/tests/widget/test_FilteringTable_programmatic.html

		

	
	
		
			ovidiu Says:
						


			June 25th, 2007 at 12:16 pm 

			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 Says:
						


			July 20th, 2007 at 12:26 am 

			How do I programatically destroy the table.

		

	
	
		
			Jeff Says:
						


			October 15th, 2007 at 5:02 am 

			Can we add image in a filtering table?

		

	
	
		
			anatolyg Says:
						


			November 28th, 2007 at 10:03 am 

			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 Reply






Name 


Mail (will not be published) 


Website