Hello,
I was trying to implement gridview edit rows using bootstrap modal.
All the code is executed correctly but the bootstrap modal doesnt show up. Below is my code.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel2model" runat="server">
<ContentTemplate>
<!--Gridview--!>
<asp:GridView ID="grvBranches" runat="server" AutoGenerateColumns="False"
CssClass="table table-bordered table-responsive" DataKeyNames="store_code"
AllowPaging="True" PageSize="5" OnPageIndexChanging="OnPaging" CellPadding="4"
ForeColor="#333333" GridLines="None" onrowcommand="grvBranches_RowCommand">
<EditRowStyle BackColor="#2461BF" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle CssClass="pagination-ys"
HorizontalAlign="Center" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="S.No" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg">
<ItemTemplate>
<asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Branch Code" DataField="store_code" Visible="false" />
<asp:BoundField HeaderText="Name" DataField="store_name" />
<asp:BoundField HeaderText="Location" DataField="location" HeaderStyle-CssClass="visible-lg visible-md" ItemStyle-CssClass="visible-lg visible-md" />
<asp:BoundField HeaderText="Remarks" DataField="remarks" ItemStyle-Width="20%" ItemStyle-CssClass="visible-lg visible-md" HeaderStyle-CssClass="visible-lg visible-md" />
<asp:TemplateField HeaderText="Active" HeaderStyle-CssClass="visible-lg visible-md visible-sm visible-xs" ItemStyle-CssClass="visible-lg visible-md visible-sm visible-xs">
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkIsActive" Checked='<%# Eval("is_active") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Added By" DataField="created_by" HeaderStyle-CssClass="visible-lg visible-md" ItemStyle-CssClass="visible-lg visible-md" />
<asp:BoundField HeaderText="Created On" DataField="time_stamp" HeaderStyle-CssClass="visible-lg visible-md" ItemStyle-CssClass="visible-lg visible-md" />
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Details" HeaderText="Details" />
</Columns>
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<!--Bootstrap Modal--!>
<div id="editModal" class="modal hide fade"
tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Branch</h3>
</div>
<asp:UpdatePanel ID="upEdit" runat="server">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr>
<td>Name :
<asp:Label ID="lblditBranchName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>Location :
<asp:TextBox ID="txtEditLocation" runat="server" CssClass="form-control"></asp:TextBox>
</td>
</tr>
<tr>
<td>Is Active:
<asp:CheckBox runat="server" ID="ChkEditIsActive" />
</td>
</tr>
<tr>
<td>Remarks:
<asp:TextBox ID="txtEditRemarks" TextMode="MultiLine" CssClass="form-control" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnUpdate" runat="server" Text="Update" CssClass="btn btn-info"/>
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grvBranches" EventName="RowCommand" />
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And this is the code behind
protected void grvBranches_RowCommand(object sender, GridViewCommandEventArgs e)
{
int Index=Convert.ToInt32(e.CommandArgument);
if (e.CommandName.Equals("editRecord"))
{
GridViewRow grvRow = grvBranches.Rows[Index];
lblditBranchName.Text=HttpUtility.HtmlDecode(grvRow.Cells[1].Text);
txtEditLocation.Text=HttpUtility.HtmlDecode(grvRow.Cells[2].Text);
txtEditRemarks.Text=HttpUtility.HtmlDecode(grvRow.Cells[3].Text);
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#editModal').modal('show');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "EditModalScript", sb.ToString(), false);
}
<!--Jquery and Bootstrap Files --!>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
Can anyone please let me know where I'm going wrong.