bootstrap modal popup after loading popup from codebehind

Question

i want to show gridview in bootstrap modal popup on button click but until gridview not getting bind i just want to show loading panel and for that what i am doing is.. i am calling loading popup as from button click as below.

<asp:Button ID="btnSearch" runat="server" CausesValidation="true" Text="Search" CssClass="btn btn-info pull-right"
                                        OnClientClick="waitingDialog.show();" ValidationGroup="MinMax" OnClick="btnSearch_Click" />

Meanwhile In codebehind i am calling Button OnClick And There After GridView bind I am Doing below process.

System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append(@"<script type='text/javascript'>");
        sb.Append("$('#myModal').modal('show');"); 
        sb.Append("waitingDialog.hide();");
        sb.Append(@"</script>");
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MinMax Data Report", sb.ToString(), false);

But The Problem is My GridView Is Very Big But When the popup with gridview getting Load It Not Showing horizontal and Vertical Scrollbar. In other word popup just load without scrollbar. And If I remove loading Panel and Calling direct That PopUp then It Working Fine. i am just not getting anything.

i want loading panel because my gridview takes nearly 32 seconds to load. below is my gridview modal body.

  <div class="modal-body" style="width=97%; overflow: auto;">
                <div class="tabel-responsive">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <asp:Panel ID="panel2" runat="server" ScrollBars="Auto" Width="100%" Height="100%"
                                HorizontalAlign="Center">
                                <asp:GridView ID="gvMeterData" runat="server" RowStyle-Wrap="false" CssClass="table table-striped"
                                    GridLines="Both" OnRowDataBound="gvMeterData_RowDataBound" HeaderStyle-HorizontalAlign="Center">
                                </asp:GridView>
                            </asp:Panel>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="gvMeterData" EventName="RowDataBound" />
                            <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
            </div>

My Loading Popup is as below.

var waitingDialog = waitingDialog || (function ($) {
'use strict';

// Creating modal dialog's DOM
var $dialog = $(
    '<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:auto;">' +
    '<div class="modal-dialog modal-sm">' +
    '<div class="modal-content">' +
        '<div class="modal-header"><h3 style="margin:0;"></h3></div>' +
        '<div class="modal-body">' +
            '<div class="progress progress-striped active" style="margin-bottom:0;"><div class="progress-bar" style="width: 100%"></div></div>' +
        '</div>' +
    '</div></div></div>');

return {
    /**
    * Opens our dialog
    * @param message Custom message
    * @param options Custom options:
    *                 options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m";
    *                 options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning".
    */
    show: function (message, options) {
        // Assigning defaults
        if (typeof options === 'undefined') {
            options = {};
        }
        if (typeof message === 'undefined') {
            message = 'Loading';
        }
        var settings = $.extend({
            dialogSize: 'm',
            progressType: '',
            onHide: null // This callback runs after the dialog was hidden
        }, options);

        // Configuring dialog
        $dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize);
        $dialog.find('.progress-bar').attr('class', 'progress-bar');
        if (settings.progressType) {
            $dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
        }
        $dialog.find('h3').text(message);
        // Adding callbacks
        if (typeof settings.onHide === 'function') {
            $dialog.off('hidden.bs.modal').on('hidden.bs.modal', function (e) {
                settings.onHide.call($dialog);
            });
        }
        // Opening dialog
        $dialog.modal();
    },
    /**
    * Closes dialog
    */
    hide: function () {
        $dialog.modal('hide');
    }
};})(jQuery);

Edited: I think there might be problem with update panel. isn't that? but without update panel also i can not tracking the error. and again when i look in inspect element in browser than there also no error in console such as missing .js or anything.

Thanks In Advance.

Answer 1

I could not figure out that where should be the mistake in my code as above and i can not use AJAX for this because it is not supported in Yocto OS as i have to make this code run in there. so at last i have make changes in my solution as below and i found the way to show loading..

There Are 2 ways i found.. 1 is in this link.. Loading In Popup..

Another Way Is I kept Timer And Load 'Loading Image' In Start of page and Stop That Loading Image when my gridview bind fully by disabling timer. That Logic is as below.

.aspx Page..

<asp:Timer ID="Timer1" runat="server" OnTick="TimerTick" Interval="6000">
            </asp:Timer><asp:Image ID="imgLoader" runat="server" ImageUrl="~/loading7.gif" />

.CS page

protected void TimerTick(object sender, EventArgs e)
{
    this.fillGrid();
    Timer1.Enabled = false;
    imgLoader.Visible = false;
}

This Works Good. But Still I am Waiting For Answer of My Actual Question. That Why Scroll Goes Out or Not Working.