Who is afraid of ADC? - Introduction to AJAX Data Controls - Part II

Published Thursday, August 21, 2008 9:49 PM

Where does the buzz come from?

The suite of ADCs (AJAX Data Controls) has made a splash in the AJAX community, included by AJAXian directory, told in Tales from Evil Empire, twice mentioned by Joe Stagner, and of course, blogged a thousand of times by the developers: Sonu and Kazi. The code-killer Kazi has also published a number of articles as ADC tutorials and initiation to AJAX control development:

AJAX Repeater:
http://dotnetslackers.com/articles/ajax/ASPNETRepeater.aspx
 
AJAX gridview part 1 and two
http://weblogs.asp.net/rashid/archive/2008/01/14/ajaxdatacontrols-gridview-part-two.aspx
http://weblogs.asp.net/rashid/archive/2008/01/14/ajaxdatacontrols-gridview-part-one.aspx
 
General AJAX Control Development
http://dotnetslackers.com/articles/ajax/ASPNETAJAXControlDevelopment.aspx

How to use ADC Gridview?

Of the four ADC controls, Gridview has attracted most of the attention, usage and questions. So how to use the ADC Gridview?

Databinding

The syntax is almost the same as traditional server side ASP .NET Gridview, only now the data source end point is a web service, and everything is done in the JavaScript.

<script type="text/javascript">

        function pageLoad(sender, e)
        {
            DataService.GetAllCategory(onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            gridView.set_dataSource(result);
            gridView.dataBind();

        }

    </script>

 

Different type of columns

ADC gridview supports a number of columns:

  • BoundColumn
  • ButtonColumn
  • CheckBoxColumn
  • CommanColumn
  • DropDownListColumn
  • HyperLinkColumn
  • ImageColumn
  • RadioButtonColumn
  • TemplateColumn

The following example tries to cram in the GridView as many types of columns as possible.

 

 <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID" SelectedIndexChangedEvent="onSelectedIndexChanged" RowCommandEvent="onRowCommand">
       <AlternatingRowStyle CssClass="AlternatingRowStyle" />
       <RowStyle CssClass="RowStyle"/>
       <HeaderStyle CssClass="HeaderStyle"/>
       <SelectedRowStyle CssClass="SelectedRowStyle" />
       <Columns>
        <AjaxData:GridViewCommandColumn ShowSelectButton="true"/>
        <AjaxData:GridViewRadioButtonColumn GroupName="Active"/>
        <AjaxData:GridViewCheckBoxColumn DataField="Active"/>
        <AjaxData:GridViewButtonColumn CommandName="ShowInfo" HeaderText="Company" DataTextField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>
        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
        <AjaxData:GridViewHyperLinkColumn HeaderText="City" DataTextField="City" DataNavigateUrlFields="City" Target="_blank" DataNavigateUrlFormatString="Related.aspx?City={0}" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
       </Columns>
    </AjaxData:GridView>

 

GridView Editing

As that the server side asp .net Gridview has a magic button which allows you to update your data on the fly, ADC Gridview gives you the same freedom. It offers the same four events for you to do U&D (update and delete) and cancel if you change your mind,

  • EditCommandEvent
  • DeleteCommandEvent
  • UpdateCommandEvent
  • CancelCommandEvent

So declaratively, you can code your GridView as such:

 

 <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID" EditCommandEvent="onEditCommand" DeleteCommandEvent="onDeleteCommand" UpdateCommandEvent="onUpdateCommand" CancelCommandEvent="onCancelCommand">
                   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
                   <RowStyle CssClass="RowStyle"/>
                   <HeaderStyle CssClass="HeaderStyle"/>
                   <Columns>
                        <AjaxData:GridViewCommandColumn ShowEditButton="true" ShowDeleteButton="true" ShowCancelButton="true" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Customer" DataField="Company" SortField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" SortField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" SortField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                   </Columns>
                </AjaxData:GridView>

 

GridView Sorting

With the old grand asp .net Gridview, if you want to add a little up or down arrows in the header to indicate by which column the Gridview is currently sorted, you need to spend a little time to add some extra code to the OnItemCreated event. Now, ADC GridView automatically does this for you automatically. 

To enable  sorting, the properties you need to specify are

  • SortColumn
  • SortOrderAscendingImageUrl / SortOrderDescendingImageUrl
  • SortCommandEvent

For the columns that you would like to sort, you need to specify this property: SortField

Then add a little code to the function that handles the SortCommandEvent

 

        function onSortCommand(sender, e)
        {
            _gridView.set_sortColumn(e.get_sortColumn())
            _gridView.set_sortOrder(e.get_sortOrder());
            //load data based on the sorting criteria
           loadProducts();
        }

 

GridView Paging

The way paging is done with ADCs is very different from the old grand ASP .net GridView. Rather a simply property of a Gridview or datalist, here, Pager in itself is a control and needs to be declared and fed with a number of properties and data information.  

Here is the code for a very minimal Pager control:

 

                <AjaxData:Pager ID="Pager1" runat="server" CssClass="PagerRowStyle"
                CurrentPageStyle-CssClass="PagerCurrentPage"
                OtherPageStyle-CssClass="PagerOtherPage"
                PageChangedEvent="pageChanged"></AjaxData:Pager>
 

 

Pager has a number of properties you can tweak, most of them are self-explanary:

  • cssClass
  • currentPageStyle
  • firstPageText
  • hideOnSinglepage
  • infoStyle
  • lastPageText
  • nextPageText
  • otherpageStyle
  • pageCount
  • pageIndex
  • pageSize
  • previousPageText
  • recordCount
  • showFirstandLast
  • showInfo
  • showNumeric
  • showPreviousAndNext
  • sliderSize
  • useSlider

The most important and only event of Pager is the pageChanged event. It is in handling this event, you specify the current page index and retrieve data and rebind it with the GridView.

The following is the minimum code how to deal with paging  

        function pageLoad(sender, e)
        {
            loadProducts();
        }

 

        function loadProducts()
        {
            //Need to convert the sortoder so our WS understand
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());

            DataService.GetProductList(startIndex, _pager.get_pageSize(), sortColumn, sortOrder, onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _pager.set_recordCount(result.Total);
            _gridView.set_dataSource(result.Rows);
            _gridView.dataBind();
        }

        function pageChanged(sender, e)
        {
            _pager.set_pageIndex(e.get_newPageIndex());
            loadProducts();
        }

 

 

==================================== 

Note: all the above code is from ADC sample code provided by DNS. ADC source code and samples can be downloaded at codeplex. For more information, please visit ADC home

Read my first post of the series about ADC (AJAX Data Controls),

 

kick it on DotNetKicks.com

by xxxd

Comments

# DotNetKicks.com said on Thursday, August 21, 2008 4:47 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# Recent URLs tagged Databinding - Urlrecorder said on Tuesday, April 21, 2009 11:16 PM

Pingback from  Recent URLs tagged Databinding - Urlrecorder

# Bookmarks about Ajax said on Saturday, May 02, 2009 7:45 PM

Pingback from  Bookmarks about Ajax

This site

This Blog

Syndication

Sponsors

  • MaximumASP