Been breaking my head over this. Cannot figure out why my rowcommand is not firing.
I have an empty grid at Page Load. On a button click i launch a modal that has a save button. The save button add a new row to the Grid by binding it to a datatable. When i click the link button on the new row=> row command is not firing.
I have done this plenty times in my previous projects and never had this issue before. I wonder if it is caused by bootstrap validator within the Modal.
So this is my html:
<asp:UpdatePanel runat="server" ID="gridPanel" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView runat="server" ID="batchDetailGrid" CssClass="table table-responsive"
OnRowCommand="batchDetailGrid_RowCommand1">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:LinkButton id="cmdDelete" runat="server" class="btn "
CommandName ="DeleteRecord"
CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
Text="" ToolTip="Delete Record">
<i class="glyphicon glyphicon-remove"></i>
</asp:LinkButton>
<asp:LinkButton ID="cmdEdit" CssClass="btn" runat="server"
CommandName ="EditRecord"
CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
ToolTip="Edit Record">
<i class="glyphicon glyphicon-pencil"></i>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cmdCreate" EventName="click" />
<asp:AsyncPostBackTrigger ControlID="batchDetailGrid" EventName="rowcommand" />
</Triggers>
</asp:UpdatePanel>
<!-- Modal -->
<div class=" modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Card Details</h4>
</div>
<div class="modal-body">
<!--First Name Surname-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">First Name</asp:Label>
<div class="col-md-4">
<input type="text" name="firstname" id="firstname" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="First Name cannot be blank" />
</div>
<asp:Label runat="server" CssClass="control-label col-md-2">Surname</asp:Label>
<div class="col-md-4">
<input type="text" name="surname" id="surname" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Surname cannot be blank"/>
</div>
</div>
<!--NRC-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">NRC</asp:Label>
<div class="col-md-4">
<input type="text" name="NRC" id="NRC" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="NRC cannot be blank"/>
</div>
</div>
<!--Current Card-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Current Card</asp:Label>
<div class="col-md-4">
<input type="text" name="card" id="card" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Current Card cannot be blank"/>
</div>
</div>
<!--Action-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Requested Action</asp:Label>
<div class="col-md-4">
<input type="text" name="action" id="action" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Action cannot be blank"/>
</div>
</div>
<!--Reason-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Reason</asp:Label>
<div class="col-md-4">
<input type="text" name="reason" id="reason" class="form-control"
data-bv-notempty="true"
data-bv-notempty-message="Reason cannot be blank"/>
</div>
</div>
<!--Date requested-->
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Date Requested</asp:Label>
<div class="col-md-4">
<input type="text" name="dtrequested" id="dtrequested" class="form-control"/>
</div>
</div>
<!--Re-issue Required-->
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<asp:CheckBox runat="server" ID="chkIssue" Checked="true" CssClass="checkbox" Text="Re-issue required" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<asp:UpdatePanel ChildrenAsTriggers="true" UpdateMode="Conditional" runat="server" ID="btnPanel">
<ContentTemplate>
<asp:Button runat="server" ID="cmdCreate" Text="Create Request" CssClass="btn btn-primary" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
This is the jquery:
<script>
$(function () {
$('.btn').tooltip();
$('#cmdNewCard').click(function(){
$('#myModal').modal('show');
});
});
</script>
<script>
$(function () {
$('#dtrequested').datepicker({
autoclose: true
});
});
</script>
<script>
$(function () {
$('#form1').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
dtrequested: {
message: 'The Date is not valid',
validators: {
notEmpty: {
message: 'The date is required and cannot be empty'
},
date: {
format: 'MM/DD/YYYY',
message: 'The value is not a valid date'
}
}
},
}
})
.on('success.form.bv', function (e) {
var $form = $(e.target),
validator = $form.data('bootstrapValidator'),
submitButton = validator.getSubmitButton();
});
$('#dtrequested').on('change', function (e) {
// Validate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtrequested');
});
});
</script>
This is my server code on cmdCreate_click and the rowCommand that is not firing
Private Sub loadGrid(Optional index As Integer = 0)
With batchDetailGrid
.AutoGenerateColumns = True
.DataSource = ViewState("Batch")
.PageIndex = index
.DataBind()
End With
End Sub
Protected Sub batchDetailGrid_RowCommand1(sender As Object, e As GridViewCommandEventArgs)
MsgBox("")
If (e.CommandName = "EditRecord") Then
MsgBox("editing")
Dim index As Integer = (e.CommandArgument)
Dim row As GridViewRow = batchDetailGrid.Rows(index)
ScriptManager.RegisterStartupScript(Page, GetType(Page), "Modal", "$(#myModal).modal('show');", True)
End If
End Sub
This is unbeleivable, the reason why the rowcommand was not firing was because some of the input controls in the modal had name and id like action.
I copied code from a similar page with grid and modal (but the one that worked) and began to modify it to look like the one described above.
Eventually a found that when i copied through Modal Mark up the rowCommand stopped firing. Then i deleted all the input controls in modal except for firstname and surname. Rowcommand started firing, then i realised that it might be because i named my input control as "action".