ASP.NET MVC Grid - second page doesn't get properly rendered, instead JSON is displayed

[Marc]

I'm evaluation the Telerik ASP.NET MVC UI components and I'm trying to come to grips with the KendoUI Grid for ASP.NET MVC 3. The initial setup works fine, the first page of data is being displayed just fine....

but when I try to go to the second page, my defined function for the Ajax paging does get called just fine, but instead of the page and the grid with the second set of data, I'm seeing a huge blob of JSON data on my screen......

Must have missed something really basic - but I can't seem to find *WHAT* ! The docs aren't really helping - it seems I'm doing everything as prescribed - but it just doesn't work..... no error message or exception or anything - just throws a blob of JSON at me instead of *rendering* it!

Any ideas? What am I missing?

[Jayesh Goyani]

Hello,

Please provide your code.

Thanks,
Jayesh Goyani

[Marc]

Razor markup:

@using Kendo.Mvc.UI

@model VbcMvc.Models.ViewModels.AuswertungSearchResults

<!-- Common Kendo UI Web CSS -->

<link href="@Url.Content("~/Content/styles/kendo.common.min.css")" rel="stylesheet" />

<!-- Default Kendo UI Web theme CSS -->

<link href="@Url.Content("~/Content/styles/kendo.default.min.css")" rel="stylesheet" />

<!-- jQuery JavaScript -->

<script src="@Url.Content("~/Content/js/jquery.min.js")"></script>

<!-- Kendo UI Web combined JavaScript -->

<script src="@Url.Content("~/Content/js/kendo.web.min.js")"></script>


<div class="row onecol max-width">

    @(

        Html.Kendo().Grid(Model.Suchresultate)

            .Name("grid")

            .DataSource(ds => ds.Ajax().Read(r => r.Action("GetGridData", "Auswertung")))

            .Columns(c =>

                {

                    c.Bound(m => m.KundeFi).Width(50);

                    c.Bound(m => m.KundeName).Width(125);

                    c.Bound(m => m.KundeSkeyAndSkeyName).Width(150);

                    c.Bound(m => m.AdsTotal).Width(50);

                    c.Bound(m => m.AdsComplete).Width(50);

                    c.Bound(m => m.AdsUnknown).Width(50);

                })

            .Pageable()

            .Sortable()

     )

</div>

"AuswertungSearchResults" view model:

public class AuswertungSearchResults
{
    public string ChosenAuswertungNach { get; set; }
    public string ChosenAusgabeformat { get; set; }
    public string Kundenbetreuer { get; set; }
    public string OrgEinheiten { get; set; }

    public string FirmenName { get; set; }
    public string FI_SKEY { get; set; }

    public List<KundeAggregatedStandorte> Suchresultate { get; set; }
    public int AnzahlResultate { get; set; }

    public AuswertungSearchResults() {
        Suchresultate = new List<KundeAggregatedStandorte>();
    }

"Auswertung" controller - Ajax "callback" method:

public ActionResult GetGridData(DataSourceRequest request) {
            KundenSucheParameter suchParameter = new KundenSucheParameter { AnalysisBy = KundenSucheParameter.AnalysisType.Skey, FirmenIndexSkey = 1000183713 };
            var kunden = _useCase.GetKundenQueryable(suchParameter);
            DataSourceResult dsResult = kunden.ToDataSourceResult(request);

            return Json(dsResult, JsonRequestBehavior.AllowGet);
        }

[Marc]

Sorry, this must have been a side effect between three competing MVC UI frameworks. Once I sorted them out and had only the Telerik controls in my MVC project, everything works just fine.