Full Active DataGrid (sorting, paging...)

[daneel]

Hi ! It's been a lot since I made my last contribution, sot it was time to do another one:

XActiveDataGrid

This component extends from the regular TDataGrid to provide a full implemented ajax DataGrid. This ActiveDataGrid works like the regular DataGrid and you don't have to change anything to your code to implement it.

Functionalities:

• Paging
• Sorting
• Editing

This file includes also two more classes: XActiveBoundColumn and XActiveEditCommandColumn. The first class provides ajax-sorting and the second one provides ajax-editing.
This DataGrid is an extension of the regular DataGrid, which means that you can use regular BoundColumn's and EditColumn's if you like, or all the other column types availables.

Example:

Code:

<com:XActiveDataGrid ID="dtgList" AllowPaging="true" AllowSorting="true" AllowCustomPaging="true" PageSize="10" onSortCommand="dtgList_SortCommand"  OnPageIndexChanged="dtgList_PageIndexChanged" OnEditCommand="dtgList_EditCommand" OnUpdateCommand="dtgList_UpdateCommand" OnCancelCommand="dtgList_CancelCommand">
<com:XActiveBoundColumn ID="colName" DataField="Name" HeaderText="Name" SortExpression="Name" />
<com:TBoundColumn DataField="LastName" HeaderText="LastName" />
<com:XActiveEditCommandColumn HeaderText="Update" HeaderStyle.Width="100px" UpdateText="Save" EditText="Edit" CancelText="Cancel"/>
</com:XActiveDataGrid>

Testing
I've tested it in FF 2 and IE 6 and works fine. I did it with 800 records paged by 10 records. I'm not sure if greater pages could break-down the pagestate field in the edit mode, so be carefull, and if you do and it works, tell us !!
IMPORTANT: it was used and developed under the FINAL RELEASE OF PRADO 3.1.

TIP
When working with ActiveControls, always remember to avoid including "<%@ Application.Globalization.Culture="xx" %>" in your pages and do it in the application.xml file, because this can cause "Missing page state" errors.

Bye.

----- SMALL FIX -------
Before this fix the datagrid was added to the parent's control collection causing a change in the order of the collection, now it's inserted in the same position.

[Carl]

Wow, this is truly a great component! Works like a charm (for many uses).

I could, with small changes to the templates in the quickstart tutorial, use this component and transform most of the events to active events. Great work

[durandal]

Hello,

Very good job daneel !
I've developped my own ActiveDataGrid component but your is better and I will finally use it in the future 
I've add XActiveTemplateColumn, XActiveHyperLinkColumn, XActiveDropDownListColumn, XActiveCheckBoxColumn and XActiveButtonColumn components in your class file. These new components use TActiveImageButton/TActiveLinkButton for Sorting. XActiveButtonColumn use Active components instead of "classic" components.

Hop that can help someone 


     Durandal

[sabuty]

Hi daneel,

nice component! I'm really starting to like it, as I figured out how to use it within a TTemplateControl (took some time...).

So I've got some questions if I'm stupid or the component wasn't originally designed to be used in a TemplateControl.

My little workarounds:
1.) The "old" way of getting access to my DataGrid didn't work anymore. (e.g. $this->DataGrid->someMethod(); ). It took some time until I fully understood what you did in the overwritten initRecursive() function and I came up with this as a solution:

Code:

$myGrids = $this->findControlsByID("DataGrid");
if(sizeof($myGrids) == 1)
{
$myGrid = $myGrids[0];
}
else
{
return;
}

Frankly, I don't like this way of doing it. Any suggestions?

2.) Eventhandlers (for sorting, pager creation etc) didn't work anymore. After many experiments with things like "Parent", "SourceTemplateControl", etc (you see, I've been desperate), the construction "Parent.Parent.someSortOfEventhandlerInMyTemplateControlClass" worked. Is this the way to do it? I never had problems in a TemplateControl like this and it comes to my mind that the dynamic creation and insertion of the TActivePanel in the initRecursive function might be part of the problem (or am I the only part of it?).

If you need further explanations, or some code, ask for it

[al.o]

Hi,

someone could post some examples? I mean with paging and editing.

I've an XActiveDatagrid working but... when i enter in edit mode if i clik con "cancel" i got back :"Invalid callback target, no such control with ID ctl0$Main$wwShoppingCart$ctl1$ctl8.".

I'm immaging that generating the "cancel" & "update" link on the fly the framework doesn't attach the event handlers???

Probably i'm doing something wrong.

Thanks,
al.o

[nsilva]

Any example ?

Can't seem to get it working.

[al.o]

I've solved my problem....

It was on onLoad event of the Page... now it works :

public function onLoad($sender,$param){

      parent::onLoad(); <-----Magically started to work after inserting that
      ....mycode....
      ....mycode....
      ....mycode....
}

daneel your code is really good also to understand how Prado Framework Works.... Tanks.

[nsilva]

I already reach that part, since is a TDataGrid i just looked at the TDataGrid examples.

What i can't do is to update the DataGrid when i want to edit or delete the row...

[al.o]

Could you post some code example ?
Do you make the data binding in the update handler?
If you use TDatagrid instead of XActiveDatagrid the update works?

lot of question!

[dayton]

So this thing basically takes the normal TDataGrid wraps it in an TActive panel and creates active controls for edit buttons, etc.?  It seems to work as advertised for me, but it is slow.  It takes almost twice as long to update/delete via AJAX that using a full page refresh.  Are there any ways to speed it up?  I'm dealing with a 6x20 grid.  Maybe it's just too much data to efficiently reload actively.

dayton

[daneel]

Hi everyone !
Well, sorry that I didn't answer before.

First: About Template Controls
I haven't tested it on template controls, so if it doesn't work, well... work on it :S

About examples:
This component should work EXACTLY as normal TDataGrid... always remember to put the "parent::onLoad" in yours page's onLoad event.

In my application, it works everything just fine, even the "edit", "update" and "cancel" events.

About speed:
It should take almost the same time than a full page refresh... 'cause it doesn't really make any extra processing, it submits the page as any TActiveControl, and replaces the grid with the html sended back... but maybe if you are using the inline editing mode, it goes slower because it has to create an TActiveLink in JS for every "edit" or "update" button...

Well, I think that I haven't said anything new .... remember to check the other common issues with ActiveControls, like adding the "parent::onLoad" call in yours page's onLoad event, the issue with the TGlobalization thing when you put it in your pages, etc...

OK, I'm posting an example anyway, just in case:

BookList.php

Code:

<?php
Prado::using('System.Web.UI.ActiveControls.*');

class BookList extends TPageList
{

public function onLoad($param)
{
parent::onLoad($sender,$param);
if(!$this->IsPostBack && !$this->IsCallBack)
{
$this->bindList();
}
}

public function bindList()
{
$criteria = new Criteria();
$criteria->setLimit($this->dtgList->PageSize);
$criteria->setOffset($this->dtgList->PageSize * $this->dtgList->CurrentPageIndex);
$this->dtgList->DataKeyField = 'IDBook';
$this->dtgList->VirtualItemCount = BookPeer::doCount();
$this->dtgList->DataSource = BookPeer::doSelect($criteria);
$this->dtgList->DataBind();
}

public function btnAdd_Click($sender,$param)
{
$oBook = new Book();
$oBook ->setName($this->txtName->Text);
$oBook ->setAuthor($this->txtAuthor->Text);

$oBook ->save();

$this->txtName->Text = '';
$this->txtAuthor->Text = '';

$this->bindList();
}

public function dtgList_PageIndexChanged($sender,$param)
{
$this->dtgList->CurrentPageIndex = $param->NewPageIndex;
$this->bindList();
}

protected function dtgList_SortCommand($sender,$param)
{
// DO SOME SORTING

$this->dtgList->CurrentPageIndex = 0;
$this->bindList();

}

public function dtgList_EditCommand($sender,$param)
{
$this->dtgList->EditItemIndex=$param->Item->ItemIndex;
$this->bindList();
}

public function dtgList_UpdateCommand($sender,$param)
{
$item=$param->Item;

$oBook= BookPeer::retrieveByPK($this->dtgList->DataKeys[$item->ItemIndex]);
$oBook->setName($item->colName->TextBox->Text);
$oBook->setAuthor($item->colAuthor->TextBox->Text);
$oBook->save();

$this->dtgList->EditItemIndex=-1;
$this->bindList();

}

public function dtgList_CancelCommand($sender,$param)
{
$this->dtgList->EditItemIndex=-1;

$this->bindList();
}

}
?>

BookList.page

Code:

<h1>New Author</h1>
<com:TActiveTextBox ID="txtName" />
<com:TActiveTextBox ID="txtAuthor" />
<com:TActiveButton ID="btnAgregar" Text="Agregar" OnClick="btnAgregar_Click"/>  
<h1>Authors</h1>
<com:XActiveDataGrid ID="dtgList" AllowPaging="true" AllowSorting="true" AllowCustomPaging="true"  CellPadding="0" CellSpacing="0" PageSize="10" AutoGenerateColumns="false" OnSortCommand="dtgList_SortCommand"  OnPageIndexChanged="dtgList_PageIndexChanged" PagerStyle.Mode="Numeric" PagerStyle.CssClass="pager" CssClass="datagrid" OnEditCommand="dtgList_EditCommand" onUpdateCommand="dtgList_UpdateCommand" OnCancelCommand="dtgList_CancelCommand">
<com:XActiveBoundColumn ID="colName" DataField="Name" HeaderText="Name" SortExpression="Name" />
<com:XActiveBoundColumn ID="colAuthor" DataField="Author" HeaderText="Author" SortExpression="Author" />
<com:XActiveEditCommandColumn HeaderText="Edit" UpdateText="Save" EditText="Edit" CancelText="Cancel"/>
</com:XActiveDataGrid>

Well, that's all.
Bye.

[dayton]

Thanks, daneel.

It appears that my issue is something to do with the way I am loading my page.  All of my Active controls actually load more slowly than traditional means.  Is there a Prado tutorial on optimization for Active controls?  I like the flexibility of the AJAX-type stuff, but the speed hit is holding me back.

[wojteb]

Next changes


1) Now You can use ClinentSide property:

Code: (page)

  <com:XActiveDataGrid [...]>
          <prop:ClientSide
              OnLoading="alert('start')"
              OnComplete="alert('finish')"
              [...]
            />
  </com:XActiveDataGrid>

I copy this proporties to "link" in: pager, sort headers and links in XActiveEditColumn

TODO: Add ClientSide property to XActiveColumn

and 2-nd change:
change static calls to dynamic calls:

Code: (php)

<?php
//form:
XActiveDataGrid::initializeColumnHeaderCellForSorting($this, $cell, $columnIndex);
//to:
$this->getOwner()->initializeColumnHeaderCellForSorting($this, $cell, $columnIndex);

[maddin]

The controls are really great! It's almost without any problem to change between TDataGrid and XActiveDataGrid. But i had some problems with my other active controls and the paging. There was no databinding, when the other controls made a callback. When i changed that, the same data like before was bound to the datagrid if paging happens, so nothing changed. I'm pretty sure, there is a better way, may be you have a clue for me, what to change?

Code:

// Look, if the Callback is done for the pager
$preventFromDataBinding = false;
if( is_object( $this->PostBackEventTarget ) and $this->PostBackEventTarget instanceof TControl ) {
if( is_object( $this->DataGrid->TopPager ) and $this->DataGrid->TopPager instanceof TDataGridPager ) {
foreach( $this->DataGrid->TopPager->Controls as $control ) {
if( $control instanceof TControl and $control==$this->PostBackEventTarget ) {
$preventFromDataBinding = true;
}
}
}
}

if( !$preventFromDataBinding and ( $this->IsCallback or !$this->IsPostback ) ) {
$this->bindDataToDataGrid();
}

You see, i iterate over the pager-elements and look, whether the postback eventtarget is in the pager. if it's that, i guess, i want to do paging. It is working but i'm not really happy with it!

[rzavala]

HI,

Where i can donwload the code from XActiveGrid?  I can't see where is the access to download the files!!!

Regards

Roger Zavala
Venezuela