telerik grid and ajax [closed]

This question is unlikely to help any f开发者_开发百科uture visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

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?

---

Check this help topic. Ajax.BeginForm does not execute JavaScript which is returned in the ajax response by default and you need some jQuery code to make it work. The help topic shows the required code. Most probably this is not required with the new unobtrusive ajax framework introduced with ASP.NET MVC 3.

---

Telerik Grid Client Side Events

Has examples of what you are trying to achieve. It's the OnRowselect Event. You can handle that event and access all of the grid information, then make a jquery call to retieve the bottom half of your view.

---

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.