<%@ Page Language="C#" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">

            var commandName = "";
            var tableView = null;
            var cache = {};

            function pageLoad(sender, args) {
                tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

                commandName = "Load"

                WebService.GetData(0, tableView.get_pageSize(),
                    tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),
                        updateGrid);
            }

            function RadGrid1_Command(sender, args) {
                args.set_cancel(true);

                commandName = args.get_commandName();

                var stateKey = getCacheKey(tableView);
                if (cache[stateKey]) {
                    updateGrid(cache[stateKey]);
                    return;
                }

                WebService.GetData(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(),
                        tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),
                            updateGrid);
            }

            function updateGrid(result) {
                var stateKey = getCacheKey(tableView);
                if (!cache[stateKey]) {
                    cache[stateKey] = result;
                }

                tableView.set_dataSource(result);
                tableView.dataBind();

                if (commandName == "Filter" || commandName == "Load") {
                    WebService.GetCount(updateVirtualItemCount);
                }
            }

            function updateVirtualItemCount(result) {
                tableView.set_virtualItemCount(result);
            }

            function getCacheKey(tableView) {
                return String.format("{0}{1}{2}{3}",
                    tableView.get_currentPageIndex(), tableView.get_pageSize(),
                        tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq());
            }

        </script>

    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebService.asmx" />
            </Services>
        </telerik:RadScriptManager>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <telerik:RadGrid ID="RadGrid1" AllowFilteringByColumn="true" Skin="Vista" runat="server"
            GridLines="None" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false">
            <ClientSettings>
                <ClientEvents OnCommand="RadGrid1_Command" />
            </ClientSettings>
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" />
                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" />
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName" />
                    <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="ContactTitle" />
                    <telerik:GridBoundColumn DataField="City" HeaderText="City" />
                    <telerik:GridBoundColumn DataField="Country" HeaderText="Country" />
                </Columns>
            </MasterTableView>
            <PagerStyle AlwaysVisible="true" />
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>
