Ajax Grid within Tabstrip

[spootnic datageneral]

Hi,
I have a Tabstrip within another Tabstrip,that call PartialViews with Telerik Grids. But it seems like the Grids unable to Call the Ajax-ActionResults within the Tabstrip and renders empty grid. When i only call the Url for the Grid it work perfect.
MY Code for the Tabstrip is:

@( Html.Telerik().TabStrip()
       .Name("TabStrip")
        .Effects(fx => fx.Expand()
                        .Opacity()
                        .OpenDuration(200)
                        .CloseDuration(300))
       .HtmlAttributes(new { @Style = "width:800px;" })
       .SelectedIndex(0)
       .Items(parent => {
           parent.Add()
               .Text("Statistic")
               .ImageUrl("~/Content/Images/Icons/euro.png")
               .Content(
                Html.Telerik().TabStrip()
                       .Name("TabStrip2")
                       .Effects(fx => fx.Expand()
                                        .Opacity()
                                        .OpenDuration(200)
                                        .CloseDuration(300))
                       .SelectedIndex(0)
                       .Items(item => {
                           item.Add()
                               .Text("Monatsstatistik")
                               .LoadContentFrom("MonthlySalesStatistics", "Statistic").Selected(true);
                            item.Add()
                                .Text("Tagesstatistik")
                                .LoadContentFrom("DailyCustomerStatistics", "Statistic");
                            })
                      .ToHtmlString()
               );
)

 and the Code for the PartialView with grid is:

@(Html.Telerik().Grid<DeimosCore.DTO.DtoMonthlyStatistics>()
        .Name("TelerikGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.Month).Title("Monat");
            columns.Bound(o => o.Year).Title("Jahr");
            columns.Bound(o => o.TotalRevenue).Title("Umsatz in EUR");
            columns.Bound(o => o.TotalOrderCount).Title("Anzahl der Bestellungen").HtmlAttributes(new { @Style = "text-align:center;"});
            columns.Bound(o => o.AverageOrderValue).Title("Ø Bestellwert");
            columns.Bound(o => o.AveragePositionCount).Title("Ø Anzahl an Positionen");

        })
        .DetailView(detailView => detailView.ClientTemplate(


            Html.Telerik().Grid<DeimosCore.DTO.DtoCustomerMonthlyStatistics>()
                    .Name("Kunde_<#= Month #>_<#= Year #>")
                    .Columns(columns => {
                        columns.Bound(k => k.CustomerName).Title("Kunde").Width(105);
                        columns.Bound(k => k.CustomerRevenue).Title("Umsatz in EUR");
                        columns.Bound(k => k.CustomerOrderCount).Title("Anzahl der Bestellungen").HtmlAttributes(new { @Style = "text-align:center;" });
                        columns.Bound(k => k.CustomerAverageOrderValue).Title("Ø Bestellwert");
                        columns.Bound(k => k.CustomerAveragePositionCount).Title("Ø Anzahl an Positionen");
                    })
            .DataBinding(dataBinding =>
                dataBinding.Ajax()
                .Select("_MonthlyCustomerStatistics", "Statistic", new { month = "<#= Month #>", year = "<#= Year #>" }))
            .Pageable(paging => paging.PageSize(5))
            .Sortable()
            .ToHtmlString()

        ))
        .DataBinding(dataBinding =>
            dataBinding.Ajax()
            .Select("_MonthlySalesStatistics", "Statistic")
        )
        .RowAction(row =>
        {
            if (row.Index == 0)
            {
                row.DetailRow.Expanded = true;
            }
        })
    )

And wenn i Debug my Project i get a JQuery issue for Tabstrip.

Anyone can Help?

Thanks.
Spootnic

[Oliver]

Hi,
I have the same Problem, and i tried to register manualy all the js-files that my controls uses with:

@(Html.Telerik().ScriptRegistrar()
        .Globalization(true)
        .jQuery(false)
        .DefaultGroup(group => group
            .Add("telerik.common.min.js")
            .Add("telerik.grid.min.js")
            .Add("telerik.textbox.min.js")
            .Add("telerik.grid.filtering.min.js")
            .Add("telerik.grid.grouping.min.js")
            .Add("telerik.grid.editing.min.js")
            .Add("telerik.draganddrop.min.js")
            .Add("telerik.tabstrip.min.js")
            .Add("telerik.splitter.min.js")
            .Add("telerik.combobox.min.js")
            )
      )

but that not works.
Anyone an idea how to fix this issue?

Thanks.

[Atanas Korchev]

Hello Oliver,

 You can check this code library project for a working implementation.

Regards,
Atanas Korchev
the Telerik team

[Oliver]

Hi Atanas,
Thank You for your reply, but that solution don´t work in my project, because i call the JQuery.js in my "Layout.cshtml"

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

 and this cause the issue.
but i need the JQuery.js for other things, i can´t just remove this call.

thanks.

[Atanas Korchev]

Hello Oliver,

 Then stop the automatic including of jQuery:

<%= Html.Telerik().ScriptRegistrar().jQuery(false) %>

Regards,
Atanas Korchev
the Telerik team

[Oliver]

Hi,
I tried it but i get a JQuery issue in jquery-1.5.1.js:

// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709).
head.insertBefore( script, head.firstChild );
...

:-(

[Atanas Korchev]

Hi Oliver,

 I am not sure what you mean. Is there a chance to send us a sample project?

Kind regards,
Atanas Korchev
the Telerik team

[Oliver]

Hi,
Here is a Demo-Version of what  i am going to do.

Thanks.

[Atanas Korchev]

Hello Oliver, 

There were a couple of issues with the test project:

1. There was no controller called Statistic hence the Month tab failed to load
2. The  JavaScript files required by the grid were not registered.

I have rectified both problems and you can find the updated project attached.

Regards,
Atanas Korchev
the Telerik team

[Oliver]

Hello atanas,

thanks for the reply, but i get the same JQuery-issue when i click the "Article"-Tab.

[Atanas Korchev]

Hi Oliver,

There were two problems:

1. Both grids have the same name. This renders to duplicate HTML id attributes which is not supported. You need to make the grid names unique.
2. All action methods which render partial view should use the PartialView() method instead of View().

Find attached the modified project.

Regards, Atanas Korchev
the Telerik team

[Oliver]

Hi Atanas,

hat works only if i don´t use any JQuery-Code inline (for example ClientEvents OnDataBinding ... etc.).
If i use any JavaScript-Code in my PartialView (View), i get the same JQuery-Error :

Laufzeitfehler in Microsoft JScript: 'CatalogChange' ist undefiniert
even if i stop the automatic including of jQuery with:
@(Html.Telerik().ScriptRegistrar().jQuery(false))

[Atanas Korchev]

Hello Oliver,

 Try defining your JavaScript functions before the component declaration. It seems that jQuery evaluates the JavaScript files after rendering the HTML.

Regards,
Atanas Korchev
the Telerik team

[Tomas]

Hi, i have a grid for User data. I defined a custom Edit form called (UserViewModel.cshtml) to edit the User like this.

@model Sigma.Models.User.UserViewModel
@{
    ViewBag.Title = "Registro de Usuario";
    ViewBag.IdUser = Model.Id;

    Html.Telerik().TabStrip()
        .Name("UserTabStrip")
        .Items(parent =>
        {
            parent.Add()
                .Text("Datos Generales")
                .Content(@Html.Partial("UserGralInfo", Model).ToHtmlString());
            parent.Add()
                .Text("Roles y Niveles")
                .Content(@Html.Partial("RolLevelInfo", Model).ToHtmlString());
        })
        .SelectedIndex(0)
        .Render();
}

My Partial view RolLevelInfo its define like this:
@model Sigma.Models.User.UserViewModel
@Html.Label("Seleccione Niveles Organizacionales 1")
    @{ 
        Html.Telerik().Grid(Model.LevelsOrg1)
        .Name("LevelOrg1List")
        .DataKeys(keys => keys.Add(c => c.Id))
        .ToolBar(toolbar => toolbar.Template("."))
        .Columns(columns =>
        {
            columns.Bound(o => o.Id)
                .ClientTemplate("<input type='checkbox' name='checkedLevelOrg1' value='<#= Id #>' <#= Selected ? checked='checked' : '' #>/>").Title("").Width(36).HtmlAttributes(new { style = "text-align:center" })
                .HeaderTemplate(
                    @<text>
                    <input type="checkbox" title="check all records" id="checkAllRecordsOrg1" />
                    </text>
                ).Width(50).HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(o => o.Name).ClientTemplate("<span title='<#= Name #>'><#= Name #></span>");
        })
        .DataBinding(dataBinding => dataBinding.Ajax()
            .Select("LevelsOrg1Ajax", "Account", new { idUser = idUsr }))
        .Scrollable(s => s.Height("200px"))
        .Footer(false)
        .Render();  
    }

My problem its that i cant get the User Id being modified. How can i get the user Id to pass LevelsOrg1Ajax method.

Thks.