Click here to Skip to main content
13,548,686 members
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 18 Aug 2014
Licenced CPOL

jquery javascript ajax grid for and mvc

, 18 Aug 2014
Rate this:
Please Sign up or sign in to vote.
hassle less free fast ajax grid with the use of javascript and


I know the issues we developers are came across while developing espacially while display list of records where client requires sorting , serching , filtering and many more. to come out with this issue i have created my own javascript based ajax grid which can easily integrate in and MVC application.

What are the Advantages.

  1. Easy integration
  2. Very Fast(tested with 10 Lacs Records).
  3. No external DLLs.
  4. Pure Javascript.
  5. Searching Option
  6. Sorting
  7. Ajax Paging

To achieve this i will show you step by step codes and its execution process with some images and details.


What we require.

I have created this script with pure java script and jquery ajax function so you must get a reference of jquery version 1.4 or above. CSS and other image file i will attach so you not need to worry on that. now i will show you how we are going to implement code.

Using the code

First Step: To achieve this please do necessary steps mentioned below. Create Database Grid. Create table company and procedure for listing. Please execute below mentioned scripts.

////Execute below script//////////

create database Grid

create table company
companyid int identity(1,1) primary key,
companyname nvarchar(50),
companyemail nvarchar(100),
companywebsite nvarchar(250)


Create Listing Procedure:

USE [Grid]

/****** Object:  StoredProcedure [dbo].[select_company_listing]    Script Date: 17-08-2014 12:55:57 ******/
CREATE procedure [dbo].[select_company_listing]

@companyname nvarchar(50),
@companyemail nvarchar(100),
@companywebsite nvarchar(250),
@FromPage int=0,
@ToPage int=0,
@intTotal int output

declare @strsql nvarchar(4000)
declare @strCountsql nvarchar(1000)
declare @xx int
set @xx = 0
set @strsql = ‘With CompanyEntities As (
Select ROW_NUMBER() Over (Order By companyname) As Row,companyid,companyname,companyemail,companywebsite
FROM Company WHERE  1=1if @companyname <> "
set @strsql= @strsql + ‘ and companyname like "%’+ @companyname + ‘%" ‘
if @companyemail <> "
set @strsql= @strsql + ‘ and companyemail like "%’+ @companyemail + ‘%" ‘
if @companywebsite <> "
set @strsql= @strsql + ‘ and companywebsite like "%’+ @companywebsite + ‘%" ‘

set @strsql= @strsql + ‘ )’

set @strsql= @strsql + ‘Select companyid,companyname,companyemail,companywebsite  From CompanyEntities Where’
set @strsql= @strsql + ‘ Row Between ‘ +  convert(varchar,@FromPage) + ‘ AND ‘ + convert(varchar,@ToPage) + ‘ Order By Row Asc  ‘

CREATE TABLE #TempLocal (ct int);

set @strCountsql = ‘ INSERT INTO #TempLocal (ct) SELECT count(companyid) FROM Company WHERE  1=1 ‘
if @companyname <> "
set @strCountsql= @strCountsql + ‘ and companyname like "%’+ @companyname + ‘%" ‘
if @companyemail <> "
set @strCountsql= @strCountsql + ‘ and companyemail like "%’+ @companyemail + ‘%" ‘
if @companywebsite <> "
set @strCountsql= @strCountsql + ‘ and companywebsite like "%’+ @companywebsite + ‘%" ‘

–print @strCountsql
exec (@strCountsql)

SELECT  @intTotal=ct FROM #TempLocal;
DROP TABLE #TempLocal;



Insert Records:

\\\\\\\\\\\\\Insert Records\\\\\\\\\\\\\\\\\\\\

SET @CT = 1

WHILE @CT <> 1000001

(‘A’ + CONVERT(varchar,@CT)
,’A’ + CONVERT(varchar,@CT) + ‘’
,’A’ + CONVERT(varchar,@CT) + ‘’)

SET @CT = @CT + 1

Now Database is ready so we are now going to create one website. Follow below steps.

After creating database you need to create website in visual studio.

Open Visual Studio –> File — > New –> Website

Choose language C#.

Create Script Folder and add commongrid.js file in it.

Please copy following code in commongrid.js file. In this file we will create java script function which will accept ajax request and will generate dynamic ajax grid. Its very long code so just put it i will explain you later which function will do what.

This is a 3 tier architecture sample application where we will creating one business logic folder, data access folder to handle business logic and database related operations.

Before move ahead we will create one folder named BusinessLogic. With in that we will create file named BLCompany.cs where we will mentioned properties of the all database column like below.

  private int _companyid;
    private string _companyname;
    private string _companyemail;
    private string _companywebsite;

public int ID
            return _companyid;
            _companyid = value;
    public string companyname
            return _companyname;
            _companyname = value.Replace("'", "''");

    public string companyemail
            return _companyemail;
            _companyemail = value.Replace("'", "''");
    public string companywebsite
            return _companywebsite;
            _companywebsite = value.Replace("'", "''");

Then after we will create DataAccess folder to call store procduers and return dataset. I am not describing tons of codes here just gives overview as once you find sample application where you will get entire idea easily. i will only show how to call and generate ajax grid.

Now we are ready with our business logic and data access layer. now we are going to create our intermediate page where ajaxy request will be handle. To achieve this create a folder named ajax. Within that create page named GetCompanyList.aspx. This page will handle request from page where grid will populate. This page will accept request and return html to ajax call.

Two main method we will execute in this page are listed below

// Dataset will receive the data by calling business logic function
// ds = objdoc.SelectCompanyList();
// Pager class where html paging will be populate.
// GetPagging(objdoc.Total, Convert.ToInt32(ConfigurationManager.AppSettings["ListingPageSize"]), strpath, pageno);

Now we are done with this and moves to main page where our grid will be populate.

Create Grid.aspx page. Add reference of jquery 1.4 or above. Css and images are attached in the sample. Add commongrid.js and validate.js file as a reference.


<input id="gridcurrentPage" value="1" style="display: none;" />
This hidden page will help ajax to handle current page.
<div id="dvgridpaging"></div> \\Ajax request will populate paging in this div.
<div id="dvgrid" class="grid-overflow"></div> \\ Ajax request will populate html grid in this div.

Please paste below html to your grid.aspx page.

<div id="disablingDiv"></div>
    <div id="divloading" style="position: absolute; display: none;">
        <img src='css/images/loading.gif' alt='loading' />

 <div class="g12">
        <h1>Company List</h1>       
        <input id="gridcurrentPage" value="1" style="display: none;" />
        <div id="dvgridpaging"></div>
        <div id="dvgrid" class="grid-overflow"></div>
    <script type="text/javascript" src="scripts/validate.js" language="javascript"></script>    
    <script type="text/javascript" src="scripts/commongrid.js" language="javascript"></script>        
    <script type="text/javascript" language="javascript">
        var g_columns = ['Name', 'Email', 'Website'];
        var g_columns_sorting = ['1', '1', '1', '1', '1', '1', '1', '1'];
        var g_columns_width = ['30%', '35%', '35%'];
        var g_columns_search = ['1', '1', '1'];
        var pagesize = '<%=ConfigurationManager.AppSettings["ListingPageSize"]%>';
        var requestURL = "Ajax/GetCompanyList.aspx?grid=1&amp;";
        var db_schema_name = ['companyname', 'companyemail', 'companywebsite'];
        var p = readCookie('currentpage')
        if (p) {
            if (p != "") {
                document.getElementById("gridcurrentPage").value = p;

        var x = readCookie('where')
        if (x) {
            if (x != "") {
                CreateDynamicGrid(g_columns, g_columns_sorting, g_columns_width, g_columns_search, pagesize, requestURL, db_schema_name, '', '', x);
            else {
                CreateDynamicGrid(g_columns, g_columns_sorting, g_columns_width, g_columns_search, pagesize, requestURL, db_schema_name, '', '', '');
        else {
            CreateDynamicGrid(g_columns, g_columns_sorting, g_columns_width, g_columns_search, pagesize, requestURL, db_schema_name, '', '', '');

Done.... Easy hun?... Yes now once page will load, it will call CreateDynamicGrid function which is in the commongrid.js file. thats it commongrid.js file will calll GetCompanyList.aspx file which is in ajax folder and it will return with grid which will populate in <div id="dvgrid" class="grid-overflow"></div> tag.

Points of Interest

Why i wrote ? When my client wants searching functionality on every column and on the top of the grid only. i serched out on the google but not found so got the idea to create simple grid and created and sharing is caring so though why cant i help others .... so shared.... happy coding....


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


About the Author

Web Developer QX Ltd
India India
I am an ambitious Software Professional who is always wanted to move forward….. Smile | :)

You may also be interested in...

Comments and Discussions

QuestionNice ajax grid Pin
deval patel16-Jul-15 22:30
memberdeval patel16-Jul-15 22:30 
GeneralExcellent Grid Pin
chetan.practice1-Dec-14 21:05
memberchetan.practice1-Dec-14 21:05 
GeneralMy vote of 5 Pin
chetan.practice1-Dec-14 21:05
memberchetan.practice1-Dec-14 21:05 
Generaljquery javascript ajax grid for and mvc Pin
yamak5-Nov-14 3:44
memberyamak5-Nov-14 3:44 
GeneralMy vote of 5 Pin
Sibeesh KV23-Sep-14 18:04
professionalSibeesh KV23-Sep-14 18:04 
QuestionMy Vote Of 5 Pin
Sibeesh KV23-Sep-14 18:03
professionalSibeesh KV23-Sep-14 18:03 
GeneralMy vote of 5 Pin
Christian Amado12-Sep-14 3:36
professionalChristian Amado12-Sep-14 3:36 
GeneralRegarding Jquery Example Pin
Suhita_kor9-Sep-14 21:40
memberSuhita_kor9-Sep-14 21:40 
QuestionNice one Pin
Cebocadence8-Sep-14 13:41
memberCebocadence8-Sep-14 13:41 
GeneralJavaScript Plugin Standard Pin
Nitij24-Aug-14 19:39
professionalNitij24-Aug-14 19:39 
GeneralRe: JavaScript Plugin Standard Pin
Vishal_00725-Aug-14 22:10
memberVishal_00725-Aug-14 22:10 
GeneralMy vote of 5 Pin
Thomas ktg20-Aug-14 23:23
memberThomas ktg20-Aug-14 23:23 
GeneralExcellent Plugin Pin
Bh@vesh20-Aug-14 7:43
memberBh@vesh20-Aug-14 7:43 
SuggestionPlease add prevention against SQL injection Pin
Red Feet20-Aug-14 5:57
memberRed Feet20-Aug-14 5:57 
GeneralRe: Please add prevention against SQL injection Pin
Vishal_00721-Aug-14 5:28
memberVishal_00721-Aug-14 5:28 
QuestionVery nice and easy to integrate Pin
Jigneshc19-Aug-14 20:10
memberJigneshc19-Aug-14 20:10 
GeneralMy vote of 5 Pin
Vishal_00719-Aug-14 10:09
memberVishal_00719-Aug-14 10:09 
GeneralMy vote of 5 Pin
Sanjay K. Gupta19-Aug-14 3:10
professionalSanjay K. Gupta19-Aug-14 3:10 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01-2016 | 2.8.180515.1 | Last Updated 19 Aug 2014
Article Copyright 2014 by Vishal_007
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid