Added a demo of using TDataGrid with automatically generated columns.

8 files changed, 163 insertions, 22 deletions

diff --git a/.gitattributes b/.gitattributes
index 78dcca04..0e6d61f8 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -97,6 +97,8 @@ demos/quickstart/protected/pages/Configurations/Templates2.page -text
 demos/quickstart/protected/pages/Configurations/Templates3.page -text
 demos/quickstart/protected/pages/Construction.page -text
 demos/quickstart/protected/pages/Controls/DataGrid.page -text
+demos/quickstart/protected/pages/Controls/DataGrid1.page -text
+demos/quickstart/protected/pages/Controls/DataGrid2.page -text
 demos/quickstart/protected/pages/Controls/DataList.page -text
 demos/quickstart/protected/pages/Controls/List.page -text
 demos/quickstart/protected/pages/Controls/Overview.page -text
diff --git a/demos/quickstart/protected/controls/TopicList.tpl b/demos/quickstart/protected/controls/TopicList.tpl
index 79d3cd1d..550ff86e 100644
--- a/demos/quickstart/protected/controls/TopicList.tpl
+++ b/demos/quickstart/protected/controls/TopicList.tpl
@@ -45,7 +45,8 @@
     <li><a href="?page=Controls.Validation">Validation Controls</a></li>

     <li><a href="?page=Controls.Repeater">TRepeater</a></li>

     <li><a href="?page=Controls.DataList">TDataList</a></li>

-    <li><a href="?page=Controls.DataGrid">TDataGrid</a></li>

+    <li><a href="?page=Controls.DataGrid1">TDataGrid: Part I</a></li>

+    <li><a href="?page=Controls.DataGrid2">TDataGrid: Part II</a></li>

     <li><a href="?page=Construction">Active Controls</a></li>

     <li><a href="?page=Construction">Creating New Controls</a></li>

 </ul>

diff --git a/demos/quickstart/protected/pages/Controls/DataGrid1.page b/demos/quickstart/protected/pages/Controls/DataGrid1.page
new file mode 100644
index 00000000..63f46754
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/DataGrid1.page
@@ -0,0 +1,99 @@
+<com:TContent ID="body" >

+

+<h1>TDataGrid : Part I</h1>

+

+<p>

+TDatagrid is an important control in building complex Web applications. It displays data in a tabular format with rows (also called items) and columns. A row is composed by cells, while columns govern how cells should be displayed according to their association with the columns. Data specified via <tt>DataSource</tt> or <tt>DataSourceID</tt> are bound to the rows and feed contents to cells.

+</p>

+<p>

+TDataGrid is highly interactive. Users can sort the data along specified columns, navigate through different pages of the data, and perform actions, such as editting and deleting, on rows of the data.

+</p>

+<p>

+Rows of TDataGrid can be accessed via its <tt>Items</tt> property. A row (item) can be in one of several modes: browsing, editting and selecting, which affects how cells in the row are displayed. To change an item's mode, modify <tt>EditItemIndex</tt> or <tt>SelectedItemIndex</tt>. Note, if an item is in edit mode, then selecting this item will have no effect.

+</p>

+

+<h2>Columns</h2>

+<p>

+Columns of a data grid determine how the associated cells are displayed. For example, cells associated with a <tt>TBoundColumn</tt> are displayed differently according to their modes. A cell is displayed as a static text if the cell is in browsing mode, a text box if it is in editting mode, and so on.

+</p>

+<p>

+PRADO provides five types of columns:

+</p>

+<ul>

+  <li><tt>TBoundColumn</tt> associates cells with a specific field of data and displays the cells according to their modes.</li>

+  <li><tt>THyperLinkColumn</tt> displays in the cells a hyperlink whose caption and URL can be either statically specified or bound to some fields of data.</li>

+  <li><tt>TEditCommandColumn</tt> displays in the cells edit/update/cancel command buttons according to the state of the item that a cell resides in.</li>

+  <li><tt>TButtonColumn</tt> displays in the cells a command button.

+  <li><tt>TTemplateColumn</tt> displays the cells according to different templates defined for it.</li>

+</ul>

+

+<h2>Item Styles</h2>

+<p>

+TDataGrid defines different styles applied to its items. For example, <tt>AlternatingItemStyle</tt> is applied to alternating items (item 2, 4, 6, etc.) Through these properties, one can set CSS style fields or CSS classes for the items.

+</p>

+<p>

+Item styles are applied in a hierarchical way. Styles in higher hierarchy will inherit from styles in lower hierarchy. Starting from the lowest hierarchy, the item styles include item's own style, <tt>ItemStyle</tt>, <tt>AlternatingItemStyle</tt>, <tt>SelectedItemStyle</tt>, and <tt>EditItemStyle</tt>. Therefore, if background color is set as red in <tt>ItemStyle</tt>, <tt>EditItemStyle</tt> will also have red background color, unless it is explicitly set to a different value.

+</p>

+

+<h2>Events</h2>

+<p>

+TDataGrid provides several events to facilitate manipulation of its items,

+</p>

+<ul>

+  <li><tt>OnItemCreated</tt> - raised each time an item is newly created. When the event is raised, data and child controls are both available for the new item.</li>

+  <li><tt>OnItemDataBound</tt> - raised each time an item just completes databinding. When the event is raised, data and child controls are both available for the item, and the item has finished databindings of itself and all its child controls.</li>

+  <li><tt>OnItemCommand</tt> - raised when a child control of some item (such as a <tt>TButton</tt>) raises an <tt>OnCommand</tt> event.</li>

+  <li>command events - raised when a child control's <tt>OnCommand</tt> event has a specific command name,

+    <ul>

+      <li><tt>OnSelectedIndexChanged</tt> - if the command name is <tt>select</tt>.</li>

+      <li><tt>OnEditCommand</tt> - if the command name is <tt>edit</tt>.</li>

+      <li><tt>OnDeleteCommand</tt> - if the command name is <tt>delete</tt>.</li>

+      <li><tt>OnUpdateCommand</tt> - if the command name is <tt>update</tt>.</li>

+      <li><tt>OnCancelCommand</tt> - if the command name is <tt>cancel</tt>.</li>

+      <li><tt>OnSortCommand</tt> - if the command name is <tt>sort</tt>.</li>

+      <li><tt>OnPageIndexChanged</tt> - if the command name is <tt>page</tt>.</li>

+    </ul>

+  </li>

+</ul>

+

+<h2>Using TDataGrid</h2>

+

+<h3>Automatically Generated Columns</h2>

+<p>

+TDataGrid by default will create a list of columns based on the structure of the bound data. TDataGrid will read the first row of the data, extract the field names of the row, and construct a column for each field. Each column is of type <tt>TBoundColumn</tt>.

+</p>

+<p>

+The following example displays a list of computer product information using a TDataGrid. Columns are automatically generated. To populate datagrid items with the data, <tt>dataBind()</tt> is invoked for the datagrid in the <tt>onLoad</tt> method of the page,

+</p>

+<com:TTextHighlighter Language="php" CssClass="source">

+public function onLoad($param) {

+    parent::onLoad($param);

+    if(!$this->IsPostBack) {

+        $this->DataGrid->DataSource=$this->Data;

+        $this->DataGrid->dataBind();

+    }

+}

+</com:TTextHighlighter>

+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample1" />

+

+<h3>Manually Specified Columns</h2>

+<p>

+Using automatically generated columns gives a quick way of browsing tabular data. In real applications, however, automatically generated columns are often not enough because developers have no way configuring their properties. Manually specified columns are thus more desirable.

+</p>

+<p>

+To manually specify columns, set <tt>AutoGenerateColumns</tt> to false, and specify the columns in a template like the following,

+</p>

+<com:TTextHighlighter Language="prado" CssClass="source">

+&lt;com:TDataGrid ...&gt;

+  &lt;com:TBoundColumn DataField="name" .../&gt;

+  &lt;com:TBoundColumn DataField="price" .../&gt;

+  &lt;com:TEditCommandColumn ...&gt;

+  ...

+&lt;/com:TDataGrid&gt;

+</com:TTextHighlighter>

+<p>

+Note, if <tt>AutoGenerateColumns</tt> is true and there are manually specified columns, the automatically generated columns will be displayed first. Also note, the datagrid's <tt>Columns</tt> property only contains manually specified columns.

+</p>

+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample2" />

+

+</com:TContent>
\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/DataGrid2.page b/demos/quickstart/protected/pages/Controls/DataGrid2.page
new file mode 100644
index 00000000..f73f46be
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/DataGrid2.page
@@ -0,0 +1,19 @@
+<com:TContent ID="body" >

+

+<h1>TDataGrid : Part II</h1>

+

+<h2>Paging and Sorting</h2>

+

+<h2>Updating and Deleting</h2>

+

+<h2>Custom Paging</h2>

+

+<h2>Extending TDataGrid</h2>

+

+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample1" />

+<p>

+A common use of TDataGrid is for maintaining tabular data, including browsing, editting, deleting data items. This is enabled by the command events and various item templates of TDataGrid. The following example displays a computer product information. Users can add new products, modify or delete existing ones. In order to locate the data item for updating or deleting, <tt>DataKeys</tt> property is used.

+</p>

+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample2" />

+

+</com:TContent>
\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.page b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.page
index 5c24405e..05ba4630 100644
--- a/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.page
+++ b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.page
@@ -1,14 +1,14 @@
 <com:TContent ID="body">

 

 <h1>TDataGrid Sample 1</h1>

+<h2>Automatically Generated Columns</h2>

 

 <com:TDataGrid

 	ID="DataGrid"

-	ItemStyle.BackColor="blue"

+	HeaderStyle.BackColor="silver"

+	ItemStyle.BackColor="lightblue"

 	ItemStyle.Font.Italic="true"

-	ItemStyle.ForeColor="white"

-	AlternatingItemStyle.BackColor="green"

-	SelectedItemStyle.BackColor="red">

-</com:TDataGrid>

+	AlternatingItemStyle.BackColor="lightgreen"

+	/>

 

 </com:TContent>
\ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.php b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.php
index bf11b133..ec78006b 100644
--- a/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.php
+++ b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample1.php
@@ -2,23 +2,39 @@
 

 class Sample1 extends TPage

 {

-	protected function getDataSource()

+	protected function getData()

 	{

 		return array(

-			array('name'=>'John','age'=>'31'),

-			array('name'=>'Bea','age'=>'35'),

-			array('name'=>'Rose','age'=>'33'),

-			array('name'=>'Diane','age'=>'37'),

-			array('name'=>'Bob','age'=>'30'),

+			array('id'=>'ITN001','name'=>'Motherboard','quantity'=>1,'price'=>100.00,'imported'=>true),

+			array('id'=>'ITN002','name'=>'CPU','quantity'=>1,'price'=>150.00,'imported'=>true),

+			array('id'=>'ITN003','name'=>'Harddrive','quantity'=>2,'price'=>80.00,'imported'=>true),

+			array('id'=>'ITN004','name'=>'Sound card','quantity'=>1,'price'=>40.00,'imported'=>false),

+			array('id'=>'ITN005','name'=>'Video card','quantity'=>1,'price'=>150.00,'imported'=>true),

+			array('id'=>'ITN006','name'=>'Keyboard','quantity'=>1,'price'=>20.00,'imported'=>false),

+			array('id'=>'ITN007','name'=>'Monitor','quantity'=>2,'price'=>300.00,'imported'=>true),

+			array('id'=>'ITN008','name'=>'CDRW drive','quantity'=>1,'price'=>40.00,'imported'=>true),

+			array('id'=>'ITN009','name'=>'Cooling fan','quantity'=>2,'price'=>10.00,'imported'=>false),

+			array('id'=>'ITN010','name'=>'Video camera','quantity'=>20,'price'=>30.00,'imported'=>true),

+			array('id'=>'ITN011','name'=>'Card reader','quantity'=>10,'price'=>24.00,'imported'=>true),

+			array('id'=>'ITN012','name'=>'Floppy drive','quantity'=>50,'price'=>12.00,'imported'=>false),

+			array('id'=>'ITN013','name'=>'CD drive','quantity'=>25,'price'=>20.00,'imported'=>true),

+			array('id'=>'ITN014','name'=>'DVD drive','quantity'=>15,'price'=>80.00,'imported'=>true),

+			array('id'=>'ITN015','name'=>'Mouse pad','quantity'=>50,'price'=>5.00,'imported'=>false),

+			array('id'=>'ITN016','name'=>'Network cable','quantity'=>40,'price'=>8.00,'imported'=>true),

+			array('id'=>'ITN017','name'=>'Case','quantity'=>8,'price'=>65.00,'imported'=>false),

+			array('id'=>'ITN018','name'=>'Surge protector','quantity'=>45,'price'=>15.00,'imported'=>false),

+			array('id'=>'ITN019','name'=>'Speaker','quantity'=>35,'price'=>65.00,'imported'=>false),

 		);

 	}

 

 	public function onLoad($param)

 	{

 		parent::onLoad($param);

-		$this->DataGrid->DataSource=$this->getDataSource();

-		$this->DataGrid->SelectedItemIndex=2;

-		$this->DataGrid->dataBind();

+		if(!$this->IsPostBack)

+		{

+			$this->DataGrid->DataSource=$this->Data;

+			$this->DataGrid->dataBind();

+		}

 	}

 }

 

diff --git a/framework/Log/TLogRouter.php b/framework/Log/TLogRouter.php
index ef16cb67..4b6141e4 100644
--- a/framework/Log/TLogRouter.php
+++ b/framework/Log/TLogRouter.php
@@ -604,14 +604,14 @@ class TBrowserLogRoute extends TLogRoute
 		$category = is_array($this->getCategories()) ?

 						implode(', ',$this->getCategories()) : '';

 		$string = <<<EOD

-<table cellspacing="0" cellpadding="0" border="0" width="100%">

+<table cellspacing="0" cellpadding="2" border="0" width="100%">

 	<tr>

 		<th style="background-color: black; color:white;" colspan="11">

-			<h3>Trace Information: $category</h3>

+			Application Log

 		</th>

 	</tr><tr style="background-color: #ccc;">

 	    <th>&nbsp;</th>

-		<th>Category</th><th>Message</th><th>From First(s)</th><th>From Last(s)</th>

+		<th>Category</th><th>Message</th><th>Time Spent (s)</th><th>Cumulated Time Spent (s)</th>

 	</tr>

 EOD;

 		return $string;

@@ -626,7 +626,11 @@ EOD;
 		$msg = preg_replace('/\(line[^\)]+\)$/','',$log[0]); //remove line number info

 		$string = <<<EOD

 	<tr style="background-color: {$bgcolor};">

-		<td style="background-color: $color;">&nbsp;</td><td>{$log[2]}</td><td>{$msg}</td><td>{$total}</td><td>{$delta}</td>

+		<td style="border:1px solid silver;background-color: $color;">&nbsp;</td>

+		<td>{$log[2]}</td>

+		<td>{$msg}</td>

+		<td style="text-align:center">{$delta}</td>

+		<td style="text-align:center">{$total}</td>

 	</tr>

 EOD;

 		return $string;

@@ -651,7 +655,7 @@ EOD;
 		$string = "<tr><td colspan=\"11\" style=\"text-align:center; border-top: 1px solid #ccc; padding:0.2em;\">";

 		foreach(self::$_levelValues as $name => $level)

 		{

-			$string .= "<span style=\"color:".$this->getColorLevel($level);

+			$string .= "<span style=\"color:white;background-color:".$this->getColorLevel($level);

 			$string .= ";margin: 0.5em;\">".strtoupper($name)."</span>";

 		}

 		$string .= "</td></tr></table>";

diff --git a/framework/Web/UI/WebControls/TDataGrid.php b/framework/Web/UI/WebControls/TDataGrid.php
index 9d55f37e..8b159905 100644
--- a/framework/Web/UI/WebControls/TDataGrid.php
+++ b/framework/Web/UI/WebControls/TDataGrid.php
@@ -72,7 +72,7 @@ Prado::using('System.Web.UI.WebControls.TTable');
  * on top and/or bottom of the table. How the pager will be displayed is determined by <b>PagerDisplay</b>

  * and <b>PagerButtonCount</b> properties. The former decides the position of the pager and latter

  * specifies how many buttons are to be used for paging purpose. Clicking on a pager button will raise

- * an <b>OnPageCommand</b> event. You can respond to this event, specify the page to be displayed by

+ * an <b>onPageIndexChanged</b> event. You can respond to this event, specify the page to be displayed by

  * setting <b>CurrentPageIndex</b> property, and then invoke databind on the datagrid.

  *

  * TDataGrid supports two kinds of paging. The first one is based on the number of data items in

@@ -94,7 +94,7 @@ Prado::using('System.Web.UI.WebControls.TTable');
  * - OnSelectCommand, select

  * - OnDeleteCommand, delete

  * - OnUpdateCommand, update

- * - OnPageCommand, page

+ * - onPageIndexChanged, page

  * - OnSortCommand, sort

  * The data list will always raise an <b>OnItemCommand</b>

  * upon its receiving a bubbled <b>OnCommand</b> event.