Tabstrip in Grid Editor Template (LoadContentFrom)

[Robert Madrian]

Hello,

I use a Tabstrip in a Grid Editor Template and want to load the the Content with LoadContentFrom and Parameters like:

tab.Add().Text("Profile (0)").LoadContentFrom("GetPartialView_frmMitgliedaktprofileEdit", "Mitgliedakt", new { mitgliedid = Model.Mitglied_ID, aktid = Model.Akt_ID });

The Problem to have aTabstrip in the grid template is that I cannot access the model values:
new { mitgliedid = Model.Mitglied_ID, aktid = Model.Akt_ID }

How can I load the Content of a tab with Parameters on the Client (reload?) or how to pass the two Parameters for loading if the tab is klicked
(I think it must be on the Client with javascript)

robert

 

 

[Ianko]

Hello Robert,

As the template rendered is processed on the client when using AJAX binding with the grid, the model binding does not work. 

You should rather use Kendo Template syntax and call the toClientTemplate method of the Kendo().TabStrip() in order to get that working. 

@(Html.Kendo().TabStrip().Name("tabstrip")
    .Items(tab => {
        tab.Add().Text("Profile (0)")
        .LoadContentFrom("GetPartialView_frmMitgliedaktprofileEdit", "Mitgliedakt", new { mitgliedid = "#: Mitglied_ID #", aktid = "#: Akt_ID #" });
    })
    ).ToClientTemplate()
)

Regards,
Ianko
Progress Telerik

[Neil]

Seems fairly simple.. I have the same issue, but using javascript/jquery. I want to render an action method and pass viewmodel parameter. This should be done in javascript...

 

[Ianko]

Hello Neil,

With JS logic, you should use the contentUrls option and pass the parameter as query string to the url. Or use the more advanced use of the jQuery.ajax options and setup the data field. 

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Ajax Tab</li>
    </ul>
    <div>Content 1</div>
    <div></div>
</div>

<script>
    $("#tabstrip").kendoTabStrip({
        contentUrls: [
            null,
            {
                url: "https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html",
                data: { name: "John", location: "Boston" }
            }
        ]
    });
</script>

 

Regards,
Ianko
Progress Telerik

[Neil]

Thank you.

I managed a workaround for my issue. But, surely, this would be helpful in the future.

[Renu]

How to pass the kendo observable/jquery variable to the tabs which is using LoadContentFrom like this LoadContentFrom("Action", "Controller", new{id = <kendoObservalbleVariable>})?

[Mihaela]

Check out the provided solution in the forum thread below:

https://www.telerik.com/forums/how-to-pass-data-to-the-tab-content-from-the-kendo-observable