.Net Framework, Asp.net, Ado.net, .Net Remoting, .Net Webservice, SQL, XML, XSLT, WCF, WPF, WWF NHibernate, Ajax, Jquery, DHTML

Ado.netAsp.Net 2.0SQLC-SharpXMLFrameworkIISXMLWebServiceArchitecture
UMLProject ManagementSDLCMethodologiesDesign PatterenOOPWCF.Net RemotingWWF
MVPMVCSilver LightN-HibernateAjaxJ-QuerySEO-MarketingSite MapPhp

How to edit gridview row using jquery DOM



How to edit a record in a grid! sometimes it become very time consuming to load the edited record, even if I change a single field all the data has to be re-bind again, we all must agree that internet user always expects a first result after any click they make. That becomes a challenge sometimes for us as a developer.

Here I am demonstrating an example to address this type of challenge.

Let’s take an example of a grid, where you might have few text fields and few dropdowns, and when user clicks on edit button of a row, user should be able to edit the information, and once update the information data should get saved in database and the updated data reflects on the screen. But! We don’t want the screen to be reloaded.

We have expert jquery developer in mumbai india, We can provide Php JQuery, Jquery with asp.net, jquery with ajax. Give a rich look to you application with with Jquery UI. Please contact us to know more about our service.
DOM handling code
Here we see how to pull & push data in grid, remember the DOM object structure may differ depending on the grid you are using, here I have given example with radgrid, you can use any grid same way.

This is how your html code inside any itemtemplate might look like, In example i have used DataList, you can use anything repeater, gridview. the logic will remain same.
DOM handling code
<script src="JQuery/jquery-1.4.1.js" type="text/javascript"></script>
1:<script type="text/javascript" language="javascript" >
2: $(document).ready(function() {
3:
4: $(".divLeads .showPop").click(function(e) {
5: var currentObjId = (this.id);
6: _text = $("img#" + currentObjId).attr('CaseId');
7: var _rowIndex = $("img#" + currentObjId).attr('RowIndexId');
8:
9: // load data
10: LoadRowData(_rowIndex);
11: var posx = e.pageX - (this.offsetLeft - 10);
12: var posy = e.pageY - (this.offsetTop - 10);
13:
14: $('.divInLinePop').css({ left: posx, top: posy }).animate({ opacity: 'show' }, "slow");
15: return false;
16: });
17:
18:
19: $(".divCloseInLinePop").click(function() {
20: $('.divInLinePop').animate({ opacity: 'hide' }, "slow");
21: return false;
22: });
23:
24: });
25:
26:
27: function LoadRowData(RowIndex) {
28: var _rowindex = eval(eval(RowIndex) - 2);
29: $("#ctl00_ContentPlaceHolderFox_lblRowMessage").html("");
30: document.getElementById("ctl00_ContentPlaceHolderFox_hdnResetRowValues").innerText = _rowindex;
31:
32:
33: var grid = $find("ctl00_ContentPlaceHolderFox_rgdLeads");
34: var row = grid.get_masterTableView().get_dataItems()[_rowindex].get_element();
35:
36: document.getElementById("ctl00_ContentPlaceHolderFox_txtAmount").innerText = row.cells[8].innerText;
37: var currency = row.cells[9].innerText;
38: if (currency != "") {
39: SelectOption("ctl00_ContentPlaceHolderFox_ddlstCurrency", currency);
40:
41: }
42: var stages = row.cells[13].innerText;
43: if (stages != "") {
44: SelectOption("ctl00_ContentPlaceHolderFox_ddlstStages", stages);
45:
46: }
47:
48: var DurationUnit = row.cells[12].innerText;
49: if (DurationUnit != "") {
50: SelectOption("ctl00_ContentPlaceHolderFox_ddlstDurationUnit", DurationUnit);
51:
52: }
53:
54: $get("ctl00_ContentPlaceHolderFox_txtDuration").innerText = row.cells[11].innerText;
55: $get("ctl00_ContentPlaceHolderFox_txtNextStep").innerText = row.cells[15].innerText;
56:
57: // set readonly fields.
58: $("#divCaseCode").html(row.cells[2].innerText);
59: $("#divClientName").html(row.cells[4].innerText);
60:
61:
62: }
63:
64:
65: function SelectOption(ListObj, Text) {
66: var List = document.getElementById(ListObj);
67: for (i = 0; i < List.options.length; i++) {
68: if (Trim(List.options[i].text.toLowerCase()) == Trim(Text.toLowerCase())) {
69: // alert(List.options[i].text + Text);
70: List.selectedIndex = i;
71: break;
72: }
73: else {
74: List.selectedIndex = 0;
75: }
76:
77: }
78: }
79:
80:
81: function ResetRowValues(RowIndex) {
82: alert("Update Successful!");
83: var grid = $find("ctl00_ContentPlaceHolderFox_rgdLeads");
84: var row = grid.get_masterTableView().get_dataItems()[RowIndex].get_element();
85:
86: row.cells[8].innerText = document.getElementById("ctl00_ContentPlaceHolderFox_txtAmount").defaultValue;
87: row.cells[11].innerText = $get("ctl00_ContentPlaceHolderFox_txtDuration").defaultValue;
88: row.cells[15].innerText = $get("ctl00_ContentPlaceHolderFox_txtNextStep").defaultValue;
89:
90: //dropdowns
91: row.cells[9].innerText = $get("ctl00_ContentPlaceHolderFox_ddlstCurrency").options[$get("ctl00_ContentPlaceHolderFox_ddlstCurrency").selectedIndex].text;
92: row.cells[13].innerText = $get("ctl00_ContentPlaceHolderFox_ddlstStages").options[$get("ctl00_ContentPlaceHolderFox_ddlstStages").selectedIndex].text; ;
93: row.cells[12].innerText = $get("ctl00_ContentPlaceHolderFox_ddlstDurationUnit").options[$get("ctl00_ContentPlaceHolderFox_ddlstDurationUnit").selectedIndex].text;
94:
95:
96:
97: //finally hide the in-line div.
98: $('.divInLinePop').animate({ opacity: 'hide' }, "slow");
99:
100: }
101:
102:</script>
103:


We can design the control as per our business requirement.
Design of the DIV/ POP
<style type="text/css" >
1:td {font-family:Verdana;font-size:10px; }
2:input {font-family:Verdana; font-size:10px; border-width:1px; border-style: solid; border-color:#024DE6;}
3:select {font-family:Verdana; font-size:10px; border-width:1px; border-style :solid; border-color:#024DE6;}
4:</style>
5:<div style="display:none;width:70%; border-width:1px; border-style:solid;border-color:#024DE6;position:absolute;background-color:#ffffff" class="divInLinePop" >
6:<div style="text-align:right;font-weight: bold; background-color:#1E68FE;" > <asp:Label ID="lblCasecode" runat="server" style="width:200px;" > </asp:Label><a href="#" class="divCloseInLinePop">[X]</a></div>
7:<div class="dvReadOnly" style=" background-color:#C9DBFF;height:20px;" >
8:<table >
9:<tr><td>Case Code :</td><td ><div id="divCaseCode" style="text-align:left;" ></div></td><td>&nbsp;&nbsp;&nbsp;&nbsp;Client Name :</td><td><div id="divClientName" style="text-align:left;"></div></td></tr>
10:</table>
11:</div>
12:<div>
13:<asp:UpdatePanel runat="server" ID="uplnlpopUpdate" >
14:<ContentTemplate >
15:<table>
16:<tr><td colspan="4" > <asp:Label runat="server" ID="lblRowMessage" > </asp:Label> </td></tr>
17:<tr><td>Amount</td><td> <asp:TextBox runat="server" ID="txtAmount" style="width:50px;" ></asp:TextBox> </td> <td> Currency</td><td> <asp:DropDownList runat="server" ID="ddlstCurrency"> </asp:DropDownList></td><td>Stages</td><td><asp:DropDownList runat="server" ID="ddlstStages" style="width:220px;/></td></tr>
18:<tr><td>Duration</td><td> <asp:TextBox runat="server" ID="txtDuration" style="width:50px;"> </asp:TextBox></td> <td>Duration Unit</td><td><asp:DropDownList runat="server" ID="ddlstDurationUnit"> </asp:DropDownList></td> <td>Next Step</td><td><asp:TextBox runat="server" ID="txtNextStep" style="width:220px;" /></td></tr>
19:<tr><td> <asp:Button Text="Update" runat="server" ID="btnUpdate" OnClick="btnUpdate_Click" /></td><td> <input type="hidden" runat="server" id="hdnResetRowValues" /> </td></tr>
20:</table>
21:</ContentTemplate>
22:</asp:UpdatePanel>
23:<div>
24:&nbsp;&nbsp;<a href="#" class="divCloseInLinePop">[CANCEL]</a>
25:</div>
26:</div>
27:</div>
28:


Code behind implementation and calling DOM reset function from code behind
Code behind implementation and calling DOM reset function from code behind
protected void btnUpdate_Click(object sender, EventArgs e)
1: {
2:
3: lblRowMessage.Text = "<font color='green'>Server side call - Updated successfully.</font>";
4:
5:// here you can execute all serverside business logic & database call related code. And based on that call either javascript function.
6:
7: if (!ClientScript.IsStartupScriptRegistered("updaterow"))
8: {
9: ScriptManager.RegisterStartupScript(this, this.GetType(), "updaterow", "ResetRowValues(" + hdnResetRowValues.Value + ");", true);
10:
11: }
12:
13: uplnlpopUpdate.UpdateMode = UpdatePanelUpdateMode.Conditional;
14: uplnlpopUpdate.Update();
15:
16:
17: }
18:
Leave your comment.
Name
Email
Comments
Tell Us6756+5 =

Reduce your Dialy IT Cost, Consult with us
Stay healthy in recession

Advertisement
Sponsored by

Privacy Policy ©2009 ETG Consultancy, All Rights Reserved Terms & Conditions
Asp.net, Ado.net, .Net Remoting, .Net Webservice, SQL, XML, XSLT, WCF, WPF, WWF NHibernate, Ajax, Jquery, DHTML