Friday 5 August 2016

Paging in html table using javascript

I demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I have heard from several people who point out the performance problems with large sets of data. I agree. This solution is best for a fairly fixed amount of data.

Step#1:
Include the following css in your page header;




<style type="text/css">
.pg-normal {
color: #000000;
font-size: 15px;
cursor: pointer;
background: #D0B389;
padding: 2px 4px 2px 4px; }
.pg-selected {
color: #fff;
font-size: 15px;
background: #000000;
padding: 2px 4px 2px 4px; }

table.yui {
font-family:arial;
border-collapse:collapse;
border: solid 3px #7f7f7f;
font-size:small; }

table.yui td {
padding: 5px;
border-right: solid 1px #7f7f7f; }

table.yui .even {
background-color: #EEE8AC; }

table.yui .odd {
background-color: #F9FAD0; }

table.yui th {
border: 1px solid #7f7f7f;
padding: 5px;
height: auto;
background: #D0B389; }

table.yui th a {
text-decoration: none;
text-align: center;
padding-right: 20px;
font-weight:bold;
white-space:nowrap; }

table.yui tfoot td {
border-top: 1px solid #7f7f7f;
background-color:#E1ECF9; }

table.yui thead td {
vertical-align:middle;
background-color:#E1ECF9;
border:none; }

table.yui thead .tableHeader {
font-size:larger;
font-weight:bold; }

table.yui thead .filter {
text-align:right; }

table.yui tfoot {
background-color:#E1ECF9;
text-align:center; }

table.yui .tablesorterPager {
padding: 10px 0 10px 0; }

table.yui .tablesorterPager span {
padding: 0 5px 0 5px; }

table.yui .tablesorterPager input.prev {
width: auto;
margin-right: 10px; }

table.yui .tablesorterPager input.next {
width: auto;
margin-left: 10px; }

table.yui .pagedisplay {
font-size:10pt; 
width: 30px;
border: 0px;
background-color: #E1ECF9;
text-align:center;
vertical-align:top; }
</style>

Step#2
Copy & paste the following script  in your page header;
<script type="text/javascript">

function Pager(tableName, itemsPerPage) {

this.tableName = tableName;

this.itemsPerPage = itemsPerPage;

this.currentPage = 1;

this.pages = 0;

this.inited = false;

this.showRecords = function(from, to) {

var rows = document.getElementById(tableName).rows;// i starts from 1 to skip table header rowfor (var i = 1; i < rows.length; i++) {

if (i < from || i > to)

rows[i].style.display = 'none';

elserows[i].style.display = '';}

}

this.showPage = function(pageNumber) {

if (! this.inited) {

alert("not inited");

return;}

var oldPageAnchor = document.getElementById('pg'+this.currentPage);oldPageAnchor.className = 'pg-normal';

this.currentPage = pageNumber;

var newPageAnchor = document.getElementById('pg'+this.currentPage);newPageAnchor.className = 'pg-selected';

var from = (pageNumber - 1) * itemsPerPage + 1;

var to = from + itemsPerPage - 1;

this.showRecords(from, to);}

this.prev = function() {

if (this.currentPage > 1)

this.showPage(this.currentPage - 1);}

this.next = function() {

if (this.currentPage < this.pages) {

this.showPage(this.currentPage + 1);}

}

this.init = function() {

var rows = document.getElementById(tableName).rows;

var records = (rows.length - 1);

this.pages = Math.ceil(records / itemsPerPage);

this.inited = true;}

this.showPageNav = function(pagerName, positionId) {

if (! this.inited) {

alert("not inited");

return;}

var element = document.getElementById(positionId);

var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';

for (var page = 1; page <= this.pages; page++)

pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';element.innerHTML = pagerHtml;}

}

</script>

Stet#3

Define an ID on the table you want to paging that is "tablepaging" ; place an empty div in the place you want to display the navigation bar. that is "pageNavPosition"; include an initialization script at the bottom of your page. 

<table id="tablepaging" class="yui" align="center">
<thead>
<tr>
                <th>Name </th>
                <th>Collage </th>
                <th>Gender </th>
                <th>percentage </th>            
            </tr>
   <tbody>
            <tr class="even">
                <td>Munesh </td>
                <td>ABC </td>
                <td>M </td>
                <td>80 </td>              
            </tr>
            <tr class="odd">

                 <td>Rahul </td>
                <td>PQR </td>
                <td>M </td>
                <td>80 </td>
             
            </tr>
            <tr class="odd">

                 <td>Govind </td>
                <td>XYZ </td>
                <td>M </td>
                <td>40 </td>
               
            </tr>
            <tr class="odd">

                 <td>Anshuman </td>
                <td>CollageName1 </td>
                <td>M </td>
                <td>80 </td>
                
            </tr>
            <tr class="odd">

                 <td>Student1 </td>
                <td>CollageName2 </td>
                <td>M </td>
                <td>50 </td>
            
            </tr>
            <tr class="odd">

                 <td>Student2 </td>
                <td>CollageName3 </td>
                <td>F </td>
                <td>60 </td>
               
            </tr>
            <tr class="odd">

                 <td>Student3 </td>
                <td>CollageName4 </td>
                <td>F </td>
                <td>70 </td>
               
            </tr>
            <tr class="odd">

                 <td>Student4 </td>
                <td>CollageName5 </td>
                <td>M </td>
                <td>80 </td>
                
            </tr>

        </tbody>
</table>
<div id="pageNavPosition" style="padding-top: 20px" align="center">
</div>
<script type="text/javascript"><!--
var pager = new Pager('tablepaging', 5);
pager.init();pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
</script>

Output




Name
Collage
Gender
percentage

Munesh
ABC
M
80

Rahul
PQR
M
50

Govind
XYZ
M
70

Anshuman
AAA
M
60
at 4 comments:

Wednesday 13 July 2016

Context Menu On Right click on Gridview in Asp.net

Here we will learn how to add Context menu on right click on grid view in Asp.net.
For this we need to use
1.   Context menu Jquery File. You add jquery file into your  project
2.   In this page there are Jquery file  and css file which we have to use it in this project

Write the following code in the .aspx page

.ASPX Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContextMenu.aspx.cs" Inherits="ContextMenu.ContextMenu" %>

<!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">
<head runat="server">
    <title>Grid View Context Menu</title>
    <link href="ContextMenuScript/css/StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="ContextMenuScript/css/confirm.css" rel="stylesheet" type="text/css" />
    <link href="ContextMenuScript/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
    <script src="ContextMenuScript/js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="ContextMenuScript/js/jquery.simplemodal-1.1.1.js" type="text/javascript"></script>
    <script src="ContextMenuScript/js/jquery.contextMenu.js" type="text/javascript"></script>
    <!-- IE 6 hacks -->
    <!--[if lt IE 7]>
<link type='text/css' href='ContextMenuScript/css/confirm_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
    <style type="text/css">
        .StudentRow
        {
        }
        .gvhide
        {
            display: none;
        }
    </style>
    <script language="javascript" type="text/javascript" >
        var StudentID = null;
        var CollageName = null;
        var StudentName = null;

        $(document).ready(function () {
            $(".StudentRow").contextMenu({ menu: 'myMenu' }, function (action, el, pos) { contextMenuWork(action, el, pos); });
            $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, function (action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });
        });

        function contextMenuWork(action, el, pos) {
            var rowindex = (el[0].rowIndex * 1 - 1);
            StudentID = $("#Gridview1_lbl_StudentID_" + rowindex).html();
            CollageName = $("#Gridview1_lbl_CollageName_" + rowindex).html();
            StudentName = $("#Gridview1_lbl_StudentName_" + rowindex).html();
            switch (action) {
                case "delete":
                    {
                       
                        //you can call code behind function from following method, For this you need to set Script manager property as "EnablePageMethods = "true"
                        // var success = PageMethods.CallServerFunction(rowindex);

                            alert("Delete Student Record");
                        break;
                    }
                case "insert":
                    {
                        alert("Insert new student record");
                        break;
                    }

                case "edit":
                    {
                        alert("Edit Student Record");
                        break;
                    }
            }
        }

        function pageLoad() {
            $(".StudentRow").contextMenu({ menu: 'myMenu' }, function (action, el, pos) { contextMenuWork(action, el, pos); });
            $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, function (action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });
        }

       
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
                AllowPaging="true" OnPageIndexChanging="Gridview1_PageIndexChanging" PageSize="5">
                <Columns>
                    <asp:TemplateField HeaderText="StudentID">
                        <ItemTemplate>
                            <asp:Label ID="lbl_StudentID" runat="server" Text='<%# Eval("Studentid") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle CssClass="gvhide" />
                        <HeaderStyle CssClass="gvhide" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="CollageName">
                        <ItemTemplate>
                            <asp:Label ID="lbl_CollageName" runat="server" Text='<%# Eval("CollageName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="StudentName">
                        <ItemTemplate>
                            <asp:Label ID="lbl_StudentName" runat="server" Text='<%# Eval("StudentName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <br />
        </ContentTemplate>
    </asp:UpdatePanel>
    <!-- Right Click Menu -->
    <ul id="myMenu" class="contextMenu">
        <li class="insert"><a href="#insert">Add New Record </a></li>
        <li class="edit"><a href="#edit">Edit Record</a></li>
        <li class="delete"><a href="#delete" >Delete record</a></li>
    </ul>
    </form>
</body>
</html>

Code behind Page (.CS page)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
using System.Web.Script.Services;

namespace ContextMenu
{
    public partial class ContextMenu : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGridView();
            }
        }

        private void BindGridView()
        {
            DataTable dt = new DataTable();
            dt = GetDatasource();
            Gridview1.DataSource = dt;
            Gridview1.DataBind();
        }

        private DataTable GetDatasource()
        { 
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Studentid", typeof(int)),
                            new DataColumn("CollageName", typeof(string)),
                            new DataColumn("StudentName",typeof(string)) });

            dt.Rows.Add(1, "VIT", "Munesh");
            dt.Rows.Add(2, "IIT", "Rahul");
            dt.Rows.Add(3, "XYZ", "ABC");
            dt.Rows.Add(4, "PQR", "Anshuman");

            return dt;
        }

        protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataTable dt = new DataTable();
                dt = (DataTable)Gridview1.DataSource;
                int rowindex = e.Row.RowIndex;
                e.Row.Attributes.Add("class", "StudentRow");

            }
        }

        protected void Gridview1_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            Gridview1.PageIndex = e.NewPageIndex;
            BindGridView();
        }
       
        [WebMethod]
        public static bool CallServerFunction(int a)
        {
            return true;

            //You can not call following function because it static method
            //Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "Alert();", true);
        }
       
    }
}

Now run your application and right click on your gridview ,then you perform operations



you can download this project from link Download

at 8 comments:
Subscribe to: Posts (Atom)

C# program Selection Sorting

Selection sort is a straightforward sorting algorithm. This algorithm search for the smallest number in the elements array and then swap i...

  • SQL server database connection in Window Form
                                                                                                                                              ...
  • Interview Question on Asp.Net
                                                                                                                                             ...
  • Important SQL Query
                                                                                                                                             ...