Click here to Skip to main content
Click here to Skip to main content
Go to top

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

Abstract

 Hi there of course all of you hear about Ajax  Wink | ;) 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="http://163.121.16.41/">http://163.121.16.41/</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)

   or

   b-GenricAjaxHH: it is  you call it like that

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

     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

Details

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

button1.Attributes.Add("onclick",
   "FillTable('oDiv','ClientPageDataGrid1',3, 
   '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.

Hints

there are some other functions

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

DropDownList1.Attributes.Add("onchange",
   "FillTextBoxesFromDDLOnChange('DropDownList1',['TextBox1','TextBox2',
   '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

DropDownList1.Attributes.Add("onchange", 
  "FillDropDownFromDropDown('DropDownList1','DropDownList2', 
   'SELECT fname,emp_id FROM employee WHERE pub_id=');");

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

 

Links

1-AJAX

2-Client-side paging for DataGrids

License

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

Share

About the Author

Taha Amin
Team Leader http://www.linkdev.com/
Egypt Egypt
B/OSS.

Comments and Discussions

 
Generalcode PinmemberMember #380403121-Feb-07 0:46 
GeneralUsing vb.net Pinmembernik_crash13-Sep-05 20:05 
GeneralSQL Injection Pinmemberbigals15-Aug-05 13:08 
GeneralRe: SQL Injection PinmemberTaha Zayed15-Aug-05 22:09 
GeneralRe: SQL Injection PinmemberMika16-Aug-05 23:51 
GeneralRe: SQL Injection PinmemberJohn Goodwin17-Aug-05 6:29 
GeneralRe: SQL Injection PinmemberTaha Zayed17-Aug-05 19:58 
GeneralRe: SQL Injection PinmemberTaha Zayed17-Aug-05 20:06 
GeneralRe: SQL Injection PinmemberTaha Zayed18-Aug-05 12:16 
GeneralRe: SQL Injection PinmemberMark Brandon25-Aug-05 4:08 
GeneralRe: SQL Injection PinmemberTaha Zayed25-Aug-05 4:33 
GeneralRe: SQL Injection PinmemberMark Brandon25-Aug-05 5:12 
GeneralRe: SQL Injection PinmemberTaha Zayed25-Aug-05 5:26 
GeneralRe: SQL Injection PinmemberMark Brandon25-Aug-05 5:57 
GeneralRe: SQL Injection - encrypting javascript Pinmemberegozi1314-Mar-06 7:01 
GeneralRe: SQL Injection - encrypting javascript PinmemberTaha Zayed14-Mar-06 20:49 
GeneralThis is not encryption, but merely encoding Pinmemberegozi1315-Mar-06 6:03 
GeneralRe: This is encryption, but merely encoding PinmemberTaha Zayed15-Mar-06 7:22 

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 | Mobile
Web04 | 2.8.140926.1 | Last Updated 12 Mar 2006
Article Copyright 2005 by Taha Amin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid