Populate bootstrap modal from gridview edit link button - asp.net

I have a gridview containing membership providers roles.
With Link Button For editing and Link button for deleting.
I want to populate a modal with a text box inside it to save the role name as shown.
I succeeded in populating the modal and binding the grid and all of that, but, how can I bind the txtRoleName in the modal with the role name of the row? Preferably without any postback if possible, or with postback if not.
Here is the code for the grid:
<asp:GridView ID="grdRoles"
CssClass="table table-bordered responsive"
runat="server"
GridLines="None"
CellSpacing="-1"
AutoGenerateColumns="False"
OnPageIndexChanging="grdRoles_PageIndexChanging"
OnRowDataBound="grdRoles_RowDataBound"
ShowFooter="True" ShowHeaderWhenEmpty="True" EmptyDataText="Empty !">
<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<asp:Label ID="lblRank" runat="server" Text='<%# Container.DataItem %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Roles">
<ItemTemplate>
<asp:Label ID="lblRoleName" runat="server" Text='<%# Container.DataItem %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="btnEdit" data-toggle="modal" href="#EditModal" runat="server" CssClass="btn icon-edit" />
<asp:LinkButton ID="btnRemove" runat="server" CssClass="btn btn-danger remove" Text="<i class=icon-remove></i>" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And this is the code for the modal:
<div id="EditModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Edit"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="helpModalLabel"><i class="icon-external-link"></i> Edit Role</h3>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">Role Name</span>
<asp:TextBox ID="txtRoleName" Text='<%# Bind("RoleId") %>' runat="server"></asp:TextBox>
</div>
</div>
<div class="form-actions">
<asp:Button ID="btnSave" type="submit" class="btn btn-primary" runat="server" Text="Save" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

I am using data property to send data to the modal:
<a id="edit" href="#dlgName" data-toggle="modal" role="button"
data-id="<%# DataBinder.Eval (Container.DataItem, "Id") %>"
data-IsPrimary ="<%# DataBinder.Eval(Container.DataItem, "IsPrimary") %>" >Edit</a>
And, retrieve the data using jQuery:
var Id = $('#edit').data('Id');
var isprimary = $('#edit').data('IsPrimary');

Related

ASP.Net C# WebForm: Putting A LinkButton In GridView

I'm trying to put the following LinkButton into a GridView. Note the data-extend element of the LinkButton.
<asp:GridView ID="gvButtons" runat="server" AutoGenerateColumns="False" DataKeyNames="TrainingSwipeID"
CssClass="table table-bordered table-hover" ShowFooter="False">
<Columns>
<asp:TemplateField HeaderText="QuestionID" SortExpression="TrainingSwipeID">
<ItemTemplate>
<asp:LinkButton id="btnExtend" runat="server"
class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
data-extend='{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}'
data-toggle="modal" data-target="#myModal" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID" SortExpression="TrainingSwipeID">
<ItemTemplate>
<asp:Label id="lblSwipeID" runat="server" Text='<%# Eval("TrainingSwipeID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date" SortExpression="TrainingEnd">
<ItemTemplate>
<asp:Label id="lblExtendDate" runat="server" Text='<%# Eval("TrainingEnd") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The problem is the code in the LinkButton
data-extend='{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}'
When the page gets rendered I get the following as an example for the LinkButton.
<tr>
<td>
<a id="gvButtons_btnExtend_0" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog" data-extend="{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}" data-toggle="modal" data-target="#myModal" href="javascript:__doPostBack('gvButtons$ctl02$btnExtend','')"></a>
</td>
<td>
<span id="gvButtons_lblSwipeID_0">135</span>
</td>
<td>
<span id="gvButtons_lblExtendDate_0">2/10/2019 9:00:00 AM</span>
</td>
</tr>
How do I get the data-extend element within the LinkButton to render properly? It should render like this.
data-extend='{"TrainingSwipeID":135,"CurrentDate":"2/10/2019 9:00:00 AM"}'
ADDITIONAL INFO:
Here is the Javascript I use to open the modal dialog when the user clicks on the LinkButton:
<script>
$(function () {
$('#myModal').on('show.bs.modal', function (e) {
var ele = e.relatedTarget;
var sTrainingSwipeID = $(ele).data('extend').TrainingSwipeID;
var sCurrentDate = $(ele).data('extend').CurrentDate;
$("#TrainingSwipeID").val(sTrainingSwipeID);
$("#CurrentDate").val(sCurrentDate);
});
});
</script>
As well, here is the modal:
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Extend Date</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<asp:HiddenField ID="TrainingSwipeID" runat="server"></asp:HiddenField>
<asp:TextBox ID="CurrentDate" runat="server" autocomplete="off"></asp:TextBox>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<asp:Button ID="btnExtendFromModal" runat="server" Text="Extend" class="btn btn-primary" OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal" />
<button type="btnClose" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks #AlexKudryashev, you were able to help me get to the final solution. It seems there is a "bug" with ASP.Net in returning single and double quotes in strings (in my case used for Javascript) from code behind with server side controls. So finally tried the following which worked.
Create a data table and get each requested row from the database.
Format a text string from each returned row from the database and put it into a row in the data table.
Use the data table as the data source for the GridView.
Use a regular hyperlink tag in the GridView, not using the runat="server".
For reference:
Formatted string from the database in code behind to be put into the data table in the DataExtendText column:
sDataExtendText = "{\"TrainingSwipeID\":" + iTrainingSwipeID + ",\"CurrentDate\":\"" + sNextReviewDateNoFormat + "\"}";
The regular hyperlink tag in the GridView getting it's data from the DataExtendText column in the data table:
<a id="btnExtend" class="btn btn-outline-success btn-med" data-extend='<%# Eval("DataExtendText") %>' data-toggle="modal" data-target="#myModal">Extend</a>

delete data from asp:GridView use modal-dialog

I try to delete data that display in GridView after confirm it using twitter bootstrap. my gridview with modal-dialog as follow
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title clearfix ">
<div>
<b>Name</b>
<div style="float: left;">
</div>
</div>
</h2>
</div>
<div class="panel-body">
<div>
<asp:GridView ID="gridView" DataKeyNames="Id" runat="server"
CssClass="table table-striped table-bordered table-hove"
AutoGenerateColumns="False" HeaderStyle-Font-Bold="true"
OnRowEditing="gridView_RowEditing"
OnRowCancelingEdit="gridView_RowCancelingEdit"
OnRowUpdating="gridView_RowUpdating"
OnRowDeleting="gridView_RowDeleting"
OnRowCommand="gridView_RowCommand">
<Columns>
<asp:TemplateField HeaderText="ID" ControlStyle-Width="0px">
<ItemTemplate>
<asp:Label ID="txtid" runat="server" Text='<%#Eval("Id") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblid" runat="server" Width="40px" Text='<%#Eval("Id") %>' />
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblLName" runat="server" Text='<%#Eval("Location_name") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtLName" CssClass="form-control" runat="server" Text='<%#Eval("Location_name") %>' />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="LocName" AutoCompleteType="Disabled" runat="server" />
<asp:RequiredFieldValidator ID="ReqBrName" runat="server" ControlToValidate="BrName" Display="Dynamic" CssClass="valid" ErrorMessage="?" ValidationGroup="validaiton" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Options">
<ItemTemplate>
<asp:LinkButton ID="lbEdit" CssClass="btn btn-default btn-sm " runat="server" CommandName="Edit">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit</asp:LinkButton>
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>
<%-- Delete Form --%>
<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="">Delete the data</h4>
</div>
<div class="modal-body">
Are You sure?
<asp:Label ID="lblLName1" runat="server" Text='<%#Eval("id") %>' />
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default glyphicon glyphicon-remove" data-dismiss="modal">Cancel</button>
<asp:LinkButton ID="lbde" CssClass="btn btn-default btn-sm " runat="server" CommandName="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
</asp:LinkButton>
</div>
</div>
</div>
</div>
<%-- Delete Form --%>
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="lbUpdate" CssClass="btn btn-default btn-sm " runat="server" CommandName="Update">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Update
</asp:LinkButton>
<asp:LinkButton ID="lbCancel" CssClass="btn btn-default btn-sm " runat="server" CommandName="Cancel">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> Cancel
</asp:LinkButton>
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle Font-Bold="True"></HeaderStyle>
</asp:GridView>
</div>
</div>
</div>
and my JavaScript function is
<script>
function ConfirmDelete() {
$('#DeleteModal').modal()
return false;
}
</script>
so when I try to delete the record by using the popup model it's not working, the model will work fine but the data in lblLName1 allows will be the first record ID so when I confirm the first record will be deleted
could anyone helps me in that??
Thanks everyone
after trying several ways I found the solution.
first, change the calling button from
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm " runat="server" CommandArgument='<%#Eval("Id")%>' OnClientClick="return ConfirmDelete()"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</asp:LinkButton>
to
<asp:LinkButton ID="lbDelete" CssClass="btn btn-default btn-sm" runat="server" CommandArgument='<%#Eval("Id")%>'
OnCommand="lbDelete_Command" CommandName='<%#Eval("Location_name")%>'>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> حذف</asp:LinkButton>
and in c# call function under lbDelete_Command
protected void lbDelete_Command(object sender, CommandEventArgs e)
{
foreach (GridViewRow row in gridView.Rows)
{
HiddenField hf_id = row.FindControl("hf_Del_ID") as HiddenField;
Label l_name = row.FindControl("lb_Del_Name") as Label;
l_name.Text = e.CommandName.ToString();
hf_id.Value = e.CommandArgument.ToString();
}
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { ConfirmDelete(); });", true);
}
and I edit the fields under modal-body division like follow
<div class="modal-body">
<asp:HiddenField ID="hf_Del_ID" runat="server" />
Are You sure?
<h4><asp:Label ID="lb_Del_Name" runat="server"/></h4>
</div>
I use the hidden field hf_Del_ID for delete purpose
and the label lb_Del_Name for display only
and also the deleting SQL in C# as follow
try
{
HiddenField hf_id = (HiddenField)gridView.Rows[e.RowIndex].FindControl("hf_Del_ID");
con.Open();
SqlCommand cmd = new SqlCommand("delete from TABLE_NAME where Id=" + hf_id.Value, con);
int result = cmd.ExecuteNonQuery();
con.Close();
if (result == 1)
{
loadData();
lbl_msgDet.ForeColor = Color.Red;
lbl_msgDet.Text = " delete done";
}
}
catch (SqlException ex)
{
lbl_msgDet.ForeColor = Color.Red;
lbl_msgDet.Text = (String)GetGlobalResourceObject("Err_msg", "MsgDeleteErr") + "<br/>" + ex.Message;
}
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { CallMsg(); });", true);
I hope the solution helps
Thanks
this works for me... very easy
<asp:DataGrid runat="server" ID="dgMyGrid" ValidationGroup="grdMyGrid" OnDeleteCommand="dgRel_DeleteCommand" AutoGenerateColumns="false">
<Columns>
<asp:TemplateColumn HeaderText="FirstColumn">
<ItemTemplate>
<asp:Label runat="server" ID="FirstColumnID" Text='<%# getFirstColumnName(Eval("FirstColumn").ToString())%>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<div class="modal" id="myModal<%#Eval("MyIDToBound").ToString()%>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="modal-help-text">Are you sure to remove item?</p>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnDelete" CssClass="btn btn-secondary" CommandName="Delete" Text="Yes"/>
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<button type="button" data-toggle="modal" data-target="#myModal<%#Eval("MyIDToBound").ToString()%>">
<asp:Label runat="server" ID="lblDeleteButton" Text="Delete"></asp:Label>
</button>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>

Load and Save Data in Bootstrap popup modal in ASP.NET

I'm using master page for my web application there is a content page we can call it Banks data has a GridView displays all banks and has an Edit,Add,Delete buttons
I wand display a bootstrap modal with input data to edit or add new bank and to validate using asp RequiredFieldValidator
this is the ASPX Code
<Columns>
<asp:BoundField DataField="bankCode" HeaderText="Bank Code" />
<asp:BoundField DataField="bankName" HeaderText="Bank Name" />
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" CommandName="BankEdit" CommandArgument='<%#Eval("bankCode") %>' OnClick="lb_Edit_Click"><strong>Edit</strong></asp:LinkButton>
<asp:LinkButton ID="LB_Delete" runat="server" CssClass="btn btn-sm btn-danger" CommandName="BankDelete" CommandArgument='<%#Eval("bankCode") %>'><strong>Delete</strong></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle Height="15px" HorizontalAlign="Right" VerticalAlign="Middle" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnStringDb1 %>" SelectCommand="SELECT [bankCode], [bankNameAr], [bankNameEng] FROM [Bank]"></asp:SqlDataSource>
<!-- Modal -->
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:right">Bank Data </h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row" >
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" CssClass="btn btn-outline btn-primary" style="width:100px" OnClick="btnUpdateBank_Click" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width:100px">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Does any one have any Ideas to do this using ASP code behind without using Jquery
May be you need some thing like this.Remember two things
1.Dont forget to add ClientIDMode="Static" to asp.net control
2.Postback is prevented by e.preventDefault() to add jQuery functionality in click event
<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static">
<Columns>
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" ClientIDMode="Static"><strong>Edit</strong>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title" style="text-align: right">
Bank Data
</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row">
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" ClientIDMode="Static" CssClass="btn btn-outline btn-primary"
Style="width: 100px" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width: 100px">
Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.btn').on('click', function (e) {
e.preventDefault();
var buttonid = $(this).attr('id');
console.log(buttonid);
if (buttonid == "lb_Edit") {
$('#AddBankModal').modal({
show: true,
backdrop: 'static'
});
}
if (buttonid == "btnUpdateBank") {
//
alert('Do some ajax to send data to Backend');
}
//currentRow.remove();
});
})
</script>

Using button for the trigger, after can't click the button

Im using Button for some triggers, use the trigger but cant click, im remove the trigger, after button work but page header not displayed
look ate this
<asp:ImageButton ID="btnOderhelp" runat="server" OnClick="btnOderhelp_Click" ForeColor="White" ToolTip="Help" Height="25px" ImageUrl="~/img/help.png" />
<div class="col-md-12">
<div class="col-sm-2">
<asp:Label ID="Label2" runat="server" Text="Order No" Font-Bold="True" Font-Names="arial, helvetica, sans-serif" Font-Size="13px"></asp:Label>
</div>
<div class="col-sm-3">
<asp:TextBox ID="txtoder" MaxLength="15" runat="server" CssClass="form-control" Width="348px" placeholder="Oder Placement No/Style Name"></asp:TextBox>
<asp:HiddenField ID="hdnoder" runat="server"></asp:HiddenField>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtoder" CssClass="error" ErrorMessage="RequiredFieldValidator" Display="Dynamic" ValidationGroup="save" Font-Size="11px" ForeColor="Red">Order No Required!</asp:RequiredFieldValidator>
</div>
<div class="col-md-1" style="left: 30px;">
<asp:Label ID="Label8" runat="server" ForeColor="Red" Text="*"></asp:Label>
<asp:ImageButton ID="btnOderhelp" runat="server" OnClick="btnOderhelp_Click" ForeColor="White" ToolTip="Help" Height="25px" ImageUrl="~/img/help.png" />
...
</div>
...
</div>
I tried to use <asp:PostBackTrigger ControlID ="btnOderhelp" /> but it's not working for me, I can't click the button.
Make sure you have a <ScriptManager /> with
EnablePartialRendering="true"
Wrap the content you want to refresh
with a an UpdatePanel
Define your
Triggers
Exmaple
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="True" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-md-12">
<div class="col-sm-2">
<asp:Label ID="Label2" runat="server" Text="Order No" Font-Bold="True" Font-Names="arial, helvetica, sans-serif" Font-Size="13px"></asp:Label>
</div>
<div class="col-sm-3">
<asp:TextBox ID="txtoder" MaxLength="15" runat="server" CssClass="form-control" Width="348px" placeholder="Oder Placement No/Style Name"></asp:TextBox>
<asp:HiddenField ID="hdnoder" runat="server"></asp:HiddenField>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtoder" CssClass="error" ErrorMessage="RequiredFieldValidator" Display="Dynamic" ValidationGroup="save" Font-Size="11px" ForeColor="Red">Order No Required!</asp:RequiredFieldValidator>
</div>
<div class="col-md-1" style="left: 30px;">
<asp:Label ID="Label8" runat="server" ForeColor="Red" Text="*"></asp:Label>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnOderhelp" />
</Triggers>
</asp:UpdatePanel>
<asp:ImageButton ID="btnOderhelp" runat="server" OnClick="btnOderhelp_Click" ForeColor="White" ToolTip="Help" Height="25px" ImageUrl="~/img/help.png" />
Please use ajax updatepanel or set on aspx page EnableEventValidation="false"
<div class="modal fade" role="dialog" id="eventdis" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<asp:UpdatePanel ID="updatedes" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Voter Profile</h4>
</div>
<div class="modal-body">
<p>Mobile Number</p>
<asp:TextBox ID="txt_editVmobile" runat="server" CssClass="form-control placeholder-no-fix" placeholder="Mobile Number" autocomplete="off"></asp:TextBox>
<p>Status</p>
<asp:DropDownList ID="drp_edits" runat="server" CssClass="form-control"></asp:DropDownList>
<p>Caste</p>
<asp:DropDownList ID="drp_editc" runat="server" CssClass="form-control"></asp:DropDownList>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-primary" type="button">Cancel</button>
<asp:Button ID="btn_EditVoterProfile" runat="server" Text="Submit" OnClientClick="return hindModel();" CssClass="btn btn-danger" OnClick="btn_EditVoterProfile_Click" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>

Cannot hide Panel in Grdivew - Object reference not set to an instance of an object

I am trying to hide a Panel in Gridview but I get
Object reference not set to an instance of an object.
Here is the code I am using:
Protected Sub gvTally_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvTally.RowDataBound
If e.Row.Cells(2).Text = "Incomplete" Then
Dim Panelhide As Panel = CType(e.Row.FindControl("Panel1"), Panel)
Panelhide.Visible = False
Else
Dim Panelhide As Panel = CType(e.Row.FindControl("Panel1"), Panel)
Panelhide.Visible = True
End If
End Sub
And here is my Gridview:
<asp:GridView ID="gvTally" runat="server" EnableModelValidation="True"
AllowSorting="True" OnRowDataBound="gvTally_RowDataBound" class="table table-condensed table-striped table-bordered table-hover no-margin" AutoGenerateColumns="False" Font-Size="Small">
<Columns>
<asp:BoundField DataField="Company" HeaderText="Company">
<ItemStyle Width="180px" />
</asp:BoundField>
<asp:BoundField DataField="Submitted" HeaderText="Submitted" />
<asp:BoundField DataField="Variance" HeaderText="Variance" />
<asp:BoundField DataField="Accepted" HeaderText="Accepted" />
<asp:TemplateField HeaderText="Action" ShowHeader="False">
<ItemTemplate>
<asp:Button ID="Button3" runat="server" CssClass="btn btn-warning btn-small" Text="Unaccept" CommandName="Unaccept" Visible="False" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-success btn-small hidden-phone" Text="Accept" CommandName="Accept" />
<asp:Panel ID="Panel1" runat="server">
<a href="#accSettings3" role="button" class="btn btn-success btn-small hidden-phone" data-toggle="modal" data-original-title="">Accept
</a>
<div id="accSettings3" class="modal hide fade" tabindex="-3" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 id="myModalLabel3">Accept Validation
</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
Are you sure you want to accept the tally with the variance off?
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnacceptchanges" class="btn btn-primary" runat="server" Text="Yes" />
<button class="btn" data-dismiss="modal" aria-hidden="true">
No
</button>
</div>
</div>
</asp:Panel>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-info btn-small" Text="View" CommandName="View" />
</td>
</tr>
</ItemTemplate>
<ItemStyle Width="160px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
I am not sure why I cannot hide this Panel that contains other HTML and another Button Control even when I use FindControl.
I have other FindControls that work perfectly fine, but this one gives me the error that it cannot find the Panel1.
I am using the panel just to hide the code inside it.
This probably has nothing to do with the panel.
Make sure you have a data row and not a header or something.
If e.Row.RowType = DataControlRowType.DataRow Then
...
End If

Resources