[Solved] Grid nested in a Tab loaded on Ajax - Problem

[Andrew]

Hi All,
I've seen some similar posts to this but nothing that has helped me much to figure out where I'm going wrong.  So I'm sorry if this covers old ground but I'm struggling to sort this...

I have a set of tabs that load grids via Load 

Index.aspx (Main View)

Html.Telerik().TabStrip()
    .Name("SectionTabs")
    .SelectedIndex(0)
    .Effects(fx =>fx.Opacity().CloseDuration(500).OpenDuration(500))
    .Items(tabs =>
               {
                   tabs.Add()
                       .Text("Contacts")
                       .LoadContentFrom("ViewContacts", "Customer",
                                        new { customerKey = ViewData["CustomerKey"] });

                   tabs.Add()
                       .Text("Sales")
                       .Content(() =>
                                    {
                                    %>
                                    <%: Html.Action("PartialSalesGrid", "Customer", new { customerKey = ViewData["CustomerKey"] })%>
                               <%});
               }).Render();

If I do the Html.Action and load a partial my grid works but if I use the Load Content From method it doesn't.

What I get is the grid showing correctly but the Paging/filters etc fail.  I tried mannually loading the javascript files in the Scriptregistrar 
as shown here : http://bit.ly/dgf26l

Which helped but when I Do this the paging works (fires a POST request and returns JSON) but the dat ais not bound to the grid and the grid refreshes with blank lines.

I can see by viewing source in the browser that the difference is when using ajax I'm missing the Jquey("Gid") binding details that are in the CDATA stuff.. When I do this with a standard partial this is populated for me.  Any Help in getting this working would be appreciated.  I don't want to use partial as some of the sales can be 1000's of lines long so I don't want to have to pre-populate these as It makes the page really slow to load.

[Atanas Korchev]

Hi Andrew,

Could you provide a sample project showing the problem? Manually including the javascript files should have sufficed. 

Regards,
Atanas Korchev
the Telerik team

[Andrew]

Thanks for the quick reply I'll try and do a sample project as the project I'm working on is to big to post the code ;(

[Atanas Korchev]

Hello Andrew,

I have attached a sample project which I hope would help you get started.

Telerik UI components loaded from partial view and ajax  (either via custom code or TabStrip, Panelbar etc) need their required JavaScript files to be manually included in the view.

In the sample application the tabstrip is defined in the main view (Index.aspx):

<%= Html.Telerik().TabStrip()
        .Name("TabStrip")
        .SelectedIndex(0)
        .Items(tabs =>
           {
               tabs.Add()
                   .Text("Grid")
                   .LoadContentFrom("Grid", "Home");
           })
%>
<% Html.Telerik().ScriptRegistrar().DefaultGroup(g =>
       g.Add("telerik.common.js")
        .Add("telerik.grid.js"));
%>

There is also a scriptregistrar which is different from the one in Site.master. Its sole responsibility is to register the minimum JavaScript files of the grid which is loaded by the tabstrip via ajax. The user control is the bare minimum required for ajax binding (Grid.ascx):

<%= Html.Telerik().Grid<GridInTabStrip.Models.Customer>()
        .Name("Grid")
        .Sortable()
        .DataBinding(dataBinding => dataBinding.Ajax()
            .Select("_Select", "Home"))
 %>

I hope this helps,
Atanas Korchev
the Telerik team

[Andrew]

Thanks for all the help Atanas.  It appears that i'd missed the reaizeing js file for the grid when calling the script registrar D'oh.  Works a treat now ;)