title: Show progress bar until the webgrid completely loads and pagging to next or previous pages in the webgrid in MVC
body: <p>I am trying to show a progress bar until my grid fully loads, I seen various method they work based on a button click but i am unable to come up with a method to show a progress bar until my grid completely load and when i navigate to other pages in a webgrid . And this is the first time i am working with webgrid and i am not aware of its events to trigger the method to display the image on to the page.</p>
  
  <p>I want to show this div on the page until my webgrid is completely load or changed</p>
  
  <pre><code>@&lt;div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none"&gt;
              &lt;p style="position: absolute; top: 30%; left: 45%; color: White;"&gt;
                  Loading, please wait...&lt;img src="../../Content/themes/base/images/ajax-loading.gif"&gt;
              &lt;/p&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This my code to display a webgrid</p>
  
  <pre><code>  @Using Html.BeginForm()
              @&lt;div&gt;            
                  @Code
              Dim grid = New WebGrid(Nothing, ajaxUpdateContainerId:="gridContent")
              Dim pageSize As Integer = ViewBag.PageSize
              If pageSize = 0 Then
                  grid.Bind(ViewBag.GridData, autoSortAndPage:=True)
              Else
                  grid.Bind(ViewBag.GridData, , rowCount:=pageSize, autoSortAndPage:=False)
              End If
                      @&lt;div id="gridContent"&gt;
                          @grid.GetHtml(tableStyle:="gridView",
                            headerStyle:="gridViewheader",
                            alternatingRowStyle:="alternateItemStyle",
                           columns:=grid.Columns(grid.Column("emp_NO", "emp Number", canSort:=True),
                                                 grid.Column("emp_TYPE_CODE", "emp Type Code" canSort:=False),                          
                                                 grid.Column("emp_NAME", "emp Name", canSort:=False),
                                                 grid.Column("ADDRESS", "Address", canSort:=False),                    
  
                      &lt;/div&gt;          
                  End code
              &lt;/div&gt;
          End Using
  </code></pre>