asp.net display gridview in modal bootstrap

Question

Bootstrap modal won't show gridview, i have no idea why? it won't firing the gridview did i need to put update panel for this to do the update? i have try through some solution but seen didn't work well.

Here my code aspx:

     <div id="Group" class="modal fade" role="dialog">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"  ></button>
                            <h4 class="modal-title"></h4>
                          </div>
                           <div class="modal-body">
     <asp:GridView runat="server" ID="grdiview" AutoGenerateColumns="false">
                              <Columns>
                                  <asp:TemplateField>
                                      <ItemTemplate>
                                          <asp:CheckBox ID="gvMODALCHECK" runat="server" />
                                      </ItemTemplate>
                                  </asp:TemplateField>
                      <asp:BoundField HeaderText="text1" DataField="GROUP" />
                      <asp:BoundField HeaderText="text2" DataField="NME" />
                              </Columns>
                              </asp:GridView>
                       < /div>
                < /div>
          < /div>
    < /div>
 < /div>

code behind for gridview check through here has no problem:

protected void gridview_GETGROUP()
        {
            try
            {
                string sqlCONSTR = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
                String sqlQUERY = "SELECT GROUP,NME FROM GROUP_MEMBER";
                SqlConnection sqlCONN = new SqlConnection(sqlCONSTR);
                SqlCommand sqlCMD = new SqlCommand(sqlQUERY, sqlCONN);
                SqlDataAdapter sqlADAP = new SqlDataAdapter(sqlCMD);
                DataTable dt = new DataTable();
                sqlADAP.Fill(dt);
                sqlCONN.Open();
                sqlCONN.Close();
                gridview.DataSource = dt;
                gridview.DataBind();

            }
            catch (Exception ex)
            {
                ClientScript.RegisterStartupScript(this.GetType(), "alert", Please Contact IT STAFF!!!')", true);
            }
        }

Answer 1

Bootstrap Modals are triggered and shown by a jQuery function (v3 and v4 alpha) or also by a tag attribute (v4 beta). You are using Bootstrap 3, but I am including the v4 version any for future readers.

Bootstrap 3 (v3.3.7) and Bootstrap 4 up to v4 Alpha 6

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

https://getbootstrap.com/docs/3.3/javascript/#modals

Bootstrap 4 Beta (v4-beta-2)

The jQuery variant:

$('#myModal').modal(options)

The data- tag attribute way:

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

https://getbootstrap.com/docs/4.0/components/modal/#usage

Answer 2

Your case can have 2 scenarios:

1- Click

if you want to call the modal by click, the step is as follows:

<a href="#" class="btn btn-info" data-toggle="modal" data-target="#myModal">To Details...</a>

<!-- Modal popup -->
<div id="myModal" 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">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    ... gridview here...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

2- onload

Now if you want to call onload event you need to follow the steps:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        if ("<%=IsPostBack%>" == "False") {
            $("#myModal").modal('show');
        }
});

    <div id="myModal" class="modal fade">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

            <h4 class="modal-title">Title of modal</h4><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">

...put the gridview here...

        </div>
    </div>
</div>