This is a migrated thread and some comments may be shown as answers.

Tabstrip in Grid Editor Template (LoadContentFrom)

5 Answers 728 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Robert Madrian asked on 05 Oct 2017, 05:41 PM

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

 

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Ianko
Telerik team
answered on 10 Oct 2017, 01:57 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Neil
Top achievements
Rank 1
answered on 27 Jan 2020, 11:48 AM

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...

 

0
Ianko
Telerik team
answered on 28 Jan 2020, 06:29 AM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Neil
Top achievements
Rank 1
answered on 28 Jan 2020, 07:52 AM

Thank you.

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

0
Renu
Top achievements
Rank 1
Iron
answered on 11 Aug 2021, 09:36 AM | edited on 11 Aug 2021, 09:47 AM
How to pass the kendo observable/jquery variable to the tabs which is using LoadContentFrom like this LoadContentFrom("Action", "Controller", new{id = <kendoObservalbleVariable>})?
Mihaela
Telerik team
commented on 13 Aug 2021, 12:50 PM

Tags
TabStrip
Asked by
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Answers by
Ianko
Telerik team
Neil
Top achievements
Rank 1
Renu
Top achievements
Rank 1
Iron
Share this question
or