AJAX DataGrid(with client-side paging ) at glance

• Download source files - 63 Kb
• update source files - 2.35 Kb

Abstract

 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="http://163.121.16.41/">http://163.121.16.41/"

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

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

and have fun.

Hints

there are some other functions

DropDownList1.Attributes.Add("onchange",
   "FillTextBoxesFromDDLOnChange('DropDownList1',['TextBox1','TextBox2',
   'TextBox3','TextBox4','TextBox5'], 'SELECT title,type," + 
   "pub_id,price,advance FROM titles where title_id=');");

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