diff options
author | xue <> | 2006-02-05 06:35:32 +0000 |
---|---|---|
committer | xue <> | 2006-02-05 06:35:32 +0000 |
commit | 045b8b2a21873b8747fde66890b094f63c095c93 (patch) | |
tree | 58c4b4e7f4e146b96826f12d7e2b07dd7ef0b3fd /demos/quickstart | |
parent | ec7a31cfd6c72aa8ed055504b381edee6c547186 (diff) |
Added a demo of TDataGrid showing custom paging.
Diffstat (limited to 'demos/quickstart')
3 files changed, 88 insertions, 2 deletions
diff --git a/demos/quickstart/protected/pages/Controls/DataGrid2.page b/demos/quickstart/protected/pages/Controls/DataGrid2.page index 4c295f5a..1a55c213 100644 --- a/demos/quickstart/protected/pages/Controls/DataGrid2.page +++ b/demos/quickstart/protected/pages/Controls/DataGrid2.page @@ -22,10 +22,10 @@ The following example turns the datagrid in <a href="?page=Controls.Samples.TDat <h2>Paging</h2>
<p>
-When dealing with large datasets, paging is helpful in reducing the page size and complexity. TDataGrid has an embedding paging feature. By setting <tt>AllowPaging</tt> to true, a pager is displayed automatically at the bottom of the datagrid. The pager can be further customized by setting <tt>PagerStyle</tt>, through which you can set pager visibility, mode, position, etc.
+When dealing with large datasets, paging is helpful in reducing the page size and complexity. TDataGrid has an embedded pager that allows users to specify which page of data they want to see. The pager can be customized via <tt>PagerStyle</tt>. For example, <tt>PagerStyle.Visible</tt> determines whether the pager is visible or not; <tt>PagerStyle.Position</tt> indicates where the pager is displayed; and <tt>PagerStyle.Mode</tt> specifies what type of pager is displayed, a numeric one or a next-prev one.
</p>
<p>
-When users click on a pager button, TDataGrid raises <tt>OnPageIndexChanged</tt> event. Typically, the event handler is written as follows,
+To enable paging, set <tt>AllowPaging</tt> to true. The number of rows of data displayed in a page is specified by <tt>PageSize</tt>, while the index (zero-based) of the page currently showing to users is by <tt>CurrentPageIndex</tt>. When users click on a pager button, TDataGrid raises <tt>OnPageIndexChanged</tt> event. Typically, the event handler is written as follows,
</p>
<com:TTextHighlighter CssClass="source">
public function pageIndexChanged($sender,$param) {
@@ -40,6 +40,12 @@ The following example enables the paging functionality of the datagrid shown in <com:RunBar PagePath="Controls.Samples.TDataGrid.Sample5" />
<h3>Custom Paging</h3>
+<p>
+The paging functionality shown above requires loading all data into memory, even though only a portion of them is displayed in a page. For large datasets, this is inefficient and may not always be feasible. TDataGrid provides custom paging to solve this problem. Custom paging only requires the portion of the data to be displayed to end users.
+</p>
+<p>
+To enable custom paging, set both <tt>AllowPaging</tt> and <tt>AllowCustomPaging</tt> to true. Notify TDataGrid the total number of data items (rows) available by setting <tt>VirtualItemCount</tt>. And respond to the <tt>OnPageIndexChanged</tt> event. In the event handler, use the <tt>NewPageIndex</tt> property of the event parameter to fetch the new page of data from data source. For MySQL database, this can be done by using <tt>LIMIT</tt> clause in an SQL select statement.
+</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample6" />
<h2>Extending TDataGrid</h2>
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample6.page b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample6.page new file mode 100644 index 00000000..c8a8c9a2 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample6.page @@ -0,0 +1,24 @@ +<com:TContent ID="body">
+
+<h1>TDataGrid Sample 6</h1>
+<h2>Custom Paging</h2>
+
+<com:TDataGrid
+ ID="DataGrid"
+ AllowPaging="true"
+ AllowCustomPaging="true"
+ VirtualItemCount="19"
+ PageSize="5"
+ PagerStyle.Mode="Numeric"
+ PagerStyle.HorizontalAlign="Right"
+ Width="500px"
+ CellPadding="2"
+ HeaderStyle.BackColor="black"
+ HeaderStyle.ForeColor="white"
+ ItemStyle.BackColor="#BFCFFF"
+ ItemStyle.Font.Italic="true"
+ AlternatingItemStyle.BackColor="#E6ECFF"
+ OnPageIndexChanged="changePage"
+ />
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample6.php b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample6.php new file mode 100644 index 00000000..90e3f7fe --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TDataGrid/Sample6.php @@ -0,0 +1,56 @@ +<?php
+
+Prado::using('Application.pages.Controls.Samples.TDataGrid.Sample1');
+
+class Sample6 extends Sample1
+{
+ /**
+ * Returns a subset of data.
+ * In MySQL database, this can be replaced by LIMIT clause
+ * in an SQL select statement.
+ * @param integer the starting index of the row
+ * @param integer number of rows to be returned
+ * @return array subset of data
+ */
+ protected function getDataRows($offset,$rows)
+ {
+ $data=$this->getData();
+ $page=array();
+ for($i=0;$i<$rows;++$i)
+ {
+ if($offset+$i<$this->getRowCount())
+ $page[$i]=$data[$offset+$i];
+ }
+ return $page;
+ }
+
+ /**
+ * Returns total number of data rows.
+ * In real DB applications, this may be replaced by an SQL select
+ * query with count().
+ * @return integer total number of data rows
+ */
+ protected function getRowCount()
+ {
+ return 19;
+ }
+
+ public function onLoad($param)
+ {
+ if(!$this->IsPostBack)
+ {
+ $this->DataGrid->DataSource=$this->getDataRows(0,$this->DataGrid->PageSize);
+ $this->DataGrid->dataBind();
+ }
+ }
+
+ public function changePage($sender,$param)
+ {
+ $this->DataGrid->CurrentPageIndex=$param->NewPageIndex;
+ $offset=$param->NewPageIndex*$this->DataGrid->PageSize;
+ $this->DataGrid->DataSource=$this->getDataRows($offset,$this->DataGrid->PageSize);
+ $this->DataGrid->dataBind();
+ }
+}
+
+?>
\ No newline at end of file |