# .NET and More > ASP.NET And ASP.NET Core >  Jquery datables  not working afer adding modal boostrap

## Makumbi

```
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim cmd As New SqlCommand("SELECT  NAME, HOUSE, CLASS, STREAM, SEX, ADMNO, ACCOUNT, STATUS, STDTYPE,ACNOS FROM Student")
        StudentGrid.DataSource = Me.ExecuteQuery(cmd, "SELECT")
        StudentGrid.DataBind()
        'Required for jQuery DataTables to work.
        StudentGrid.UseAccessibleHeader = True
        StudentGrid.HeaderRow.TableSection = TableRowSection.TableHeader
    End If
End Sub
 
Private Sub StudentGrid_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles StudentGrid.RowDataBound
    If (e.Row.RowType = DataControlRowType.DataRow) Then
        Try
            Dim ddlCountries As DropDownList = CType(e.Row.FindControl("ddlSTDTYPE"), DropDownList)
            Dim cmd As New SqlCommand("SELECT DISTINCT STDTYPE FROM Student")
 
            ddlCountries.DataSource = Me.ExecuteQuery(cmd, "SELECT")
            ddlCountries.DataTextField = "STDTYPE"
            ddlCountries.DataValueField = "STDTYPE"
            ddlCountries.DataBind()
 
            'Add Default Item in the DropDownList
            ddlCountries.Items.Insert(0, New ListItem("Please select"))
 
            'Select the Country of Customer in DropDownList
            Dim country As String = CType(e.Row.FindControl("lblCategory"), Label).Text
            ddlCountries.Items.FindByValue(country).Selected = True
        Catch ex As Exception
 
        End Try
        'Find the DropDownList in the Row
        Try
            Dim ddlCountries2 As DropDownList = CType(e.Row.FindControl("ddlCLASS"), DropDownList)
            Dim cmd2 As New SqlCommand("SELECT DISTINCT CLASS FROM Classcontrol")
            ddlCountries2.DataSource = Me.ExecuteQuery(cmd2, "SELECT")
            ddlCountries2.DataTextField = "CLASS"
            ddlCountries2.DataValueField = "CLASS"
            ddlCountries2.DataBind()
 
            'Add Default Item in the DropDownList
            ddlCountries2.Items.Insert(0, New ListItem("Please select"))
            Dim country2 As String = CType(e.Row.FindControl("lblCategory2"), Label).Text
            ddlCountries2.Items.FindByValue(country2).Selected = True
 
        Catch ex As Exception
 
        End Try
 
        'Select the Country of Customer in DropDownList
        Try
            Dim ddlCountries3 As DropDownList = CType(e.Row.FindControl("ddlStream"), DropDownList)
            Dim cmd3 As New SqlCommand("SELECT DISTINCT STREAM FROM classcontrol")
 
            ddlCountries3.DataSource = Me.ExecuteQuery(cmd3, "SELECT")
            ddlCountries3.DataTextField = "STREAM"
            ddlCountries3.DataValueField = "STREAM"
            ddlCountries3.DataBind()
 
            'Add Default Item in the DropDownList
            ddlCountries3.Items.Insert(0, New ListItem("Please select"))
 
            'Select the Country of Customer in DropDownList
            Dim country3 As String = CType(e.Row.FindControl("lblCategory3"), Label).Text
            ddlCountries3.Items.FindByValue(country3).Selected = True
 
        Catch ex As Exception
 
        End Try
 
        Try
            Dim ddlCountries4 As DropDownList = CType(e.Row.FindControl("ddlSex"), DropDownList)
            Dim cmd3 As New SqlCommand("SELECT DISTINCT Sex FROM Student")
 
            ddlCountries4.DataSource = Me.ExecuteQuery(cmd3, "SELECT")
            ddlCountries4.DataTextField = "SEX"
            ddlCountries4.DataValueField = "SEX"
            ddlCountries4.DataBind()
 
            'Add Default Item in the DropDownList
            ddlCountries4.Items.Insert(0, New ListItem("Please select"))
 
            'Select the Country of Customer in DropDownList
            Dim country4 As String = CType(e.Row.FindControl("lblCategory4"), Label).Text
            ddlCountries4.Items.FindByValue(country4).Selected = True
 
        Catch ex As Exception
 
        End Try
 
    End If
End Sub
 
Private Function ExecuteQuery(ByVal cmd As SqlCommand, ByVal action As String) As DataTable
    'Dim conString As String = conString
    Using con As New SqlConnection(conString)
        cmd.Connection = con
        Select Case action
            Case "SELECT"
                Using sda As New SqlDataAdapter()
                    sda.SelectCommand = cmd
                    Using dt As New DataTable()
                        sda.Fill(dt)
                        Return dt
                    End Using
                End Using
            Case "UPDATE"
                con.Open()
                cmd.ExecuteReader()
                con.Close()
                Exit Select
        End Select
        Return Nothing
    End Using
End Function
```


html view 


```
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Search2.aspx.vb" Inherits="UNIFORMWEB2023.Search2" %>

<!DOCTYPE html>

<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>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>
                        <asp:Button ID="Button1" runat="server" Text="Submit Record" Width="156px" Height="34px" />
                    </td>
                    <td rowspan="2">&nbsp;</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">&nbsp;</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">&times;</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>
```

----------

