Your Ad Here
Google

Monday, March 05, 2007

 

ajax DataGrid(with client-side paging ) at glance




Sample Image - Ajax_DataGrid_at_glance.jpg


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/"

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



Labels:


Comments: Post a Comment



<< Home

This page is powered by Blogger. Isn't yours?