DataTables not woking after adding modal bootstrap.
please help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
border-style: solid;
border-width: 2px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id*=StudentGrid]").DataTable(
{
bLengthChange: true,
lengthMenu: [[15, 20, -1], [15, 20, "All"]],
bFilter: true,
bSort: true,
bPaginate: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit Record" Width="156px" Height="34px" />
</td>
<td rowspan="2"> </td>
</tr>
<tr>
<td colspan="4">
<asp:GridView ID="StudentGrid" runat="server" AutoGenerateColumns="False" ItemStyle-Width="Auto" CellSpacing="1" ClientIDMode="Static">
<Columns>
<asp:CommandField ShowHeader="True" ShowSelectButton="True" />
<asp:BoundField DataField="admno" HeaderText="Admno" SortExpression="account" />
<asp:BoundField DataField="Name" HeaderText="Student Name" SortExpression="Name" />
<asp:TemplateField HeaderText="Class">
<ItemTemplate>
<asp:DropDownList ID="ddlCLASS" runat="server" Height="22px" Width="74px">
</asp:DropDownList>
<asp:Label ID="lblCategory2" runat="server" Text='<%# Eval("Class") %>' Visible="False"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Stream">
<ItemTemplate>
<asp:DropDownList ID="ddlStream" runat="server" Height="21px" Width="98px" OnSelectedIndexChanged="ddlStream_SelectedIndexChanged">
</asp:DropDownList>
<asp:Label ID="lblCategory3" runat="server" Text='<%# Eval("Stream") %>' Visible="False"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Type">
<ItemTemplate>
<asp:DropDownList ID="ddlSTDTYPE" runat="server" Height="21px" Width="87px">
</asp:DropDownList>
<asp:Label ID="lblCategory" runat="server" Text='<%# Eval("STDTYPE") %>' Visible="False"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sex">
<ItemTemplate>
<asp:DropDownList ID="ddlSex" runat="server">
</asp:DropDownList>
<asp:Label ID="lblCategory4" runat="server" Text='<%# Eval("Sex") %>' Visible="False"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="House" HeaderText="Colour" SortExpression="House" />
<asp:BoundField DataField="ACNOS" HeaderText="ACNOS" SortExpression="ACNOS" />
<asp:CommandField HeaderText="View Payment Details" SelectText="PayDetails" ShowSelectButton="True" />
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div id="myModal" class="modal fade" style="width: auto;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button style="padding: 0px" type="button" data-dismiss="modal">×</button>
<h4>Student's Details</h4>
</div>
<div class="modal-body">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<div class="form-group">
<asp:Label ID="lblId" runat="server" Text="Account"></asp:Label>
</div>
<div class="form-group">
<asp:TextBox ID="txtName" runat="server" Text="Name"></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="txtclass" runat="server" Text="Class"></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="TextStream" runat="server" Text="Stream"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">
Close</button>
<asp:Button ID="Button2" runat="server" Text="Submit Record" Width="156px" Height="34px" />
</div>
</div>
</div>
</div>
<script type='text/javascript'>
function openModal() {
$('[id*=myModal]').modal('show');
}
</script>
</form>
</body>
</html>
Protected Sub [Select](ByVal sender As Object, ByVal e As GridViewCommandEventArgs)
If e.CommandName = "Select" Then
Dim gvRow As GridViewRow = StudentGrid.Rows(Convert.ToInt32(e.CommandArgument))
lblId.Text = (TryCast(gvRow.FindControl("lblId"), Label)).Text
txtName.Text = (TryCast(gvRow.FindControl("txtName"), TextBox)).Text
txtclass.Text = (TryCast(gvRow.FindControl("txtClass"), TextBox)).Text
ClientScript.RegisterStartupScript(Me.[GetType](), "Pop", "openModal();", True)
End If
End Sub
Private Sub StudentGrid_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles StudentGrid.RowCommand
If e.CommandName = "Select" Then
Dim index As Integer = Convert.ToInt32(e.CommandArgument)
Dim row As GridViewRow = StudentGrid.Rows(index)
Dim named As String = StudentGrid.Rows(index).Cells(1).Text
txtName.Text = named
Dim namesd As String = StudentGrid.Rows(index).Cells(2).Text
lblId.Text = namesd
Dim docment As String = StudentGrid.Rows(index).Cells(7).Text
ClientScript.RegisterStartupScript(Me.[GetType](), "Pop", "openModal();", True)
End If
End Sub
