<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Client.DataBinding.DefaultCS"
    CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
        <!--
            function pageLoad() {
                $get("<%= Panel1.ClientID %>").innerHTML = "";

                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

                $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

                PageMethods.GetData(0, tableView.get_pageSize(),
                tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toList(),
                    updateGrid);

                PageMethods.GetCount(tableView.get_filterExpressions().toList(), updateVirtualItemCount);
            }

            function RadGrid1_Command(sender, args) {
                $get("<%= Panel1.ClientID %>").innerHTML = String.format("<b>RadGrid1_Command</b><br />CommandName : {0}, CommandArgument : {1} <br /><br />", args.get_commandName(), args.get_commandArgument());

                args.set_cancel(true);

                var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
                var pageSize = sender.get_masterTableView().get_pageSize();

                var sortExpressions = sender.get_masterTableView().get_sortExpressions();
                var filterExpressions = sender.get_masterTableView().get_filterExpressions();

                if (sortExpressions.length > 0 && filterExpressions.length > 0 && currentPageIndex > 0) {
                    sender.get_masterTableView().set_currentPageIndex(0);
                }

                var sortExpressionsAsSQL = sortExpressions.toString();
                var filterExpressionsAsSQL = filterExpressions.toString();

                $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

                PageMethods.GetData(currentPageIndex * pageSize, pageSize, sortExpressionsAsSQL, filterExpressions.toList(), updateGrid);

                if (args.get_commandName() == "Filter") {
                    PageMethods.GetCount(filterExpressions.toList(), updateVirtualItemCount);
                }
            }

            function updateGrid(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(result);
                tableView.dataBind();

                $find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid1.ClientID %>");
            }

            function updateVirtualItemCount(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_virtualItemCount(result);
            }

            function toggleAllowMultiColumnSorting(sender, e) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_allowMultiColumnSorting(sender.checked);
            }

            function RadGrid1_RowDataBound(sender, args) {
                var radTextBox1 = args.get_item().findControl("RadTextBox1"); // find control
                radTextBox1.set_value(args.get_dataItem()["LastName"]);

                // conditional formatting
                args.get_item().get_cell("TitleOfCourtesy").style.fontWeight = (args.get_dataItem()["TitleOfCourtesy"] == "Dr.") ? "bold" : "normal";

                var sb = new Sys.StringBuilder();

                sb.appendLine("<b>RadGrid1_RowDataBound</b><br />");

                for (var item in args.get_dataItem()) {
                    sb.appendLine(String.format("{0} : {1}<br />", item, args.get_dataItem()[item]));
                }

                sb.appendLine("<br />");
                sb.appendLine("<br />");

                $get("<%= Panel1.ClientID %>").innerHTML += sb.toString();
            }

            function GetQueryString() {
                var query = location.search.substring(1);
                var pos = query.indexOf('=');
                var argname = query.substring(0, pos);
                var value = query.substring(pos + 1);
                if (value == "" || value == "false") {
                    return false;
                } else {
                    return true;
                }
            }

            function ShowColumn() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                grid.get_masterTableView().showColumn(4);
            }

            function ClientDataBound(sender, args) {
                var grid = $find("<%= RadGrid1.ClientID %>");
                if (GetQueryString()) {
                    grid.get_masterTableView().showColumn(4);
                    grid.get_masterTableView().get_columns()[4].Display = null;
                } else {
                    grid.get_masterTableView().hideColumn(4);
                }
            }
        -->
        </script>

    </telerik:RadCodeBlock>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post" style="width: 100%;">
    <telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="True" runat="server" />
    <!-- content start -->
    <asp:CheckBox ID="CheckBox1" Text="Allow multi column sorting" Checked="true" runat="server"
        onclick="toggleAllowMultiColumnSorting(this, event);" />
    <br />
    <br />
    <asp:Button ID="btnShowColumn" runat="server" Text="ShowColumn" OnClientClick="ShowColumn(); return false;" />
    <br />
    <telerik:RadGrid ID="RadGrid1" EnableViewState="false" Skin="Sunset" runat="server"
        AllowPaging="true" AllowSorting="True" AllowFilteringByColumn="true" GridLines="None">
        <ItemStyle Wrap="false" />
        <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed">
            <Columns>

                <telerik:GridNumericColumn DataField="EmployeeID" HeaderText="EmployeeID" HeaderStyle-Width="150px" />
                <telerik:GridTemplateColumn SortExpression="LastName" DataField="LastName" HeaderText="LastName">
                    <ItemTemplate>
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" Width="80px">
                        </telerik:RadTextBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" />
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title" />
                <telerik:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" />
                <telerik:GridDateTimeColumn DataField="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                    HeaderText="BirthDate" />
            </Columns>
        </MasterTableView>
        <PagerStyle AlwaysVisible="true" />
        <ClientSettings>
            <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound"
                OnDataBound="ClientDataBound" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="275px" Transparency="60" BackColor="Gray" ForeColor="White">
        <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/Controls/Examples/Integration/FileBrowser/Img/LoadingProgressBar.gif"
            Style="margin-top: 180px;" />
        <span style="position: relative; top: -6px;">Updating...</span>
    </telerik:RadAjaxLoadingPanel>
    <br />
    <br />
    Events:
    <asp:Panel ID="Panel1" Style="height: 200px; overflow: auto; padding: 15px;" CssClass="module"
        runat="server">
    </asp:Panel>
    <!-- content end -->
    </form>
</body>
</html>
