This is a migrated thread and some comments may be shown as answers.
Sorting in ajax-binded grid always causes post
7 Answers 73 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
M
Top achievements
Rank 1
M asked on 19 Jul 2010, 02:46 PM
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

7 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 19 Jul 2010, 03:06 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
M
Top achievements
Rank 1
answered on 20 Jul 2010, 07:34 AM
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

 

0
Atanas Korchev
Telerik team
answered on 20 Jul 2010, 07:49 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
M
Top achievements
Rank 1
answered on 20 Jul 2010, 08:41 AM
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
0
Atanas Korchev
Telerik team
answered on 20 Jul 2010, 10:23 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
M
Top achievements
Rank 1
answered on 20 Jul 2010, 02:13 PM
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
0
Atanas Korchev
Telerik team
answered on 20 Jul 2010, 02:44 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
M
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
M
Top achievements
Rank 1
Share this question
or