Friday, August 31, 2012

scrollable gridview with fixed columns asp.net

Script and css used:

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>    
<script type="text/javascript" src="Scripts/jquery.fixedtable.js">
<style type="text/css">
        body
        {
            width: 900px;
        }
        p
        {
            float:left;
            width: 100%;
            margin: 20px 0px;
        }
        .fixedColumn .fixedTable td
        {
            color: #FFFFFF;
            background-color: #5097d1;
            font-size: 14px;
            font-weight: normal;
            border-collapse: collapse;
            
        }
        
        .fixedHead td, .fixedFoot td
        {
            color: #FFFFFF;
            background-color: #5097d1;
            font-size: 14px;
            font-weight: normal;
            padding: 5px;
            border: 1px solid #187BAF;
        }
        .fixedTable td
        {
            font-size: 10pt;
            background-color: #FFFFFF;
            padding: 5px;
            text-align: left;
            border: 1px solid #CEE7FF;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {

            $(".tableDiv").each(function() {
                var Id = $(this).get(0).id;
                var maintbheight = 455;
                var maintbwidth = 760;

                $("#" + Id + " .FixedTables").fixedTable({
                    width: maintbwidth,
                    height: maintbheight,
                    fixedColumns: 3,
                    // header style
                    classHeader: "fixedHead",
                    // footer style        
                    classFooter: "fixedFoot",
                    // fixed column on the left        
                    classColumn: "fixedColumn",
                    // the width of fixed column on the left      
                    fixedColumnWidth: 200,
                    // table's parent div's id           
                    outerId: Id,
                    // tds' in content area default background color                     
                    Contentbackcolor: "#FFFFFF",
                    // tds' in content area background color while hover.     
                    Contenthovercolor: "#99CCFF",
                    // tds' in fixed column default background color   
                    fixedColumnbackcolor: "#5097d1",
                    // tds' in fixed column background color while hover. 
                    fixedColumnhovercolor: "#99CCFF"
                });
            });
            $(".fixedTable table").attr('rules', 'All');
        });
        
    </script>
    </head>
<body>
    <form id="form1" runat="server">
    <div>
    

        <br />
        <div  id="divGrid" class="tableDiv">
        <asp:GridView ID="EmployeeDetailsView" runat="server" 
        DataSourceID="EmployeeDetails" 
                AutoGenerateColumns="true"
            CellPadding="4" GridLines="None" class="FixedTables" Width="600" 
                ShowHeader="False">
                            <Columns>                <asp:BoundField DataField="EmpID" HeaderText="EmpID"                     SortExpression="EmpID" />                <asp:BoundField DataField="Full Name" HeaderText="Full Name"                     SortExpression="Full Name" ReadOnly="True" />                <asp:BoundField DataField="Sex" HeaderText="Sex"                     SortExpression="Sex" />                <asp:BoundField DataField="Department" HeaderText=" Department "                     SortExpression=" Department " />                
<asp:BoundField DataField="DesignationName" HeaderText="DesignationName"                     SortExpression="DesignationName" />



// add your fields           


 </Columns>           
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />            
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />           
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />           
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />            
<EditRowStyle BackColor="#2461BF" />            <AlternatingRowStyle BackColor="White" />       
 </asp:GridView>        </div>        
<asp:SqlDataSource ID="EmployeeDetails" runat="server"  ConnectionString="<%$ ConnectionStrings:yourconnectinstring %>" SelectCommand="SELECT *  FROM [Employee_Detail]" >

No comments:

Post a Comment