Asp Dot Net Matters
Showing posts with label Grid Handling. Show all posts
Showing posts with label Grid Handling. Show all posts
Thursday, November 19, 2009
Monday, March 9, 2009
Ajaxified Grid 2
Ajax enabled grid using ICallbackEventHandler
In my previous article of “Ajax enabled grid using ICallbackEventHandler”, we have discussed about following operations
1.Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
2.Change pages of the grid.
3.Change page length of the gird
In this article we will discuss about editing the grid, i.e. just double click on the grid cell and the cell become editable. Change the content of the cell and click on Update button. This will update server side data without refreshing the page.
Best features of this grid are as follows
In my previous article of “Ajax enabled grid using ICallbackEventHandler”, we have discussed about following operations
1.Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
2.Change pages of the grid.
3.Change page length of the gird
In this article we will discuss about editing the grid, i.e. just double click on the grid cell and the cell become editable. Change the content of the cell and click on Update button. This will update server side data without refreshing the page.
Best features of this grid are as follows
Data will be bind to grid only once, i.e. on page load.
Only modified data goes to server and update the Data.
Logic for Grid Update : We can see grid and Data table as two dimensional array. User will update any cell i.e. row[i][j] this is like playing with two dimensional array in learing phase of programming; update cell row[i][j] in grid and the onclick of update button Update datable or other two dimensional array.
The basic UI will contain one grid and one update button. Will bind data to grid on page load
1.Simply copy paste following code in the tag of the page
The basic UI will contain one grid and one update button. Will bind data to grid on page load
1.Simply copy paste following code in the tag of the page
We have activated RowDataBound event of the grid.
2.We will maintain a datatable, so that we can avoid fetching data from database. This is only to make understanding more simpler. We will assume that we have datatable and we define get and set properties for the table as follows.
We can write a function which will return data table, and the get property will simply return that table. This time we have used session variable instead of Viewstate to store the table; because we need to update data on server side, if we use viewstate , to update it we need to do post back of the page.
To use this table we will simply say “_grid.DataSource = _sampleData;”
And to set new data table we will say _sampleData = _tempTable;
To use this table we will simply say “_grid.DataSource = _sampleData;”
And to set new data table we will say _sampleData = _tempTable;
Here _tempTable is the updated table after updating the grid on client side.
3.We will follow typical ICallbackEventHandler procedure and add folloing points on server side page, i.e. in c# code.
Implement ICallbackEventHandler interface
public partial class Default : System.Web.UI.Page , ICallbackEventHandler
Write RaiseCallbackEvent(string eventArgument) and GetCallbackResult()
Which will be as follows
Implement ICallbackEventHandler interface
public partial class Default : System.Web.UI.Page , ICallbackEventHandler
Write RaiseCallbackEvent(string eventArgument) and GetCallbackResult()
Which will be as follows
result is a global variable declared on the page.
We are following the same conversions in RaiseCallbackEvent(string eventArgument) which we have used in my last article
4.To make cell editable on double click we need to add javascript which will convert the cell in to textbox or in dropdownlist in such way that we can keep track of each updated cell.
As we have discussed earlier; we will look at the grid as a two dimentional array. Thus we will maintain unique id for each cell; in such a way that cell id will tell position of that perticular cell data in data table.
As we have discussed earlier; we will look at the grid as a two dimentional array. Thus we will maintain unique id for each cell; in such a way that cell id will tell position of that perticular cell data in data table.
Here understand that grid data is exact copy of the data table so row[i][j] in data table will match with row[i][j] of grid, unless we define our own order for binding the data to grid.
5.In step 1 we have activated RowDataBound event of the grid. In this step we will write code for RowDataBound event.
Define _rowNumber as global variable for same page.
To make cell editable we have added
MakeCellEditable(this) will write this JavaScript function in next step.
To identify each cell as unique cell and to mach it with corrosponding datatable entry, we will give id to each cell in such a way that it will follow row[i][j] structure.
i.e.
And we are increasing row number each time. Observe the way we have given id, we will get [i][j] position just by spliting the is on “_”.
6.To make cell editable we will write following function in JavaScript
This function will convert the cell into text box and set focus in that text box. Check the way we have assinged id to the text box; i.e.[i]_[j]_input obj is the cell, read step 5
7.Upto point 6 we are able to make cell editable; now we need to write a code which will pick all updated values and send them to server to update the datatable.
On click of update button we have called one javascript function ( reffer step 1), named UpdateTable().
We will write this JavaScript function
7.Upto point 6 we are able to make cell editable; now we need to write a code which will pick all updated values and send them to server to update the datatable.
On click of update button we have called one javascript function ( reffer step 1), named UpdateTable().
We will write this JavaScript function
Please reffer step 1 for 'Gridview','input' and UpdateGrid('updateTable$'+data);
data = textboxId|textboxData~textboxId|textboxData
data is string of modified data along with their textbox id.
data = textboxId|textboxData~textboxId|textboxData
data is string of modified data along with their textbox id.
8.UpdateGrid function will call RaiseCallbackEvent(string eventArgument) on server side.
Reffer step 3 where we have defined RaiseCallbackEvent(string eventArgument) and GetCallbackResult(). In step 3 we will observe
Reffer step 3 where we have defined RaiseCallbackEvent(string eventArgument) and GetCallbackResult(). In step 3 we will observe
if (args[0] == "updateTable") updateTable(args[1]); also observer last 3-4 lines of step 7
On server side updateTable is a function; which is responsible for updateing the Datatable. The function will be as follows.
In step 7 we have seen the javascript function JSUpdateTable()
And how we are sending updated data in the format of string.
For further understanding lets assume that we are getting data to server side and
_data = “0_1_input|ABC~3_3_input|XYZ” , this is how we send data from client to
Now in above function just observe how we will manipulate _data. Here understanding of each step is important so for this we can check the demo code and debug it.
result = "SUCCESS"; result is a global string.
After updating DataTable on server side we will send result to client, and if result = "SUCCESS" we will come to know that datatable has been updated successfully.And how we are sending updated data in the format of string.
For further understanding lets assume that we are getting data to server side and
_data = “0_1_input|ABC~3_3_input|XYZ” , this is how we send data from client to
Now in above function just observe how we will manipulate _data. Here understanding of each step is important so for this we can check the demo code and debug it.
result = "SUCCESS"; result is a global string.
After this GetCallbackResult() function (ref. point 3) will send result string to client.
9.On client side we need one function which will automatically get called. In step one we have registered following function
(Please reffer my "Ajaxified Grid 1" articles if you are not getting what this function means)
ShowResult JavaScript function will get called automatically after this GetCallbackResult(), so now we will write this function.
Above function is used only remove editable cells, i.e. to remove textboxes and to indicate that the server data has been updated.
10.On page load bind the grid
For editing the grid some points need to be considered; we have discussed only about text box, in the same way we can go for dropdown list, Text Areas etc. Possibilities are many.
But while updating the grid if we are using pagging and sorting then to update the corresponding row in data table is a problem. In this case we will add one column in the data table in which corresponds to table row, so if we can sort the table and can still maintain the row number i.e [i] in row[i][j].And this column will be hidden so that we can use it for adding and deleting the the data also.
But while updating the grid if we are using pagging and sorting then to update the corresponding row in data table is a problem. In this case we will add one column in the data table in which corresponds to table row, so if we can sort the table and can still maintain the row number i.e [i] in row[i][j].And this column will be hidden so that we can use it for adding and deleting the the data also.
Saturday, February 14, 2009
Ajaxified Grid 1
Use of ICallbackEventHandler may not be the good option to make grid Ajax enabled
In this post I will discuss following
In this post I will discuss following
- Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
- Change pages of the grid.
- Change page length of the gird
We will used RenderControl function to get HTML.
Using this function of control we are able to get HTML of that control., but for this we will have to use HtmlTextWriter and StringWriter as follows
e.g.
Here result will contain HTML format of the grid control. We will convert grid control to HTML after binding the data.
We will start developing the UI and code in following steps
Simply copy paste following code in the tag of the page
Since we can register this function by using “Page.ClientScript.RegisterClientScriptBlock” If we register above function using this that function will appear in tag only.
This function will be fired after server sends response back to client, thus this function will manipulate server response. We have simply put the response as innerHTML of the Div tag. This innerHTML contains HTML format of the updated grid.
Server-Side functions are as follows
This function simply returns the result which we have put as innerHTML in ShowResult function (Refer previouse point)
In this function eventArgument will appear as “changePage$1$10” or “sort$1$10” or “changePageLength$1$10” or “sort$Contact Name Asc$10” or “sort$Contact Name Desc$10”
If we split this on “$”, we will get
- Action .
- Page index of the Grid.
- Page size from the dropdown list (i.e. id is ‘ddl’).
(In changePageLength we don’t need args[2]; I have kept is just to makecoding little simple)
In RaiseCallbackEvent we have simply called the function which we have decleared in POINT 3, each function in point 3 will do the respective action and return a HTML string of the Grid.
Add following code protected void Page_Load(object sender, EventArgs e)
[At this point if we compile the code we will able to chage the page length ]
Now we will write code in the RowDataBound event of the Grid.. I.e. in protected void _grid_RowDataBound(object sender, GridViewRowEventArgs e)
For adding columnwise sorting functionality in grid, we will modify columnheader row of the grid.
We have added Up and down images and onclick of either of them we have called UpdateGrid function (Ref. Point 4) , for sorting Ascending and Descending order repectively. [At this point you can complie the code and the grid will be Sortable].
After this we will modify the Pager row in such a way that we can use it to change the page index of the grid using UpdateGrid function.(Ref. point 4 public void RaiseCallbackEvent)
_pageCount contains the pagecount of the grid. We have to display pages as Numbers so we used HyperLink and Label to add space after each page number. We can choose our own way to display pages, just we will have to take care of adding the attribute of JavaScript.
And now we have created an Ajax enabled grid using ICallbackEventHandler.
(Don’t forget to Add ICallbackEventHandler).
Subscribe to:
Posts (Atom)
