Hooking up a JQuery Form Dialog Widget to an ASP.NET GridView Control
Let’s face it: the stock ASP.NET GridView control has some behaviors and limitations that aren’t exactly optimal. For starters, the lack of a nice way for users to add new rows to the grid is unfortunate. There are, of course, several different work-arounds for this all of which have their pros and cons.
I have been testing out using the JQuery Modal Form dialog widget as an input mechanism for new GridView rows. This has the benefit of not requiring the use of ASP.NET’s heavyweight ViewState and constant back and forth communication with the Web Server. Also, the modal nature of the widget on the Web form is a benefit.
The obvious drawback of using client side code is that the newly added rows are not stored in ViewState and you will need to handle them yourself. This really isn’t a big deal if you consider using Ajax calls to a Web Service rather than a complete form submission.
Reviewing the Code Logic
Below I’m including a fully working example of a GridView with a JQuery Form dialog widget that will add rows to your grid. I used and then heavily modified the example code from the JQuery-UI site for the JQuery part of this example.
The load of the data from your database onto the Web page happens when the page is first called, after which you can deal with the user interactions with the rendered grid using client-side code.
As you can see from the example image at the start of this article, the grid has a Checkbox column, a TextBox column, and a TextArea column for notes. When the users clicks on the Add New Row button, the JQuery Modal dialog is displayed. The dialog presents a simple form-like interface, which can be friendlier to users than a simple blank row.
The JQuery dialog also makes it possible to add form validation to the dialog along with error messages if the validation rules aren’t met. This is a very useful benefit to increasing the usability of your Web forms.
Related Reading
The actual code is reasonably self explanatory. If you are looking for deeper explanations of the JQuery Modal Dialog API, then it’s a good idea to visit the official JQuery-UI site.
I have written further articles covering JQuery and .NET that can be worth checking out.
I also have written an article about using the JQuery Modal Dialog with CheckBoxes in an ASP.NET GridView that presents some interesting example code about how to allow/dis-allow checkbox actions in a GridView using a JQuery Modal alert pop-up.
The Example Code
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script runat="server">
Dim m_testData As New Hashtable()
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
m_testData.Add("test_1_id", "test_1_value")
m_testData.Add("test_2_id", "test_2_value")
m_testData.Add("test_3_id", "test_3_value")
m_testData.Add("test_4_id", "test_4_value")
dlGeneralList.DataSource = m_testData
dlGeneralList.DataBind()
End Sub
</script>
<script>
$(function () {
var include = $("#include"),
ident = $("#ident"),
notes = $("#notes"),
allFields = $([]).add(name).add(ident).add(notes),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function () {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"New Row": function () {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(ident, "ident", 1, 80);
bValid = bValid && checkLength(notes, "notes", 0, 500);
if (bValid) {
var isInclude = '';
if (include.attr('checked') == 'checked') { isInclude = 'checked'; }
$("#dlGeneralList tbody").append("<tr>" +
"<td style='width:50px;'><span class='ReportLabel'><input type='checkbox' " + isInclude + " id='chkDoInclude' /></span></td>" +
"<td style='width:250px;'><input name='NewRowtxtId' id='NewRowtxtId' type='text' value='" + ident.val() + "' class='ReportLabel' /></td>" +
"<td style='width:290px;'><textarea name='NewRowtxtNotes' rows='2' cols='20' id='NewRow_txtNotes_1' class='ReportLabel' style='height:20px;width:400px;'>" + notes.val() + "</textarea></td>" +
"</tr>");
$(this).dialog("close");
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$("#add-line")
.click(function () {
$("#dialog-form").dialog("open");
});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="dlGeneralList" Width="590px" AutoGenerateColumns="false" RepeatColumns="1"
RepeatDirection="Horizontal" runat="server" CellPadding="0" CellSpacing="0" ShowHeader="True"
BackColor="White" GridLines="None" BorderColor="Black" ForeColor="Black" Font-Size="8"
Font-Names="Tahoma" Visible="true" HeaderStyle-BackColor="Gray" HeaderStyle-ForeColor="White">
<Columns>
<asp:TemplateField HeaderText="Inc" ItemStyle-Width="50px">
<ItemTemplate>
<asp:CheckBox ID="chkInclude" runat="server" CssClass="ReportLabel"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID" ItemStyle-Width="250px">
<ItemTemplate>
<asp:TextBox ID="txtId" runat="server" CssClass="ReportLabel" Text='<%# Bind("key") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Notes" ItemStyle-Width="290px">
<ItemTemplate>
<asp:TextBox ID="txtNotes" runat="server" TextMode="MultiLine" Width="400" Height="20"
CssClass="ReportLabel" Text='<%# Bind("value") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<input type="button" id="add-line" value="Add New Row"></input>
</form>
<div id="dialog-form" title="Create new row">
<p class="validateTips">
Id is a required field.</p>
<form>
<fieldset>
<input type="checkbox" name="include" id="include" class="text ui-widget-content ui-corner-all" />
<label for="include">
Include</label>
<br />
<input type="text" name="ident" id="ident" value="" class="text ui-widget-content ui-corner-all" />
<label for="ident">
ID</label>
<br />
<input type="text" name="notes" id="notes" value="" class="text ui-widget-content ui-corner-all" />
<label for="notes">
Notes</label>
</fieldset>
</form>
</div>
</body>
</html>
Justin Cooney 
Leave a comment