YiiBooster – Json Grid view

TbJsonGridView bootstrap.widgets.TbJsonGridView

When dealing with lots of records, we found that the AJAX requests in Yii's standard format was quite slow. The reason is that the AJAX response returns the full page when the programmer does not make use of renderPartial on its views and also, even with the use of that method, the response returns the full HTML source.

We thought that we could speed up the server response if we just return a bunch of JSON objects that will be later on rendered on the client. Also, we thought that if we could somehow stored the results on the client we could reduce the amount of requests to the server... and we think we did it.

The TbJsonGridView allows the use of localStorage (degrades to in-memory cache for non-HTML5 browsers) for caching results and avoid the use of repetitive AJAX requests, and makes use of jqote2 javascript template engine to render the JSON objects.

Properties

Name	Type	Default	Description
json	boolean	null	Will be set to true if its an AJAX request. The grid will respond automatically with a JSON object when that occurs.
cacheTTL	integer	`1`	The number of seconds, minutes of hours we keep server responses on cache.
cacheTTLType	string	s	The type of cache duration `s` (seconds), `m` (minutes) or `h` (hours)
localCache	boolean	true	Whether to use local cache or not.

JSON specific columns

In order to work with TbJsonGridView, there are certain classes to be used with this special component. Without them, the grid won't work as expected.

Classes are:

Name	Description
TbJsonDataColumn	The JSON version of TbDataColumn (same configuration options).
TbJsonButtonColumn	The JSON version of TbButtonColumn.
TbJsonPickerColumn	Allows the use of our Bootstrap picker plugin on a JSON table

The following grid, displays 500 rows on each page from a table of around 4000 records (not indexed).

ID	Name	Create Time

1	Alberta	2012/08/31 08:29:52 PM
2	British Columbia	2012/08/31 08:29:52 PM
3	Manitoba	2012/08/31 08:29:52 PM
4	New Brunswick	2012/08/31 08:29:52 PM
5	Newfoundland	2012/08/31 08:29:52 PM
6	Nova Scotia	2012/08/31 08:29:52 PM
7	Nunavut	2012/08/31 08:29:52 PM
8	Ontario	2012/08/31 08:29:52 PM
9	Prince Edward Island	2012/08/31 08:29:52 PM
10	Quebec	2012/08/31 08:29:52 PM
11	Saskatchewan	2012/08/31 08:29:52 PM
12	Northwest Territories	2012/08/31 08:29:52 PM
13	Yukon Territory	2012/08/31 08:29:52 PM
14	Armed Forces Americas	2012/08/31 08:29:52 PM
15	Armed Forces Europe, Middle East, & Canada	2012/08/31 08:29:52 PM
16	Alaska	2012/08/31 08:29:52 PM
17	Alabama	2012/08/31 08:29:52 PM
18	Armed Forces Pacific	2012/08/31 08:29:52 PM
19	Arkansas	2012/08/31 08:29:52 PM
20	American Samoa	2012/08/31 08:29:52 PM
21	Arizona	2012/08/31 08:29:52 PM
22	California	2012/08/31 08:29:52 PM
23	Colorado	2012/08/31 08:29:52 PM
24	Connecticut	2012/08/31 08:29:52 PM
25	District of Columbia	2012/08/31 08:29:52 PM
26	Delaware	2012/08/31 08:29:52 PM
27	Florida	2012/08/31 08:29:52 PM
28	Federated States of Micronesia	2012/08/31 08:29:52 PM
29	Georgia	2012/08/31 08:29:52 PM
30	Guam	2012/08/31 08:29:52 PM
31	Hawaii	2012/08/31 08:29:52 PM
32	Iowa	2012/08/31 08:29:52 PM
33	Idaho	2012/08/31 08:29:52 PM
34	Illinois	2012/08/31 08:29:52 PM
35	Indiana	2012/08/31 08:29:52 PM
36	Kansas	2012/08/31 08:29:52 PM
37	Kentucky	2012/08/31 08:29:52 PM
38	Louisiana	2012/08/31 08:29:52 PM
39	Massachusetts	2012/08/31 08:29:52 PM
40	Maryland	2012/08/31 08:29:52 PM
41	Maine	2012/08/31 08:29:52 PM
42	Marshall Islands	2012/08/31 08:29:52 PM
43	Michigan	2012/08/31 08:29:52 PM
44	Minnesota	2012/08/31 08:29:52 PM
45	Missouri	2012/08/31 08:29:52 PM
46	Northern Mariana Islands	2012/08/31 08:29:52 PM
47	Mississippi	2012/08/31 08:29:52 PM
48	Montana	2012/08/31 08:29:52 PM
49	North Carolina	2012/08/31 08:29:52 PM
50	North Dakota	2012/08/31 08:29:52 PM

$this->widget('bootstrap.widgets.TbJsonGridView', array(
	'dataProvider' => $model->search(),
	'filter' => $model,
	'type' => 'striped bordered condensed',
	'summaryText' => false,
	'cacheTTL' => 10, // cache will be stored 10 seconds (see cacheTTLType)
	'cacheTTLType' => 's', // type can be of seconds, minutes or hours
	'columns' => array(
		'id',
		'name',
		array(
			'name' => 'create_time',
			'type' => 'datetime'
		),
		array(
			'header' => Yii::t('ses', 'Edit'),
			'class' => 'bootstrap.widgets.TbJsonButtonColumn',
			'template' => '{view} {delete}',
		),
	),
	));

And that's it! Just like any CGridView. By the way, if you wish to work like a regular CGridView just set its ajaxUpdate to false.

Please note that this grid still under development. Nevertheless, this grid has been tested against a table of 5000 records with excellent results.

Displays any data you wish in a 'cool' picker dropdown box. The following code is an example of use, it calls an url via AJAX call and fills the content of the picker with its results.

TbJsonGridView bootstrap.widgets.TbJsonGridView

Properties

JSON specific columns

TbJsonPickerColumn