Grid view control with Javascript and J Query

<script src="jquery-1.10.1.js" type="text/javascript"></script>

<script type="text/javascript">
//Script that gets earch row values on Client Click

    function GetGridValues(rowindex, column1, column2, column3, column4) {

        var txtDetails = $("[id$='txtDetails']");

        var gridvalues = "RowIndex=" + rowindex + "\r\nEmployee ID= " + column1 + "\r\nEmployee Name = " + column2 + "\r\nEmployee Department = " + column3 + "\r\nEmployee Salary = " + column4;

        txtDetails.text(gridvalues);

    }

//Script for the Summation of a column values reference From:http://jsfiddle.net/hJuPX/

    $(document).ready(function () {

        var rows = $("#uclgrid1_GridView1").children("tbody:first").children("tr");
//Check the Grid view control name Generated at runtime in HTML Form  ex:"uclgrid1_GridView1" ..this May varry in your code

        var Salary = rows.children("td:nth-child(4)");   

        var tot = 0;

        Salary.each(function () {           

            var sum = $(this).html();

            if (isNaN(sum)) {

                alert('not a number');

            }

            else {

                tot += parseInt(sum);

            }  

        });

    });

</script>

//Script  for printing the Data in TextBox Reference from:http://forums.asp.net/t/1573138.aspx/1

<script type="text/javascript">

        function doPrint() {

            var prtContent = $("[id$='GridView1']"); //

            var txtDetails = $("[id$='txtDetails']");

            //alert(txtDetails.val());

            prtContent.border = 0; //set no border here

            var WinPrint = window.open('', '', 'letf=100,top=100,width=1000,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');

            WinPrint.document.write(txtDetails.val());

            WinPrint.document.close();

            WinPrint.focus();

            WinPrint.print();

            WinPrint.close();

        }

    </script>

//Grid View and Multi Line Text Box Control In Design

<asp:GridView ID="GridView1" runat="server" OnDataBinding="GridView1_DataBinding"

    ShowHeader="false" OnDataBound="GridView1_DataBound" OnPageIndexChanged="GridView1_PageIndexChanged"

    OnPageIndexChanging="GridView1_PageIndexChanging" OnPreRender="GridView1_PreRender"

    OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">

</asp:GridView>

<h1>

    Employee Details</h1>

<asp:TextBox runat="server" ID="txtDetails" TextMode="MultiLine" Height="118px" Width="254px"></asp:TextBox>

Code Behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace testtextbox

{
     //Create a two new clases "clsEmployee" and "clsDepartments"

    public class clsEmployee

    {

        public int EmployeeID { get; set; }

        public string EmployeeName { get; set; }

        public int Department { get; set; }

        public double Amount { get; set; }

    }

    public class clsDepartments

    {

        public int DepartmentID { get; set; }

        public string DepartmentName { get; set; }

    }

// User Control code behind page Load and Implementation

    public partial class uclgrid : System.Web.UI.UserControl

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            BindWithDepartmentName();

        }

        protected void GridView1_DataBinding(object sender, EventArgs e)

        {

            //First Step

        }

        protected void GridView1_DataBound(object sender, EventArgs e)

        {

            //Third Step

        }

        protected void GridView1_PageIndexChanged(object sender, EventArgs e)

        {

        }

        protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

        {

        }

        protected void GridView1_PreRender(object sender, EventArgs e)

        {

            //Fourth Step

        }

        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

        {

        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

        {

            //Second Step
            // If it is a DataRow then for each row it will get the values and bind it to the script function  
           //when we click on grid Row in Browser it will get the row values and display in textbox

            if (e.Row.RowType == DataControlRowType.DataRow)

            {

                int itemIdex = e.Row.DataItemIndex;

                string ControlID = e.Row.ID;

                int rowIndex = e.Row.RowIndex;

                DataControlRowState rowstate = e.Row.RowState;

                DataControlRowType rowState = e.Row.RowType;

                string column1value = e.Row.Cells[0].Text;

                string column2values = e.Row.Cells[1].Text;

                string column3values = e.Row.Cells[2].Text;

                string column4values = e.Row.Cells[3].Text;

                e.Row.Attributes.Add("onclick", "GetGridValues('" + itemIdex + "','" + column1value + "','" + column2values + "','" + column3values + "','" + column4values + "');");

            }

        }

        private void BindGrid()

        {

            IEnumerable<clsEmployee> listDepts = GetEmployees();

            GridView1.DataSource = listDepts;

            GridView1.DataBind();

        }

        private void BindWithDepartmentName()

        {

            IEnumerable<clsDepartments> dept = GetDepartmentDetails();

            IEnumerable<clsEmployee> emp = GetEmployees();

            var details = from d in dept

                          join e in emp

                          on d.DepartmentID equals e.Department

                          where e.Amount < 30000

                          orderby d.DepartmentName

                          let totalSalary=(e.Amount*e.EmployeeID)//Dummy calulation for let calucation

                          select new { Name = e.EmployeeID, e.EmployeeName, Department = d.DepartmentName, Salary = e.Amount, TotalSalary = totalSalary };

            GridView1.DataSource = details;

            GridView1.DataBind();

        }

 #region Using List<T>

//Simple List to bind to Grid View

        private List<clsEmployee> ListEmplyee()

        {

            List<clsEmployee> objListEmp = new List<clsEmployee>();

            objListEmp.Add(new clsEmployee { EmployeeID = 1518, EmployeeName = "Venu Gopal", Department = 100, Amount = 21500 });

            objListEmp.Add(new clsEmployee { EmployeeID = 1616, EmployeeName = "Patan Dadapeer", Department = 102, Amount = 26000 });

            objListEmp.Add(new clsEmployee { EmployeeID = 1589, EmployeeName = "Srinivas", Department = 103, Amount = 35000 });

            return objListEmp;

        }

#endregion

        #region Using IEnumerable<T>

        public static IEnumerable<clsEmployee> GetEmployees()

        {

            clsEmployee[] arrEmp ={

                                 new clsEmployee { EmployeeID = 1518, EmployeeName = "Venu Gopal", Department = 100, Amount = 21500 },

                                 new clsEmployee { EmployeeID = 1616, EmployeeName = "Patan Dadapeer", Department = 102, Amount = 26000 },

                                 new clsEmployee { EmployeeID = 1589, EmployeeName = "Srinivas", Department = 103, Amount = 35000 },

                                 new clsEmployee { EmployeeID = 1589, EmployeeName = "Narayana", Department = 100, Amount = 30000 }

                                 };

            return arrEmp.OfType<clsEmployee>();

        }

        public static IEnumerable<clsDepartments> GetDepartmentDetails()

        {

            clsDepartments[] DeptArrayList = new clsDepartments[4];

            //Initialization of objects and Allocates memory

            // Assign values

            clsDepartments objItem = new clsDepartments();

            objItem.DepartmentID = 100;

            objItem.DepartmentName = "TECH";

            DeptArrayList[0] = objItem;

            clsDepartments objitem2 = new clsDepartments();

            objitem2.DepartmentID = 101;

            objitem2.DepartmentName = "HR";

            DeptArrayList[1] = objitem2;

            clsDepartments objitem3 = new clsDepartments();

            objitem3.DepartmentID = 102;

            objitem3.DepartmentName = "DBA";

            DeptArrayList[2] = objitem3;

            clsDepartments objItem4 = new clsDepartments();

            objItem4.DepartmentID = 103;

            objItem4.DepartmentName = "ADMIN";

            DeptArrayList[3] = objItem4;

            return DeptArrayList.OfType<clsDepartments>();

        }

        #endregion

    }

}

OUTPUT: