Click here to Skip to main content
11,705,610 members (47,095 online)
Click here to Skip to main content

Tagged as

Expandable Table like Gridview

, 26 Mar 2014 CPOL 6.6K 172 7
Rate this:
Please Sign up or sign in to vote.
Virtual Expandable Gridview using Ajax post method

Introduction

In this tip, I am going to write about Expandable table using Ajax post method. I have used Div having name "tblUsers" to append using jQuery Ajax post method.

Let's see further in detail about that.

Background

In this tip, all the users data has been structured in gridview form.

Using Ajax post method, all user's data is retrieved and set to Div using jQuery.

It is very fast and smooth during expansion and there is no need for any other third party DLLs or setups.

Using the Code

I have implemented code here. There is only one page for making an expandable table. It is very easy and fast.

First, create a database named DemoDatabase in your SQL Server and that runs that script in your SQL server (only for this demo purpose, you can integrate your own database in this demo):

  CREATE TABLE [dbo].[Users](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [FirstName] [varchar](50) NULL,
    [LastName] [varchar](50) NULL,
    [UserName] [varchar](50) NULL,
    [Email] [nvarchar](150) NULL,
    [imageURL] [nvarchar](max) NULL,
PRIMARY KEY CLUSTERED 
(
    [id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[Users] ON 

GO
INSERT [dbo].[Users] ([id], [FirstName], [LastName], [UserName], [Email], _
[imageURL]) VALUES (1, N'Nirav', N'Prabtani', N'Nills', _
N'niravjprabtani@gmail.com', N'nirav.jpg')
GO
INSERT [dbo].[Users] ([id], [FirstName], [LastName], [UserName], [Email], _
[imageURL]) VALUES (2, N'Rajan', N'Mrug', N'Raj', _
N'Raj@gmail.com', N'rajan.jpg')
GO
INSERT [dbo].[Users] ([id], [FirstName], [LastName], [UserName], [Email], _
[imageURL]) VALUES (3, N'Rajesh', N'Saradhara', N'Rajesh', _
N'rajesh@yahoo.in', N'rajesh.jpg')
GO
INSERT [dbo].[Users] ([id], [FirstName], [LastName], [UserName], [Email], _
[imageURL]) VALUES (4, N'Dharmendra', N'Pansara', _
N'Dhamo', N'Dhamo@hotmail.com', N'demo.jpg')
GO
SET IDENTITY_INSERT [dbo].[Users] OFF
GO 

Now create WebForm IndexTable in your project.

1) IndexTable.aspx

Javascript Code

  <script src="js/jquery%20-1.8.3.min.js" 
type="text/javascript"></script>

CSS Styles

<style>
     .trHead
     {
         height: 30px;
         background-color: #c8c8c8;
         color: White;
         font-weight: bold;
     }
     .tdHead
     {
         width: 150px;
         border: 1px solid #c8c8c8;
         height: 30px;
         vertical-align: middle;
         padding-left: 5px;
         cursor: pointer;
     }
     .trExpand
     {
         border: 1px solid #c8c8c8;
     }
 </style>

HTML Code

<div>
  <%--Div Which has been Binded--%>
      <div id="tblUsers">
      </div>
 </div>

2) IndexTable.aspx.cs

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

namespace ExpandableTable
{
    public partial class IndexTable : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        // Get All users data

        [WebMethod]
        public static Users[] GetUsers()
        {
            // Create Object of a list
            List<Users> Details = new List<Users>();


            //Select All users data from SQL database
            string SelectUsers = "select * from Users";
            SqlConnection cn = new SqlConnection
            (ConfigurationManager.ConnectionStrings["cs_Users"].ConnectionString);
            SqlCommand cmd = new SqlCommand(SelectUsers, cn);

            cn.Open();
            cmd.ExecuteNonQuery();

            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dtUsers = new DataTable();

            da.Fill(dtUsers);

            //Insert all users data into LIST
            foreach (DataRow dtrow in dtUsers.Rows)
            {
                Users Dataobj = new Users();
                Dataobj.id = Convert.ToInt32(dtrow["id"]);
                Dataobj.FirstName = dtrow["FirstName"].ToString();
                Dataobj.LastName = dtrow["LastName"].ToString();
                Dataobj.UserName = dtrow["UserName"].ToString();
                Dataobj.Email = dtrow["Email"].ToString();
                Dataobj.ImageURL = dtrow["imageURL"].ToString();
                Details.Add(Dataobj);
            }

            //Return array value to bind data
            return Details.ToArray();
        }

        //Class of users
        public class Users
        {
            public int id { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string UserName { get; set; }
            public string Email { get; set; }
            public string ImageURL { get; set; }
        }
    }
} 

In this manner Div "tblUsers" has been bound using Ajax Post method like Expandable table.

How Does It Work??

When application is started, first of all, jQuery page load method occurs and using Ajax post method WebMethod GetUsers() is called and all users data from database returned in array format using Users class.

We can struct Div using append jQuery syntax.

In this example, there are two <tr> tags that have been initialized in Div, one is visible and the second is invisible using CSS property "display:block".

When Div will bind, it will look like that:

There are four Users, therefore there are four columns in a table.

Now if you click on any column of a table, then the second row which is already invisible is set to visible by calling JavaScript function ExpandGrid():

function ExpandGrid(id) {
            $("#trExpand" + id).toggle(300);
        } 

and it will look like...

Points of Interest

I have designed it in a very simple form. You can modify by simply assigning styles or classes.

We can also put up and down arrows for expanding functionality.

We can apply transition effects using jQuery during expansion of table.

History

  • 27th March 2014: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nirav Prabtani
Web Developer Satva Infotech
India India



Nirav Prabtani

I am a software engineer at Satva Infotech, Database Architect and Designer /Technical Architect/Analyst
Programmer in Microsoft .NET Technologies & Microsoft SQL Server with more than
2 years of hands on experience.

I love to code....!!! Smile | :)


My recent past includes my work with the education domain as a technical business
requirement analyst, database architect & designer and analyst programmer; just
love my involvement with the world of knowledge, learning and education and I think
I know quite well what I want to do in life & in my career. What do I like? Well,
ideation, brainstorming, coming up with newer and more creative ways of doing things;
each time with an enhanced efficiency. An item in my day's agenda always has a task
to look at what I did yesterday & focus on how I can do it better today




Contact Me

Nirav Prabtani


Mobile : +91 738 308 2188

Email : niravjprabtani@gmail.com

My Blog:
Nirav Prabtani



You may also be interested in...

Comments and Discussions

 
QuestionA nice initial effort Pin
ahagel27-Mar-14 7:40
memberahagel27-Mar-14 7:40 
QuestionThanks, I will give to it a 4.5 out 5 Pin
bigwelly7627-Mar-14 2:36
memberbigwelly7627-Mar-14 2:36 
AnswerRe: Thanks, I will give to it a 4.5 out 5 Pin
Nirav Prabtani 27-Mar-14 2:42
professionalNirav Prabtani 27-Mar-14 2:42 
GeneralMy vote of 4 Pin
Pratik Bhuva26-Mar-14 21:25
professionalPratik Bhuva26-Mar-14 21:25 
GeneralRe: My vote of 4 Pin
Nirav Prabtani 26-Mar-14 22:46
professionalNirav Prabtani 26-Mar-14 22:46 
GeneralThanks... Pin
HardikPatel8926-Mar-14 18:49
professionalHardikPatel8926-Mar-14 18:49 
GeneralRe: Thanks... Pin
Nirav Prabtani 26-Mar-14 18:51
professionalNirav Prabtani 26-Mar-14 18:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150819.1 | Last Updated 26 Mar 2014
Article Copyright 2014 by Nirav Prabtani
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid