We have a simple asp.net grid view that shows some data and an ImageButton to edit the data.
Upon clicking the ImageButton we call the RowCommand event (server side event) to allow for edit of the data. The edit of the data comes unfortunately in the form of assigning the values to textbox controls that are inside a jquery dialog.
Now for some code to help you understand it:
In the grid view a rowcommand event:
protected void gvActions_RowCommand(object sender, GridViewCommandEventArgs e)
{
var db = new DataClasses1DataContext();
GridViewRow row = (GridViewRow)((Control)e.CommandSource).NamingContainer;
switch (e.CommandName)
{
case "Edit":
//wants to edit an action item
hdnOpenDialogActions.Value = "1";
////set the fields to what is inside the grid
Label id = (Label)row.FindControl("lblIssueActionID");
var rec = db.IssueActions.Single(x => x.IssueActionID == Convert.ToInt32(id.Text));
if (rec == null)
return;
//assign textboxes that are located inside of a jquery grid.
lblIssueActionID.Text = id.Text; //assign ID of action item
lblDialogOpenDateValue.Text = rec.OpenDate.ToShortDateString();
txtDialogTargetDateValue.Text = rec.TargetDate.ToShortDateString();
txtDialogClosedDateValue.Text = rec.ClosedDate.ToString();
hdnActionText.Value = rec.IssueAction1;
txtActionHTML.Value = rec.IssueActionHTML;
hdnActionResolutionText.Value = rec.IssueActionResolution;
txtActionResolutionHTML.Value = rec.IssueActionResolutionHTML;
hdnResponsibleValue.Value = rec.ResponsibleID.ToString();
lblResponsibleValue.Text = rec.ResponsibleContact.FullName;
break;
}
}
The hdnOpenDialogActions is used to ensure the dialog is open. Here is some of the jquery, as you see initially I hide it:
$("#dialogActions").hide();
$("#dialogActions").dialog({
autoOpen: false,
appendTo: "form:first",
width: 'auto',
height: 'auto',
modal: true,
open: function (event, ui) {
$('#dialogActions').css('overflow', 'hidden'); //this line does the actual hiding
},
close: function (event, ui) {
//if someone x's out (Closes the dialog) we better make sure we
//set the hidden field to 0 so that the dialog doesn't open up again on post back
$("#MainContent_hdnOpenDialogActions").val("0");
}
});
Here's the function that keeps it open (when I set the hidden field to 1 it means open the dialog):
if ($("#MainContent_hdnOpenDialogActions").val() === "1") {
$("#dialogActions").dialog("open");
$("#MainContent_txtActionHTML").focus();
} else {
$("#dialogActions").hide();
}
Here is the actual jquery grid (sorry for Table use :)):
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Always" ChildrenAsTriggers="True">
<ContentTemplate>
<div id="dialogActions" title="Issue Owner">
<table>
<tr>
<td class="labelField"><asp:Label ID="lblDBA" runat="server" Text="Open"></asp:Label></td>
<td class="valueField">
<asp:Label ID="lblDialogOpenDateValue" runat="server"></asp:Label>
<asp:Label ID="lblIssueActionID" runat="server" Visible="False"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
</td>
<td class="labelField">
<asp:Label ID="lblDRegion0" runat="server" Text="Responsible:"></asp:Label>
</td>
<td class="valueField">
<asp:Label ID="lblResponsibleValue" runat="server" ToolTip="Responsible"></asp:Label>
<asp:HyperLink ID="hlOpenResponsible" runat="server" NavigateUrl="#" Text="<img src="../../Images/edit.png" alt="Click to edit."/>" ToolTip="Click to change user reports to..."></asp:HyperLink> | <asp:HyperLink ID="hlClearResponsible" runat="server" NavigateUrl="#" Text="<img src="../../Images/delete.png" alt="Click to clear selection."/>" ToolTip="Click to clear selection."></asp:HyperLink>
<asp:HiddenField ID="hdnResponsibleValue" runat="server" />
<asp:HiddenField ID="hdnOpenResponsible" runat="server" Value="0" />
</td>
</tr>
<tr>
<td class="labelField">
<asp:Label ID="lblDRegion" runat="server" Text="Target:"></asp:Label>
</td>
<td class="valueField">
<asp:TextBox ID="txtDialogTargetDateValue" runat="server" CssClass="datePicker"></asp:TextBox>
</td>
<td class="labelField"><asp:Label ID="lblDPMIssue" runat="server" Text="Closed:"></asp:Label></td>
<td class="valueField">
<asp:TextBox ID="txtDialogClosedDateValue" runat="server" CssClass="datePicker"></asp:TextBox>
</td>
</tr>
<tr>
<td class="labelField">
<asp:Label ID="lblDPMIssue0" runat="server" Text="Action:"></asp:Label>
</td>
<td class="valueField" colspan="3">
<textarea id="txtActionHTML" runat="server" class="tinyeditor" cols="5" rows="5" title="Enter the action item."></textarea><asp:HiddenField ID="hdnActionText" runat="server" />
<asp:HiddenField ID="hdnActionHTML" runat="server" />
</td>
</tr>
<tr>
<td class="labelField">
<asp:Label ID="lblDPMIssue1" runat="server" Text="Resolution:"></asp:Label>
</td>
<td class="valueField" colspan="3">
<textarea id="txtActionResolutionHTML" runat="server" class="tinyeditor" cols="5" rows="5" title="Enter the action item resolution."></textarea><asp:HiddenField ID="hdnActionResolutionText" runat="server" />
<asp:HiddenField ID="hdnActionResolutionHTML" runat="server" />
</td>
</tr>
<tr>
<td class="labelField" colspan="4">
<asp:Button ID="btnSaveAction" runat="server" Text="Submit" OnClientClick="SubmitContent();" ToolTip="Submit / Save changes?" OnClick="btnSaveAction_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I set a breakpoint and I can see the code setting the textboxes but as soon as the dialog opens up everything is not really updated. The textboxes are empty etc...even though the code behind is showing that they are getting values.
My front end skills are pretty bad, so if someone can let me know why this is happening (could this be due to it being a server side control and it causing a post back after the row command event)?
