title: Grid.Mvc.Ajax - Pagination, sorting and Action Link Issues
body: <p>After about four days I finally managed to get the grid to play with other controls on the same page...</p>
  
  <p>If I leave out a script it will sort, but paging doesn't work and with the script neither work. Every which way I try to get the Action Link to post back to the controller will not work, so any suggestions will certainly help me retain some sanity :-)</p>
  
  <p>Models</p>
  
  <pre><code>Imports Grid.Mvc.Ajax.GridExtensions
  
  
  Public Class GridData
  
  Public Property Staff_ID As Integer
  Public Property Current_Date As Date
  Public Property Grid() As AjaxGrid(Of GridDataRows)
  
  Public Property FilterableGrid() As AjaxGrid(Of GridDataRows)
  
  Public Property GridFilter() As GridFilter
  
  Public Sub New()
      GridFilter = New GridFilter
  End Sub
  
  End Class
  </code></pre>
  
  <p>..................................................</p>
  
  <pre><code>Public Class GridDataRows
  Public Property FirstName() As String
  Public Property LastName() As String
  
  Public Property Timesheet_ID() As Integer
  
  Public Property Category_ID() As Integer
  
  Public Property Type_ID() As Integer
  
  Public Property TimeSheet_Hours() As String
  
  Public Property Category_Name() As String
  
  Public Property Type_Name() As String
  
  Public Property Timesheet_Comments() As String
  
  End Class
  </code></pre>
  
  <p>Partial</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@Imports GridMvc.Html
  @Imports GridMvc.Sorting
  
  @*@ModelType Grid.Mvc.Ajax.GridExtensions.AjaxGrid(Of GridData)*@
  @ModelType GridData
  
  
  @Code
      Layout = Nothing
  End Code
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;link href="~/Content/Gridmvc.css" rel="stylesheet" /&gt;
      &lt;link href="~/Content/ladda-bootstrap/ladda-themeless.min.css" rel="stylesheet" /&gt;
      &lt;script src="~/Scripts/URI.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/gridmvc.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/gridmvc-ext.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/gridmvc.customwidgets.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/ladda-bootstrap/ladda.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/ladda-bootstrap/spin.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
  
      @*@Html.Grid(Model.Grid).AutoGenerateColumns.Sortable(True).WithPaging(10).Named("TSGrid")*@
  
          @Html.Grid(Model.Grid).Named("TSGrid").Columns(Function(vCols)
                                                             vCols.Add(Function(x) x.Timesheet_ID).Titled("ID").SetWidth(10).Encoded(False).Sanitized(False).SortInitialDirection(GridSortDirection.Descending)
                                                             vCols.Add(Function(x) x.Category_Name).Titled("Property").SetWidth(10).Encoded(False).Sanitized(False)
                                                             vCols.Add(Function(x) x.Type_Name).Titled("Job Type").SetWidth(10).Encoded(False).Sanitized(False)
                                                             vCols.Add(Function(x) x.TimeSheet_Hours).Titled("Hours").SetWidth(10).Encoded(False).Sanitized(False)
                                                             vCols.Add(Function(x) x.Timesheet_Comments).Titled("Comments").SetWidth(100).Encoded(False).Sanitized(False)
                                                             'vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit", "EditTimesheet", "Calendar", New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected(2);"})).SetWidth(30)
                                                             vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit x", Nothing, Nothing, New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected();"})).SetWidth(30)
                                                         End Function).WithPaging(10).Sortable(True)
          
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  ​</code></pre>
  </div>
  </div>
  </p>
  
  <p>View</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@ModelType GridData
  
  @*@ModelType MaintenanceWeb.MainModels*@
  
  @*@Imports GridMvc.html
  @Imports Gridmvc.Sorting*@
  
  @Code
      ViewData("Title") = "Calendar"
  End Code
  
  &lt;style&gt;
      td[data-name="TimeSheet_Hours"] {
          text-align: right;
          margin-right: 25px;
      }
  &lt;/style&gt;
  
  &lt;div style="height: 25px;"&gt;&lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 style="text-align: center" id="calendarHeader"&gt;&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Select the date you wish to work with&lt;/h2&gt;
  
  &lt;div&gt;
      &lt;div class="panel-body"&gt;
          @Using (Ajax.BeginForm(Nothing, "Calendar/DateChanged", Nothing, New AjaxOptions With {.HttpMethod = "POST"}, New With {.id = "SelectDateForm"}))
              @&lt;div&gt;
          &lt;div class="form-group"&gt;
              &lt;div id="datepicker" onchange="onChangeCalender();"&gt;&lt;/div&gt;
              
              @Html.TextBoxFor(Function(x) Model.Current_Date, "{0:MM/dd/yyyy}", New With {.id = "inputMaintDate", .class = "form-control", .type = "date"})
  
          &lt;/div&gt;
                   
  
  
          &lt;/div&gt;
  
          End Using
  
  
  
      &lt;/div&gt;
  
      @*@Html.Partial("_DataGrid", New Grid.Mvc.Ajax.GridExtensions.AjaxGrid(IQueryable(Of DateGridModels)), 10, False)*@
  
      @*@Html.RenderPartial("_DataGrid", Model.Item3)*@ 
  
  @Using (Ajax.BeginForm(Nothing, "Calendar/EditTimesheet", Nothing, New AjaxOptions With {.HttpMethod = "POST"}, New With {.id = "GridForm"}))
  
         @&lt;div&gt;
              &lt;div id="gridFilters"&gt;
                  &lt;input type="text" name="date"&gt;
                  &lt;input type="text" name="search"&gt;
                  
              &lt;/div&gt;
              &lt;div Class="form-group"&gt;
                  &lt;Button id="LoginButton" Class="btn btn-primary" type="submit"&gt;&lt;span Class="glyphicon glyphicon-save"&gt;&lt;/span&gt; Save&lt;/Button&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  @code
      Html.RenderPartial("_DataGrid", Model)
  End Code
  
  
  
      End Using
      
  
  
     
  
      
  
      
     
  
      @*@Html.Partial("_DataGrid", Model.Item3)*@
     
     
     
      
  
     &lt;/div&gt;​</code></pre>
  </div>
  </div>
  </p>
  
  <p>Grid script</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function () {
          var ajaxUrl = '/Calendar/GridPaged';
  
          pageGrids.TSGrid.ajaxify({
              updateGridAction: ajaxUrl,
              getPagedData: ajaxUrl,
             getData: ajaxUrl
            //  gridFilterForm: $("#gridFilters")
          });
         pageGrids.TSGrid.refreshFullGrid();
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Grid item selected script</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function gridRowSelected() {
          jQuery.ajax({
              url: '@Url.Action("EditTimesheet", "Calendar")',
              type: 'POST',
              data: $('#GridForm').serialize(),
              success: function (response) {
              }
          });
      }
       ​</code></pre>
  </div>
  </div>
  </p>
  
  <p>Controller</p>
  
  <pre><code>  Function Index() As ActionResult
          Try
              Dim vData = ReturnData2()
              Dim vGrid = CType(New AjaxGridFactory().CreateAjaxGrid(vData, 1, False), AjaxGrid(Of GridDataRows))
              Return View(New GridData() With {.Grid = vGrid})
          Catch ex As Exception
              EmailError(ex)
              Return SystemError()
          End Try
  
      End Function
  </code></pre>
  
  <p>..................</p>
  
  <pre><code> &lt;HttpGet()&gt;
      Function GridPaged(vPage As Integer) As ActionResult
          Try
              Dim vData = ReturnData2()
              Dim vGrid = CType(New AjaxGridFactory().CreateAjaxGrid(vData, vPage, True), AjaxGrid(Of GridDataRows))
  
              Return View(New GridData() With {.Grid = vGrid})
  
          Catch ex As Exception
              EmailError(ex)
              Return Nothing
          End Try
      End Function
  </code></pre>
  
  <p>..........</p>
  
  <pre><code>Private Function ReturnData2() As IQueryable(Of GridDataRows)
          Try
              Dim vList As New List(Of GridDataRows)()
              Using vService As New Service1Client
                  strSQL = "SELECT Maintenance_Timesheets.Timesheet_ID, "
                  strSQL += "Maintenance_Timesheets.Timesheet_Hours, "
                  strSQL += "Maintenance_Timesheets.Timesheet_Comments,  "
                  strSQL += "Maintenance_Categories.Category_Name, "
                  strSQL += "Maintenance_Types.Type_Name "
                  strSQL += "FROM Maintenance_Timesheets "
                  strSQL += "JOIN Maintenance_Categories ON Maintenance_Categories.Category_ID = Maintenance_Timesheets.Category_ID "
                  strSQL += "JOIN Maintenance_Types ON Maintenance_Types.Type_ID = Maintenance_Timesheets.Type_ID "
                  strSQL += "WHERE Staff_ID = 5"
                  Using DS As DataSet = vService.ReturnDataSetHAS(strSQL)
                      For Each Row As DataRow In DS.Tables(0).Rows
                          vList.Add(New GridDataRows() With {.Timesheet_ID = Row("Timesheet_ID"), .Category_Name = ReturnText(Row("Category_Name")), .Type_Name = ReturnText(Row("Type_Name")), .TimeSheet_Hours = Format(Row("Timesheet_Hours"), "##0.00"), .Timesheet_Comments = ReturnText(Row("Timesheet_Comments"))})
                      Next
                  End Using
              End Using
              Return vList.AsQueryable
          Catch ex As Exception
              EmailError(ex)
              Return Nothing
          End Try
      End Function
  </code></pre>
  
  <p>===================== EDIT UPDATE ========================</p>
  
  <p>Changing the script to :-</p>
  
  <pre><code>&lt;script&gt;
  function gridRowSelected(SelectItem) {
      jQuery.ajax({
          url: '@Url.Action("EditTimesheet", "Calendar")',
          type: 'POST',
          data: { vID: SelectItem },
          success: function (response) {
          }
      });
      //alert(SelectItem)
  }
  </code></pre>
  
  <p></p>
  
  <p>and the grid line to </p>
  
  <pre><code>vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit x", Nothing, Nothing, New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected(" &amp; d.Timesheet_ID &amp; ");"})).SetWidth(30)
  </code></pre>
  
  <p>and the controller to </p>
  
  <pre><code>&lt;HttpPost()&gt;
      Function EditTimesheet(vID As Integer) As ActionResult
          Try
              Return ModalValidation(vID)
          Catch ex As Exception
              EmailError(ex)
              Return SystemError()
          End Try
      End Function
  </code></pre>
  
  <p>It now sends the correct id back to the controller. If I set an alert in the script the Modal pops up with the correct ID, but then closes after the alert is closed. Without the alert you cannot even tell that the modal was raised. I suspect the grid refreshes and causes the modal to close. Getting a little closer... Still have the paging issue though </p>
  
  <p>=====================EDIT UPDATE 2 ===================================</p>
  
  <p>Adding return false prevented the grid from posting back and now everything works apart from paging and sorting</p>
  
  <pre><code>vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit x", Nothing, Nothing, New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected(" &amp; d.Timesheet_ID &amp; ");return false;"})).SetWidth(30)
  </code></pre>