Bootstrap (responsive) gridview with smart paging in asp.net c#

In this article we learn how to make a gridview with fully responsive and with smart paging in asp.net c#. Here we makes some feature in gridview like mouse hover view in gridview column .I had implement this code our real life project Bitto Properties.



Database:-


Source Code:-

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <style type="text/css">
                .table table tbody tr td a,

                .table table tbody tr td span {
                    position: relative;
                    float: left;
                    padding: 6px 12px;
                    margin-left: -1px;
                    line-height: 1.42857143;
                    color: #337ab7;
                    text-decoration: none;
                    background-color: #fff;
                    border: 1px solid #ddd;
                }

                .table table > tbody > tr > td > span {
                    z-index: 3;
                    color: #fff;
                    cursor: default;
                    background-color: #337ab7;
                    border-color: #337ab7;
                }

                .table table > tbody > tr > td:first-child > a,
                .table table > tbody > tr > td:first-child > span {
                    margin-left: 0;
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }

                .table table > tbody > tr > td:last-child > a,
                .table table > tbody > tr > td:last-child > span {
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }


                .table table > tbody > tr > td > a:hover,
                .table table > tbody > tr > td > span:hover,
                .table table > tbody > tr > td > a:focus,
                .table table > tbody > tr > td > span:focus {
                    z-index: 2;
                    color: #23527c;
                    background-color: #eee;
                    border-color: #ddd;
                }
            </style>

            <asp:GridView ID="GridView1"
                CssClass="table table-striped table-bordered table-hover" PageSize="3"
                runat="server"
                AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" EnableModelValidation="True">
            </asp:GridView>


        </div>
    </form>
</body>
</html>


Code behind(c#):-
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class gridviewwithpaging : System.Web.UI.Page
{
  



    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
         
            BindDataList();
        }
       
    }
   
  
    protected void BindDataList()
    {

        SqlConnection con = new SqlConnection("Data Source=NEERAJ-PC\\NEERAJ;Initial Catalog=CodeSolution;Persist Security Info=True;User ID=sa; password=12345678");
        con.Open();
        SqlCommand command = new SqlCommand("SELECT * from record", con);
        SqlDataAdapter da = new SqlDataAdapter(command);
        DataTable dt = new DataTable();
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        con.Close();
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        GridView1.DataBind();
        BindDataList();
    }
}

Out-Put:-



Bootstrap (responsive) gridview with smart paging in asp.net c# Bootstrap (responsive) gridview with smart paging in asp.net c# Reviewed by NEERAJ SRIVASTAVA on 1:57:00 PM Rating: 5

No comments:

Powered by Blogger.