title: kendo ui grid sort partial view
body: <p>I have a main view with 3 partial views in. One of the partial views contain a kendo grid which should be sortable.</p>
  
  <pre><code>@(Html.Kendo().Grid(Model)
      .Name("tasksgrid")
      .Sortable()
      .Filterable()
      .HtmlAttributes(new { style = "height:100%; font-size:14px;" })
      .Columns(columns =&gt;
      {
          columns.Bound(e =&gt; e.Url).Title("URL").Hidden();
          columns.Bound(e =&gt; e.Id).Title("ID").Hidden();
  
          columns.Template(@&lt;img src="@item.OperatorCreated.ImageSource" style="width:80px;height:80px;"/&gt;).ClientTemplate(" ").Width(100).Title("Picture");
          columns.Bound(e =&gt; e.Subject).Template(@&lt;div&gt;
              &lt;div style="font-size: 20px;"&gt;@item.OperatorCreated.Name&lt;/div&gt;
              &lt;div&gt;@item.Subject&lt;br /&gt;@item.Message&lt;/div&gt;
          &lt;/div&gt;).Title("Details").HtmlAttributes(new {id = "detailcolumn"});
          columns.Bound(e =&gt; e.DateTimeCreated).Title("Date").Width(100).HtmlAttributes(new { id = "datecolumn" });
      })        
      .Selectable(selectable =&gt; selectable.Mode(GridSelectionMode.Single))
          .DataSource(dataSource =&gt; dataSource
              .Server()
              .Model(model =&gt; model.Id(p =&gt; p.Id))
          )
      .Events(events =&gt; events.Change("onChange"))
      .Scrollable()
  )
  </code></pre>
  
  <p>This partial view is only rendered when a certain action in the other view is selected. Which then retrieves data to fill the grid.</p>
  
  <pre><code>function RefreshTasks(name) {
      var serviceUrl = "/Tasks/PopulateTasks?actionname=" + name;
      var request = $.post(serviceUrl);
  
      request.done(
          function (data) {
              $("#tasks").html(data);
          }
      );
  }
  </code></pre>
  
  <p>When sorting is done on the grid the following url is created
  "localhost:1772/?tasksgrid-sort=DateTimeCreated-desc&amp;tasksgrid-group=&amp;tasksgrid-filter="
  which refreshes the whole page meaning my partial view with the grid isn't there anymore.</p>
  
  <p>Is there a way to throw this url into the partial view only.</p>
  
  <p>I found a way to do exactly what I needed for this implementation.</p>
  
  <pre><code>$("#tasksgrid .k-link").click(function (e) {//call the function when column header is clicked
      var thelink = e.target.href;//get the url that would be navigated to on sort
  
      var serviceUrl = thelink;
      var request = $.post(serviceUrl);//post the url
  
      request.done(
          function (data) {
              $("#tasks").html(data);//update div
          }
      );
  
      return false;//cancels navigation
  })
  </code></pre>