Sorting in ajax-binded grid always causes post

[M]

Hi,

I have a page with a partial view with user data and an list of tabs (<li>-list, no telerik tabstrip) with personal data, function data etc. The partial view is loaded with jquery; each tab consist of a partial that has a Telerik grid present. The grids are databound with ajax. I have a question:

When I sort one of the columns in the grid on a tab, the grid does a post which refreshes the whole page, including the partial with user data. I don't want that to happen. Can I prevent the grid from behaving that way?

Regards,
Marcel

[Atanas Korchev]

Hi M,

This can occur if the JavaScript files of the grid are not loaded. Check this help topic to verify this is not the case. If you still experience problem I suggest you paste here your master page, view and partial.

Regards,
Atanas Korchev
the Telerik team

[M]

Hi Atanas,
I checked this; as far as I know this is not the case. Is a post the default behaviour?

FYI: The 2 partials are serviced by 2 different controllers!

Master:

<%

@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

 

<%

@ Import Namespace="Maassen.Core.Services.UI.Helpers" %>

 

<%

@ Import Namespace="MvcContrib" %>

 

<%

@ Import Namespace="MaassenNet.Models" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<%

PaginaInfo paginaInfo = ViewData.Get<PaginaInfo>(); %>

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head runat="server">

 

 

<title></title>

 

<%

= HeaderHelper.Stylesheet(this.Html, "reset.css") %>

 

<%

= HeaderHelper.StylesheetArea(this.Html, "EnBeheer", "portfolio", "style.css") %>

 

<%

= HeaderHelper.StylesheetArea(this.Html, "EnBeheer", "portfolio", "jScrollPane.css") %>

 

<% Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add(

"~/Design/_default/css/telerik.common.css")

 

.Add(

"~/design/_default/css/telerik.sitefinity.css")

 

.Compress(

true)

 

)

.Render();

%>

<%

= HeaderHelper.StylesheetArea(this.Html, "EnBeheer", "portfolio", "default.css") %>

 

<%

= HeaderHelper.StylesheetArea(this.Html, "portfolio", "default.css") %>

 

 

<%

= HeaderHelper.ScriptInclude(this.Html, "~/Scripts/jquery-1.4.2.min.js")%>

 

<%

= HeaderHelper.ScriptInclude(this.Html, "~/Scripts/jquery.mousewheel.js")%>

 

<%

= HeaderHelper.ScriptInclude(this.Html, "~/Scripts/jquery.em.js")%>

 

<%

= HeaderHelper.ScriptInclude(this.Html, "~/Scripts/jScrollPane-1.2.3.min.js")%>

 

 

<%

= HeaderHelper.ScriptInclude(this.Html, "ui.core.min.js")%>

 

<%

= HeaderHelper.ScriptInclude(this.Html, "ui.datepicker.min.js")%>

 

<%

= HeaderHelper.ScriptInclude(this.Html, "ui.datepicker-nl.min.js")%>

 

<%

= HeaderHelper.ScriptInclude(this.Html, "ui.dialog.min.js")%>

 

<%

= HeaderHelper.ScriptIncludeArea(this.Html, "EnBeheer", "_default", "enbeheer.js")%>

 

 

 

<script type="text/javascript" charset="utf-8">

 

$(

function() {

 

$(

'.content').jScrollPane({ scrollbarWidth: 5 });

 

});

 

</script>

 

</

 

head>

 

<

 

body>

 

 

<div class="container right">

 

 

<!-- vast onderdeel name -->

 

 

<div id="TitlePortfolio">

 

 

</div>

 

 

 

<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

 

 

</div>

 

 

<%

= Html.Telerik().ScriptRegistrar()

 

.DefaultGroup(group => group

.Add(

"telerik.common.min.js")

 

.Add(

"telerik.grid.min.js")

 

.Add(

"telerik.grid.filtering.min.js")

 

.Add(

"telerik.tabstrip.min.js")

 

.Add(

"telerik.treeview.min.js")

 

)

.jQuery(

false)

 

.Globalization(

true)

 

%>

</

 

body>

 

</

 

html>

View1:

 

<%

@ Page Title="" Language="C#" MasterPageFile="../Shared/PortfolioInsite.Master" Inherits="System.Web.Mvc.ViewPage" %>

 

<%

@ Import Namespace="MaassenNet.Helpers" %>

 

 

 

<

 

asp:Content ID="Inhoud" ContentPlaceHolderID="MainContent" runat="server">

 

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

function LaadTab(tab, actie) {

 

 

var idx = 1;

 

$(

'#headernivo1 ul li a').each(function() {

 

 

if (idx == tab) {

 

$(

this).addClass('selected').find('span').addClass('selected');

 

iTab = idx;

 

 

 

 

if (actie != null) {

 

 

 

 

LaadPartialViewMetAjax(

"#guidecard", animatie, actie);

 

}

}

 

else {

 

$(

this).removeClass('selected').find('span').removeClass('selected');

 

}

idx++;

});

}

$(document).ready(

function() {

 

 

 

 

 

var personalDataActie = '<%= Url.Action("Details", "Persoon", new { persoonId = ViewData["PersoonId"] }) %>' + '&metfoto=true&master=insite';

 

LaadPartialViewMetAjax(

"#PersonalData", animatie, personalDataActie);

 

 

 

 

LaadTab(1);

});

 

</script>

 

 

 

 

 

<div id="PersonalData"></div>

 

 

 

<div id="Tabblad">

 

 

 

 

 

 

 

 

<div id="headernivo1" class="navigation"><%Html.RenderPartial("_MijnPortfolioNavigationTabs");%></div>

 

 

<div id="guidecard">

 

 

 

 

 

</div>

 

 

 

 

 

</div>

 

 

 

 

 

 

 

</

 

asp:Content>

Partial1:

 

<%

@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Maassen.Modules.EnPortfolio.Models.Forms.PersoonForm>" %>

 

<%

@ Import Namespace="Maassen.Core.Services.Localization" %>

 

<%

@ Import Namespace="Maassen.Core.Services.UI.Helpers" %>

 

<%

@ Import Namespace="MaassenNet.Helpers" %>

 

<%

var persoon = (Maassen.Modules.EnPortfolio.Models.Forms.PersoonForm)ViewData.Model; %>

 

 

 

<

 

span class="photo"><%= AvatarHelper.AvatarCommunity(Html, ViewData["Persoonid"], string.Empty, 60)%></span>

 

<

 

ul class="DataLeft">

 

 

 

 

 

<li><span><%= Html.LabelFor(m => m.PersonenAchterNaam)%></span><%= Html.Encode(NaamHelper.FormateerNaam(persoon.PersonenVoorNaam, persoon.PersonenTussenvoegsel, persoon.PersonenAchterNaam)) %></li>

 

 

 

 

 

<li><span><%= Html.LabelFor(m => m.PersonenGeboorteDatum)%></span><%= persoon.PersonenGeboorteDatum %></li>

 

 

 

 

 

<li><span><%= Html.LabelFor(m => m.EnAfdelingenOmschrijving)%></span><%= persoon.EnAfdelingenOmschrijving + " " + persoon.EnAfdelingenAfdelingNummer%></li>

 

</

 

ul>

 

<

 

ul class="DataRight">

 

 

 

 

 

<li><span><%= Html.LabelFor(m => m.ManagerAchterNaam)%></span><%= NaamHelper.FormateerNaam(persoon.ManagerVoorNaam, persoon.ManagerTussenvoegsel, persoon.ManagerAchterNaam)%></li>

 

 

 

 

 

<li><span><%= Html.LabelFor(m => m.HRMAchterNaam)%></span><%= NaamHelper.FormateerNaam(persoon.HRMVoorNaam, persoon.HRMTussenvoegsel, persoon.HRMAchterNaam)%></li>

 

 

 

 

 

<li><span><%= Html.LabelFor(m => m.EnKostenplaatsenOmschrijving)%></span><%= persoon.EnKostenplaatsenOmschrijving + " " + persoon.EnKostenplaatsenNummer%></li>

 

</

 

ul>

 

 

 

Partial2:

 

<%

@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Maassen.Modules.EnPortfolio.Models.Forms.DossierForm[]>" %>

 

<%

@ Import Namespace="Maassen.Core.Services.Localization" %>

 

<%

@ Import Namespace="Maassen.Core.Services.UI.Helpers" %>

 

<%

@ Import Namespace="MaassenNet.Helpers" %>

 

 

 

 

<div id="headernav" class="navigationsub"></div>

 

 

 

 

 

 

<div id="headerlist"></div>

 

 

 

 

 

 

<div id="listportfolio">

 

 

 

 

 

<div id="content" class="content">

 

 

 

 

<% Html.Telerik()

.Grid(Model)

.Name(

"en-por-dos-ovz")

 

.Columns(columns =>

{

columns.Bound(o => o.Dossierid).Visible(

false);

 

columns.Bound(o => o.Code)

.Title(

Localization.AreaVertaling(Html, "KennisCode"))

 

.HtmlAttributes(

new { @class = "en-por-dos-ovz-code" })

 

.HeaderHtmlAttributes(

new { @id = "en-por-dos-ovz-code-kop" })

 

;

columns.Bound(o => o.Naam)

.Title(

Localization.AreaVertaling(Html, "KennisOmschrijving"))

 

.HtmlAttributes(

new { @class = "en-por-dos-ovz-naam" })

 

.HeaderHtmlAttributes(

new { @id = "en-por-dos-ovz-naam-kop" })

 

;

columns.Bound(o => o.Status)

.Title(

Localization.AreaVertaling(Html, "DossierStatusOmschrijving"))

 

.HtmlAttributes(

new { @class = "en-por-dos-ovz-statusoms" })

 

.HeaderHtmlAttributes(

new { @id = "en-por-dos-ovz-statusoms-kop" })

 

;

columns.Bound(o => o.StatusDatum)

.Title(

Localization.AreaVertaling(Html, "DossierStatusDatum"))

 

.HtmlAttributes(

new { @class = "en-por-dos-statusdatum-code" })

 

.HeaderHtmlAttributes(

new { @id = "en-por-dos-ovz-statusdatum-kop" })

 

;

columns.Bound(o => o.Resultaat)

.Title(

Localization.AreaVertaling(Html, "DossierResultaatOmschrijving"))

 

.HtmlAttributes(

new { @class = "en-por-dos-ovz-resultaatoms" })

 

.HeaderHtmlAttributes(

new { @id = "en-por-dos-ovz-resultaatoms-kop" })

 

;

columns.Bound(o => o.ResultaatDatum)

.Title(

Localization.AreaVertaling(Html, "DossierResultaatDatum"))

 

.HtmlAttributes(

new { @class = "en-por-dos-resultaatdatum-code" })

 

.HeaderHtmlAttributes(

new { @id = "en-por-dos-ovz-resultaatdatum-kop" })

 

;

})

 

.DataBinding(dataBinding => dataBinding.Ajax().Select("OverzichtAjax", "Dossier", new { master = "insite" }))

 

 

 

 

.Sortable(sort => sort.SortMode(GridSortMode.SingleColumn))

.PrefixUrlParameters(

false)

 

.EnableCustomBinding(

true)

 

.Footer(

false)

 

.Render();

%>

 

</div>

 

 

 

 

 

</div>

 

 

 

 

 

 

<div id="footerlist"></div>

Regards,
Marcel

 

[Atanas Korchev]

Hello M,

The grid will post if either there is a JavaScript error (due to JavaScript file which is not included) or the grid is configured for server binding. Make sure all the required files are included prior to loading the grid. If this does not help I would ask you to provide a sample running project which demonstrates your problem. Since the forum does not allow attachments you can use a public file hosting site such as dropbox.com or skydrive.live.com.

Regards,
Atanas Korchev
the Telerik team

[M]

Hi Atanas,

How can you specifically configure the grid for server binding? Isn't this the default behaviour?
If the required files are included in the master, doesn't that mean that they are loaded prior to the grid?

Cheers,
Marcel

[Atanas Korchev]

Hi M,

This is the default behavior indeed and you don't need to configure it for server binding. However if you are loading the grid with ajax the grid must be ajax bound too. Otherwise after paging/sorting it would render the page in its initial state (before the content is loaded with ajax).

By the way did you check this help topic? It shows how to load a component with ajax.

All the best,
Atanas Korchev
the Telerik team

[M]

Hi Atanas,

Yes, I saw the article and tried to get things working that way, but I didn't succeed. When I load the grid-part with jQuery and client-side binding nothing happens (the div isn't updated with the gridresuls), so probably some (javascript) error occurs somewhere (that I can't find). I only got client-side binding working when I used RenderPartial in the view. I'm puzzled. Is there an example in the mentioned setup (2 partials loaded with jquery, grid on 1 partial) available somewhere?

Regards,
Marcel

[Atanas Korchev]

Hi M,

No we don't have such an example. The closest thing we have is the client checkboxes online example.

If you need further assistance send us a sample project. Instructions can be found in a previous post.

Regards,
Atanas Korchev
the Telerik team