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

<!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" style="height: 100%;">
<head runat="server">
    <title>Grid</title>
    <style type="text/css">
        fieldset
        {
            background-color: #e8f6ff;
        }
        
        
        * + html div.RadGrid_Office2010Blue .rgSelectedRow td
        {
            background-color:#f8d05c;
            
        }

        * + html div.RadGrid_Office2010Blue td.rgGroupCol,
        * + html div.RadGrid_Office2010Blue td.rgExpandCol
        {
            background: #dae7f5;
        }


        .rgHeaderDivWrapper
        {
            position: relative;   
        }

        .rgHeaderDivWrapper > .rgMasterTable
        {
            position: absolute;
            top: 0;
            right: 0
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="scriptManager" runat="server">
    </telerik:RadScriptManager>
    <script type="text/javascript">

        window.$ = $telerik.$;
        function GridCreated(sender, arg)
        {
            var tableMarkup = '<table cellSpacing="0" class="rgMasterTable rgClipCells">';

            var header = sender.get_masterTableViewHeader().get_element();
            $telerik.$('thead tr', header).each(function ()
            {
                var currEl = $telerik.$('th:first, td:first', this);
                tableMarkup += '<tr><' + currEl[0].tagName + ' class="' + currEl[0].className + '" style="height:' + currEl.height() + 'px">&nbsp;</' + currEl[0].tagName + '></tr>';
            });

            tableMarkup += '</table>';

            $('.rgHeaderDiv').wrap('<div class="rgHeaderDiv rgHeaderDivWrapper" />')
            .parent()
            .append(tableMarkup);
        }
    </script>
    <telerik:RadStyleSheetManager ID="RadCSSManager" EnableStyleSheetCombine="true" runat="server">
    </telerik:RadStyleSheetManager>
    <fieldset class="fieldset" style="height: 100%;">
        <telerik:RadAjaxPanel runat="server">
            <telerik:RadGrid ID="RadGrid1" ShowStatusBar="true" runat="server" Width="800px"
                PageSize="5" Visible="true" OnPreRender="RadGrid1_PreRender" ShowGroupPanel="true"
                AllowPaging="true" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true"
                AllowSorting="true" EnableEmbeddedSkins="true" Skin="Office2010Blue">
                <HeaderStyle Width="200px" />
                <MasterTableView EditMode="EditForms" CommandItemDisplay="Top" TableLayout="Fixed">
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="Name" FieldName="Name"></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="Name"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <EditFormSettings CaptionDataField="ID" CaptionFormatString="{0}">
                    </EditFormSettings>
                    <Columns>
                        <telerik:GridDragDropColumn HeaderStyle-Width="20px">
                        </telerik:GridDragDropColumn>
                        <telerik:GridTemplateColumn DataField="PrNaicsCode1Description" HeaderText="Code (1)"
                            SortExpression="Column 1" UniqueName="code">
                            <ItemTemplate>
                                <a href="#">Test Link</a>
                                <div>
                                    test test test</div>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="Skins/Office2010Blue/Grid/Edit.gif"
                            HeaderText="Edit">
                        </telerik:GridEditCommandColumn>
                        <telerik:GridButtonColumn CommandName="Delete" ImageUrl="Skins/Office2010Blue/Grid/Delete.gif"
                            ButtonType="ImageButton" HeaderText="Delete" />
                        <telerik:GridClientDeleteColumn />
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" />
                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" ReadOnly="true" />
                        <telerik:GridBoundColumn DataField="CategoryID" HeaderText="CategoryID" UniqueName="CategoryID"
                            ReadOnly="true" ForceExtractValue="InEditMode" />
                        <telerik:GridButtonColumn CommandName="Command" Text="Command" />
                    </Columns>
                </MasterTableView>
                <ItemStyle Wrap="true" />
                <ClientSettings EnableRowHoverStyle="true" AllowRowsDragDrop="true" AllowGroupExpandCollapse="true">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="300px"  />
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                    <ClientEvents OnGridCreated="GridCreated" />

                </ClientSettings>
                <PagerStyle AlwaysVisible="true" Mode="NextPrevNumericAndAdvanced" CssClass="test" />
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
    </fieldset>
    </form>
</body>
</html>
