title: Grid.Mvc.Ajax extension grid initialization
body: <p>Hi I'm very new to Web GUI dev using JQuery &amp; Ajax and I'm trying to get the nuget package Grid.MVC.Ajax working. The readme states the following:</p>
  
  <pre><code>Follow thse steps to use Grid.Mvc.Ajax
  
  1. Include ~/Scripts/gridmvc-ext.js after your ~/Scripts/grimvc.js include.
  
  2. Include ~/Content/ladda-bootstrap/ladda-themeless.min.css CSS after your Bootstrap CSS/LESS include.
  
  3. Include Ladda-bootstrap Javascript via the ~/Scripts/ladda-bootstrap/ladda.min.js
   and ~/Scripts/ladda-bootstrap/spin.min.js.
  
  4. Create a view model for you grid data, for example:
  public Person
  {
     public string FirstName { get; set; }
     public string LastName { get; set; }
  }
  
  5. Add a Razor partial view for your grid data that uses an AjaxGrid&lt;T&gt; as the model type, 
  Where T is your view model type:
  
  @using GridMvc.Html
  @using GridMvc.Sorting
  @model Grid.Mvc.Ajax.GridExtensions.AjaxGrid&lt;Models.Person&gt;
  
  @Html.Grid(Model).Columns(columns =&gt;
      {
        columns.Add(c =&gt; c.FirstName);
        columns.Add(c =&gt; c.LastName);
      }).Sortable(true).WithPaging(10)
  
  6. Add a controller action to retrieve the data for the first page of data that includes the Ajax pager HTML:
  
   public JsonResult Persons()
          {
              var vm = new List&lt;Person&gt;()
              {
                  new Person() { FirstName = "John", LastName = "Doe" }
              }
              .AsQueryable();
              var ajaxGridFactory = new Grid.Mvc.Ajax.GridExtensions.AjaxGridFactory();
              var grid = ajaxGridFactory.CreateAjaxGrid(vm, 1, false);
          }
  
  7. Add a controller action to retrieve data for paged items that returns a JsonResult without the Ajax page HTML:
  
   public JsonResult PersonsPaged(int page)
          {
              var vm = new List&lt;Person&gt;()
              {
                  new Person() { FirstName = "John", LastName = "Doe" }
              }
              .AsQueryable();
              var ajaxGridFactory = new Grid.Mvc.Ajax.GridExtensions.AjaxGridFactory();
              var grid = ajaxGridFactory.CreateAjaxGrid(vm, page, true);
          }
  
  8. Call the ajaxify Grid.Mvc.Ajax JavaScript plug-in method setting the non-paged and paged controller actions and optionally a form
  to apply additional filtering to the grid. All input and select elements in the given form will be passed into your paged and non-paged controller actions:
  
   $(".grid-mvc").gridmvc().ajaxify({
                  getPagedData: '/Home/Persons',
                  getData : '/Home/PersonsPaged',
                  gridFilterForm: $("#gridFilters")
              });
  </code></pre>
  
  <p>I have set things up as stated but I'm having problems in step 8. as I'm not sure how to call the JavaScript code in order to populate the grid. I have enclosed the above in a $(document).ready call but that doesn't seem to work :-( Any help would be much appreciated. Thanks</p>