<%@ Page Language="C#" MasterPageFile="~/projects/AjaxDataControls/Site.master" Title="DataList Paging" EnableViewState="false" EnableSessionState="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="divMessage" style="display:none">
        <img alt="" src="../Images/indicator.gif" /> <span class="progress">Please wait...</span>
    </div>
    <table>
        <tr>
            <td style="text-align:left;width:100%">
                <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID" CssClass="DataWebControlStyle" ItemDataBoundEvent="onItemDataBound">
                   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
                   <ItemStyle CssClass="RowStyle" />
                   <HeaderStyle CssClass="HeaderStyle" />
                   <FooterStyle CssClass="FooterStyle" />
                   <HeaderTemplate>Product Information</HeaderTemplate>
                    <ItemTemplate>
                        <h4>
                            <span id="spnProductName"></span>
                        </h4>
                        <table border="0">
                            <tr>
                                <td class="ProductPropertyLabel">Category:</td>
                                <td><span id="spnCategory"></span></td>
                                <td class="ProductPropertyLabel">Supplier:</td>
                                <td><span id="spnSupplier"></span></td>
                            </tr>
                            <tr>
                                <td class="ProductPropertyLabel">Discontinued:</td>
                                <td><span id="spnDiscontinued"></span></td>
                                <td class="ProductPropertyLabel">Price:</td>
                                <td><span id="spnUnitPrice"></span></td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </AjaxData:DataList>
            </td>
        </tr>
        <tr>
            <td style="text-align:right;width:100%">
                <AjaxData:Pager ID="Pager1" PageSize="5" runat="server" CssClass="PagerRowStyle" CurrentPageStyle-CssClass="PagerCurrentPage" OtherPageStyle-CssClass="PagerOtherPage" PageChangeEvent="pageChanged"></AjaxData:Pager>
            </td>
        </tr>
    </table>
    <script type="text/javascript">

        var _dataList;
        var _pager;

        function pageLoad(sender, e)
        {
            _dataList = $find('<%= DataList1.ClientID %>');
            _pager = $find('<%= Pager1.ClientID %>');
            loadProducts();
        }

        function loadProducts()
        {
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());

            $get('divMessage').style.display = '';
            DataService.GetProductList(startIndex, _pager.get_pageSize(), '', '', onProductLoadSuccess);
        }

        function onProductLoadSuccess(result)
        {
            _pager.set_recordCount(result.Total);
            _dataList.set_dataSource(result.Rows);
            _dataList.dataBind();

            $get('divMessage').style.display = 'none';
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();

            if (item.get_isDataItemType())
            {
                var product = item.get_dataItem();

                var spnProductName = item.findControl('spnProductName');
                var spnCategory = item.findControl('spnCategory');
                var spnSupplier =  item.findControl('spnSupplier');
                var spnDiscontinued = item.findControl('spnDiscontinued');
                var spnUnitPrice = item.findControl('spnUnitPrice');

                setText(spnProductName, product.Name);
                setText(spnCategory, product.CategoryName);
                setText(spnSupplier, product.SupplierName);
                setText(spnDiscontinued, product.Discontinued);
                setText(spnUnitPrice, product.UnitPrice.localeFormat('C'));
            }
        }

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

        function setText(element, text)
        {
            if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
            else if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
        }

    </script>
</asp:Content>