Question

I’m trying to create a page using ASP.NET MVC 2 which shows two things:

1. the upper half of the page should show a form
2. the lower half should show the results based on the information from the form

What I tried to do was using Ajax.BeginForm and update the lower half of the page using the UpdateTargetId. Basically, this worked. However, the results also contain a Telerik grid which is pageable. This is where the trouble starts.

The grid primarily shows up just fine, but it starts going wrong when I try to navigate through the grids pages. The plain (non-Ajax) grid, uses links. If I use this variant of the grid, I get into trouble because the links request a new page, which does not contain any information from the form and thus I get a stack of errors.

If I turn on Ajax, it doesn’t work either because that won’t work on a partial view which is retrieved via Ajax (script tags won’t work in that case). In this case, I just get a JSON result object rendered as plain text.

If I put it all on a single page, I can get it to work as well. But for some reason, the grid won’t use Ajax. On the Index-view I use the following code to render the grid:

       Html.Telerik().Grid<FoobarListItem>()
         .Name("Foobar")
         .DataBinding(dataBinding => dataBinding.Ajax().Select("_Paging", "Foobar"))
         .ToolBar(commands => commands
            .Custom()
            .HtmlAttributes(new { id = "export", onclick = onclickValue })
            .Text(Html.Alias("default", "ExportCSV"))
            .Url("#")
         )
         .Columns(columns =>
         {
             //Template column which shows an action link
             columns.Bound(o => o.Datum);
             columns.Bound(o => o.VerbruikLaag);
             columns.Bound(o => o.VerbruikNormaal);
             columns.Bound(o => o.VerbruikPiek);
         })
         .Scrollable(scrolling => scrolling.Height(200).Enabled(false))
         .Pageable()
         .Localizable("nl-NL")
         .Render();
}

But whether I put the Ajax-databinding in or not, it still renders the table in the same way. Does anyone have an idea as to where I’m going wrong?

Answer 1

It turns out the actual problem was that the required javascript files needed to be included manually. With the latest version of Telerik, this happens automatically, even for components loaded via Ajax.

I solved my problem by turning the form into a regular HTML form. The grid is loaded on the same page depending on whether the data for the table is available in the model or not. Paging works in the same way.