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

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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">
    <title>Untitled Page</title>
    <telerik:RadScriptBlock ID="ScriptBlock" runat="server">
    
    <script type="text/javascript">
    
    
            function hideColumn()
            {
                var grid = $find('<%=RadGrid1.ClientID %>');
                grid.get_masterTableView().hideColumn(3);
            }
            
            function onExpanded(sender, args)
            {
                var grid = $find('<%=RadGrid1.ClientID %>');
                
               grid.get_detailTables()[args.get_itemIndexHierarchical()].hideColumn(3);
            }
    
    
    </script>
    
    
    </telerik:RadScriptBlock>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [City], [ReportsTo] FROM [Employees]">
            </asp:SqlDataSource>
            <telerik:RadAjaxManager ID="RadAjaxManager1" EnableAJAX="true" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
        </div>
        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="true" EnableLinqExpressions="false" 
            PageSize="3" OnNeedDataSource="RadGrid1_NeedDataSource" ShowGroupPanel="true"  OnItemCommand="RadGrid1_ItemCommand">
            
 
            <MasterTableView HierarchyDefaultExpanded="false" HierarchyLoadMode="Client"  EnableNoRecordsTemplate="false" 
                AutoGenerateColumns="False" DataKeyNames="EmployeeID,ReportsTo" Width="100%">
                <SelfHierarchySettings KeyName="EmployeeID" ParentKeyName="ReportsTo" />
                <Columns>
                    <telerik:GridBoundColumn DataField="EmployeeID" DataType="System.Int32" HeaderText="EmployeeID"
                        ReadOnly="True" SortExpression="EmployeeID" UniqueName="EmployeeID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
                        UniqueName="LastName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
                        UniqueName="FirstName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City"
                        UniqueName="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ReportsTo" DataType="System.Int32" HeaderText="ReportsTo"
                        SortExpression="ReportsTo" UniqueName="ReportsTo">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowDragToGroup="true">
                <ClientEvents OnHierarchyExpanded="onExpanded" />
            </ClientSettings>
        </telerik:RadGrid>
        <input type="button" onclick="return hideColumn();" value="Hide Column" />
    </form>
</body>
</html>
