<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGridClientBindHideShowColumns.aspx.cs" Inherits="RadGridClientBindHideShowColumns" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here..
            function toggleVisibility(sender, args) {
                var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                var column = masterTable.get_columns()[1];
                if (column.get_visible()) {
                    masterTable.hideColumn(1);
                }
                else {
                    masterTable.showColumn(1);
                }
            }
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CellSpacing="0"
            GridLines="None" Width="800px" AllowSorting="true">
            <ClientSettings>
                <DataBinding SelectMethod="GetDataAndCount" Location="Service.svc" SortParameterType="Linq"
                    FilterParameterType="Linq">
                </DataBinding>
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
            <MasterTableView AutoGenerateColumns="False"
                DataKeyNames="ProductID" ClientDataKeyNames="ProductID">
                <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductID" HeaderText="ProductID" DataType="System.Int32">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" DataType="System.String">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="UnitPrice" DataType="System.Decimal"
                        DataFormatString="{0:C}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ReorderLevel" HeaderText="ReorderLevel" DataType="System.Int32">
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean">
                    </telerik:GridCheckBoxColumn>
                </Columns>
                <EditFormSettings>
                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
        </telerik:RadGrid>
        <br />
        <asp:Label ID="Label1" runat="server" Text="Toggle second column's visibility:"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Go" OnClientClick="toggleVisibility(); return false;" />
    </form>
</body>
</html>
