Kendo UI Grid column sorting refreshes entire page - kendo-ui

Question

I have a page that contains two tabs. Tab one contains Kendo bar charts. Tab 2 contains a kendo grid for search results and two tabs that contain 1 kendo grid each for detail information. The "Change" event of the search results grid makes an ajax call to update the 2 details grids with details of the item selected. I want the 2 details grids to be sortable. But when I click on a column to sort the data, the entire page refreshes and takes me back to the first tab that contains the kendo bar charts. The search results grid is sortable and works as expected. It doesn't refresh the entire page when I click on a column to sort by. So, how do i allow the 2 details grids to resort without refreshing the page?
NOTE: I have also noticed, when the screen refreshes due to sorting, my controller action isn't being called. So, its refreshing the screen but not actually re-executing my controller code - not sure if that helps or not.
HTML that gets replaced by AJAX call:
<div id="groupDetails">
<div class="panel-body">
<ul class="nav nav-tabs" id="detailsTabs">
<li class="active">Diagnosis</li>
<li>Procedure</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-diagnosis" />
<div class="tab-pane" id="tab-procedure" />
</div>
</div>
</div>
Search Results Grid:
$("#searchResults").kendoGrid({
dataSource: { data: mdl,},
selectable: true,
sortable: true,
pageable: false,
change: function(e) {
var itm = this.dataSource.view()[this.select().index()];
$.ajax({
type: "GET",
url: "#Url.Action("GroupDetails", "Analytics")",
data: {idx: itm.Idx, name: itm.Name},
success: function (r) {
groupDetails.html('');
groupDetails.html(r);
}
});
}
});
AJAX result:
<div class="panel-body">
<ul class="nav nav-tabs" id="myTab2">
<li class="active">Diagnosis</li>
<li>Procedure</li>
</ul>
<div class="tab-content">
<h1>Service Line: #Model.Name</h1>
<div class="tab-pane active" id="tab-diagnosis">
#Html.Kendo().Grid(Model.DiagnosisDetailsResults).Name("DiagDetailsResults").Columns(
column =>
{
column.Bound(c => c.Name).Title("Description");
column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
}).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Server().Model(model => model.Id(item => item.Idx)))
</div>
<div class="tab-pane" id="tab-procedure">
#Html.Kendo().Grid(Model.ProcedureDetailsResults).Name("ProcedureDetailsResults").Columns(
column =>
{
column.Bound(c => c.Name).Title("Description");
column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
}).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Server().Model(model => model.Id(item => item.Idx)))
</div>
</div>
</div>

Answer 1

That happens because your details grids are both server binding grids, so of course when you try to sort the grid, a request will be sent to the server and the page will be refreshed. You need to change the data source to Ajax if you don't want the sort to refresh the page.
<div class="tab-pane active" id="tab-diagnosis">
#Html.Kendo().Grid(Model.DiagnosisDetailsResults).Name("DiagDetailsResults").Columns(
column =>
{
column.Bound(c => c.Name).Title("Description");
column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
}).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(item => item.Idx)))
</div>
<div class="tab-pane" id="tab-procedure">
#Html.Kendo().Grid(Model.ProcedureDetailsResults).Name("ProcedureDetailsResults").Columns(
column =>
{
column.Bound(c => c.Name).Title("Description");
column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
}).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(item => item.Idx)))
</div>
By the way, why are you using Razor for the details grids, but not for the main one? Be consistent.