ASP.NET GridView – edit records using JQuery Dialog

There are many ways in which you could modify modular data in Grid View:
1. Inline by making rows editable when u click on Edit
2. By using separate pages for Edit
3. By using popups/dialogs for adding/editing
In this post I will show how to implement the 3rd approach using JQuery UI Dialog for editing/adding data in ASP.NET GridView.

The following features have been implemented:
1. List customers
2. Add customer – Save/Cancel
3. Edit customer – Save/Cancel
4. Delete customer
5. Server side validation
6. Edit dialogs appear next to trigger links
You can check out the demo here:
http://samples.entechsolutions.com/GridWithEditDialog
The code is available here:
http://samples.entechsolutions.com/Downloads/GridWithEditDialog.zip

Implementation

Data source

The grid lists customers which are stored in list which is initialized for each new session. This way each user trying out this sample will not affect other users.
CustomerService is a class wrapped around list of customers that allows to add/edit/list customers:

01	public class CustomerService

02

{

03	private List<Customer> Customers

04

{

05

get

06

{

07	List<Customer> customers;

08	if (HttpContext.Current.Session["Customers"] != null)

09

{

10	customers = (List<Customer>)HttpContext.Current.Session["Customers"];

11

}

12

else

13

{

14	//Create customer data store and save in session

15	customers = new List<Customer>();

16

17	InitCustomerData(customers);

18

19	HttpContext.Current.Session["Customers"] = customers;

20

}

21

22	return customers;

23

}

24

}

25

26

27	public Customer GetByID(int customerID)

28

{

29	return this.Customers.AsQueryable().First(customer => customer.ID == customerID);

30

}

31

32

33

...

34	//Add/Update/Delete/GetAll

Add/Edit dialog

There are two main operations that are handled using JQuery dialog
* Add Customer
* Edit Customer
In both cases the same dialog is used, as well as the same content div and Update Panel

01	<div id="divEditCustomerDlgContainer">

02	<div id="divEditCustomer" style="display:none">

03

04	<asp:UpdatePanel ID="upnlEditCustomer" runat="server">

05	<ContentTemplate>

06	<asp:PlaceHolder ID="phrEditCustomer" runat="server">

07	<table cellpadding="3" cellspacing="1">

08

<tr>

09

<td>

10	*First Name:

11

</td>

12

<td>

13	<asp:TextBox ID="txtFirstName" Columns="40" MaxLength="50" runat="server" />

14

...

15

</td>

16

</tr>

17

<tr>

18

<td>

19	*Last Name:

20

</td>

21

...

22

</tr>

23

<tr>

24	<td colspan="2" align="right">

25	<asp:Button ID="btnSave" onclick="btnSave_Click" Text="Save" runat="server" />

26	<asp:Button ID="btnCancel" onclick="btnCancel_Click" onClientClick="closeDialog()" CausesValidation="false" Text="Cancel" runat="server" />

27

</td>

28

</tr>

29

</table>

30

31	</asp:PlaceHolder>

32	</ContentTemplate>

33

34	</asp:UpdatePanel>

35

36

</div>

37	</div>    <!-- divEditCustomerDlgContainer -->

You may notice that there are two divs around UpdatePanel – divEditCustomerDlgContainer and divEditCustomer. The reason for that is that when JQuery dialog opens – it is added after FORM tag in dom. That disables any ASP.NET submits and server side validation. The issue is described here:
http://www.trentjones.net/index.php/2009/03/jqueryui-dialog-with-aspnet-empty-post-values
To fix the issue I added a handler for JQuery Dialog open event that takes JQuery dialog DOM object and inserts it as a child of “divEditCustomerDlgContaine”. Note that JQuery dialog references divEditCustomer.

01	<script type="text/javascript">

02	$(document).ready(function() {

03	$("#divEditCustomer").dialog({

04	autoOpen: false,

05	modal: true,

06	minHeight: 20,

07	height: 'auto',

08	width: 'auto',

09	resizable: false,

10	open: function(event, ui) {

11	$(this).parent().appendTo("#divEditCustomerDlgContainer");    //This is where JQuery dialog is added to DlgContainer

12

},

13

});

14

});

15

...

When user clicks on Add/Edit customer links the following steps are followed:
1. JQuery dialog is opened
2. Content of dialog is overlayed with AJAX indicator and white background – BlockUI is used for that purpose
3. AJAX call is made that triggers refresh of upnlEditContent
4. On server side – dialog content is cleared for adding or loaded for editing.
5. Server side uses RegisterStartupScript to trigger a javascript call to UnlockDialog
6. Dialog is unlocked and available to user for editing
With this approach user sees the dialog right away and indicator tells him that data is being loaded. In most cases it should be pretty fast from click to being able to edit.

Positioning Dalog

You may notice that dialog appears to the right of the link that you click on. For that JQuery position() functionality is used:

01	function openDialog(title, linkID) {

02

03	var pos = $("#" + linkID).position();

04	var top = pos.top;

05	var left = pos.left + $("#" + linkID).width() + 10;

06

07

08	$("#divEditCustomer").dialog("option", "title", title);

09	$("#divEditCustomer").dialog("option", "position", [left, top]);

10

11	$("#divEditCustomer").dialog('open');

12

}

linkID is the ClientID of the link. Using the position() u can display dialog anywhere on the page or in relation to another control.

Running Client Side code using RegisterStartupScript in Async

To run some javascript script when response comes back from asynchronous request – function ScriptManager.RegisterStartupScript can be used.
The issue is that the first parameter in:
RegisterStartupScript Method (Control, Type, String, String, Boolean)
must be a control in update panel that will be rendered on the current request. In the “List Customers” page there are two update panels -”upnlEditCustomers” and “upnlCustomers” (for grid view).
The first panel is always updated on any async request (UpdateMode=”Always” by default). Originally I though to make it conditional which would be more efficient, but there were some issues to resolve and I decided it wasn’t worth the trouble in this case. As for “upnlCustomers” – we definitely don’t want that re-rendered on every async request – like opening/canceling the dialog, so this one is set to update conditionally.
To get RegisterStartupScript to work without worrying that triggering conrol is rendered in current request, I added another UpdatePanel whose sole purpose is to facilitate JavaScript calls from Async requests. This panel has an empty placeholder that’s used as a control in RegisterStartupScript:

1	<asp:UpdatePanel ID="upnlJsRunner" UpdateMode="Always" runat="server">

2	<ContentTemplate>

3	<asp:PlaceHolder ID="phrJsRunner" runat="server"></asp:PlaceHolder>

4	</ContentTemplate>

5	</asp:UpdatePanel>

On server side there is a function RegisterStartupScript(key, script) that uses update panel above:

01	private void RegisterStartupScript(string key, string script)

02

{

03	ScriptManager.RegisterStartupScript(phrJsRunner, phrJsRunner.GetType(), key, script, true);

04

}

05

06	private void TriggerClientGridRefresh()

07

{

08	string script = "__doPostBack(\"" + btnRefreshGrid.ClientID + "\", \"\");";

09	RegisterStartupScript("jsGridRefresh", script);   //Trigger async grid refresh on Save

10

}

11

12	private void HideEditCustomer()

13

{

14	ClearEditCustomerForm();

15	RegisterStartupScript("jsCloseDialg", "closeDialog();");    //Close dialog on client side

16

}

Clear data in dialog

When user clicks on “Add Customer” – data in dialog is cleared and all validators are reset to Valid. For this I wrote a function that loops through all the controls in dialog and then performs a certain action on the controls of certain type:

01	private void ClearEditCustomerForm()

02

{

03	//Empty out text boxes

04	var textBoxes=new List<Control>();

05	FindControlsOfType(this.phrEditCustomer, typeof(TextBox), textBoxes);

06

07	foreach (TextBox textBox in textBoxes)

08	textBox.Text = "";

09

10	//Clear validators

11	var validators=new List<Control>();

12	FindControlsOfType(this.phrEditCustomer, typeof(BaseValidator), validators);

13

14	foreach (BaseValidator validator in validators)

15	validator.IsValid = true;

16

}

17

18

19	static public void FindControlsOfType(Control root, Type controlType, List<Control> list)

20

{

21	if (root.GetType() == controlType || root.GetType().IsSubclassOf(controlType))

22

{

23	list.Add(root);

24

}

25

26	//Skip input controls

27	if (!root.HasControls())

28

return;

29

30	foreach (Control control in root.Controls)

31

{

32	FindControlsOfType(control, controlType, list);

33

}

34

}

Right now it only handles TextBoxes and Validators, but it can be easily expanded to support Text Areas, Drop Downs, etc…

JQuery Includes

This sample doesn’t include the files for JQuery UI and JQuery base library. Instead those are referenced at the google AJAX CDN.
The approach for including JQuery UI from Google AJAX CDN is covered here: http://encosia.com/2009/10/11/do-you-know-about-this-undocumented-google-cdn-feature/

1	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />

2

3	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

4	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>