Click here to Skip to main content
13,200,202 members (54,510 online)
Click here to Skip to main content
Add your own
alternative version


57 bookmarked
Posted 15 Aug 2005

AJAX DataGrid(with client-side paging ) at glance

, 12 Mar 2006
Rate this:
Please Sign up or sign in to vote.
Genric AJAX library (fill textbox, dropdown, datagrid).

Sample Image - Ajax_DataGrid_at_glance.jpg


 Hi there of course all of you hear about Ajax  ;) and about its performance,but the main problem is you have to write Javascript function for each case also I didn't found any code to fill Datagrid(note: Datagrid is converted to Html Table at Client-side) with Ajax so I decided to write  generic JavaScipt library for Ajax and also support Datagrid with paging.

How to run demo

you have to change database connection string in web.config also you have to change

javascript variable called:

var serverURL="<A href=""></A>"

to you machine IP all of three files(AjaxLibHH09b.js,AjaxLibWS09b.js & HtmlTable2.aspx)

1]-I attach to projects you can use any of them

    a-GenricAjaxWS: it is HttpHandler webservice you call it like that

       http://localhost/GenricAjaxWS/GenricAjaxWS.asmx/GetData?sqlStr=select getdate()

       it returns XML DataSet.(of course 'select getdate()' is your sql select statement)


   b-GenricAjaxHH: it is  you call it like that


     but it works faster than Webservice(you must test it).

2]-to use GenricAjaxWS version use AjaxLibWS09b.js, to use  GenricAjaxHH version use AjaxLibhh09b.js


The files(AjaxLibWS09b.js,AjaxLibHH09b.js) contains javascript function

called FillTable(mySelect,myDiv,myDataGridName,pageSize,sqlStr) it takes 5 parameters

1]-mySelect:dropdown list name(to filter datagrid).

2]-myDiv:html Div (to place grid on it).

3]-myDataGridName:datagrid name

4]-pageSize:count of rows in each datagrid page

5]-sqlStr:sql select statement.

there are another Function called FillTable(myDiv,myDataGridName,pageSize,sqlStr)

it works like the above but it doesn't take dropdown list name.

to use it you have to add this controls to you page

a]-add html hidden input called DataGrid1__PAGENUM.

b]-add html div and add id attribute to it(you will use this id).

c]-add any control to fire Fill function and add this line of code in page load

   'SELECT title,type,pub_id,price,advance FROM titles');");

while 'button1' is your control name

d]-add javascript file to project.

e]-add script tag in page head(in aspx) to map to script file.

and have fun.


there are some other functions

1]-FillTextBoxesFromDDLOnChange(mySelect,ar2,sqlStr):to fill a list of textboxes according to dropdown selection

   'TextBox3','TextBox4','TextBox5'], 'SELECT title,type," + 
   "pub_id,price,advance FROM titles where title_id=');");

2]-FillDropDownFromDropDown(mySelect,mySelect2,sqlStr):to filter dropdown from another dropdown

   'SELECT fname,emp_id FROM employee WHERE pub_id=');");

3]-FillDDL(mySelect,sqlStr)&clearDDL(mySelect): to fill and clear dropdown.




2-Client-side paging for DataGrids


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Taha Amin
Egypt Egypt
Senior Development Manager, with 11 years of experience. Focused on design/developing/delivery B/OSS modules to satisfy customer/business requirements in accordance to TM Forum's TAM/SID framework. Excellent communication and interpersonal skills, flexibility, ability to adjust to new people and situations, strong problem solving skills and willing to work effectively and efficiently. Gained additional leadership skills such as: - High effective mentorship and coaching - Clearly communication and solutions sharing with my team - Decision making

You may also be interested in...

Comments and Discussions

Generalcode Pin
Member #380403121-Feb-07 0:46
memberMember #380403121-Feb-07 0:46 
GeneralUsing Pin
nik_crash13-Sep-05 20:05
membernik_crash13-Sep-05 20:05 
GeneralSQL Injection Pin
bigals15-Aug-05 13:08
memberbigals15-Aug-05 13:08 
GeneralRe: SQL Injection Pin
Taha Zayed15-Aug-05 22:09
memberTaha Zayed15-Aug-05 22:09 
GeneralRe: SQL Injection Pin
Mika16-Aug-05 23:51
memberMika16-Aug-05 23:51 
GeneralRe: SQL Injection Pin
John Goodwin17-Aug-05 6:29
memberJohn Goodwin17-Aug-05 6:29 
GeneralRe: SQL Injection Pin
Taha Zayed17-Aug-05 19:58
memberTaha Zayed17-Aug-05 19:58 
GeneralRe: SQL Injection Pin
Taha Zayed17-Aug-05 20:06
memberTaha Zayed17-Aug-05 20:06 
GeneralRe: SQL Injection Pin
Taha Zayed18-Aug-05 12:16
memberTaha Zayed18-Aug-05 12:16 
GeneralRe: SQL Injection Pin
Mark Brandon25-Aug-05 4:08
memberMark Brandon25-Aug-05 4:08 
GeneralRe: SQL Injection Pin
Taha Zayed25-Aug-05 4:33
memberTaha Zayed25-Aug-05 4:33 
GeneralRe: SQL Injection Pin
Mark Brandon25-Aug-05 5:12
memberMark Brandon25-Aug-05 5:12 
GeneralRe: SQL Injection Pin
Taha Zayed25-Aug-05 5:26
memberTaha Zayed25-Aug-05 5:26 
GeneralRe: SQL Injection Pin
Mark Brandon25-Aug-05 5:57
memberMark Brandon25-Aug-05 5:57 
GeneralRe: SQL Injection - encrypting javascript Pin
egozi1314-Mar-06 7:01
memberegozi1314-Mar-06 7:01 
GeneralRe: SQL Injection - encrypting javascript Pin
Taha Zayed14-Mar-06 20:49
memberTaha Zayed14-Mar-06 20:49 
GeneralThis is not encryption, but merely encoding Pin
egozi1315-Mar-06 6:03
memberegozi1315-Mar-06 6:03 
GeneralRe: This is encryption, but merely encoding Pin
Taha Zayed15-Mar-06 7:22
memberTaha Zayed15-Mar-06 7:22 

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
Web03 | 2.8.171020.1 | Last Updated 12 Mar 2006
Article Copyright 2005 by Taha Amin
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid