How to pass data to the Tab Content from the kendo observable

1 Answer 529 Views
TabStrip
Renu
Top achievements
Rank 1
Iron
Renu asked on 11 Aug 2021, 09:45 AM
I wanted to pass the variable value as querystring to the LoadContentFrom of the tabstrips

@(Html.Kendo().TabStrip()
        .Name("employee-details")
        .Items(tab =>
            {
                 tab.Add().LoadContentFrom("Index","Employee", new {id: ${employeeID} }).Text("BioData)
            }
         )
)


<script>
var mvvm = kendo.observable({
       employeeID: 1234
});
</script>



How to achieve this?

1 Answer, 1 is accepted

Sort by
0
Mihaela
Telerik team
answered on 13 Aug 2021, 12:46 PM

Hi Renu,

Since a JavaScript variable could not be accessed in the HtmlHelper, I would suggest the following solution:

  • Subscribe to the "select" event of the TabStrip;
  • Get the selected tab;
  • Send an AJAX request to the server and pass the JavaScript variable.

 

@(Html.Kendo().TabStrip()
    .Name("employee-details")
    .Items(tab =>
    {
        tab.Add().Text("BioData");
    })
    .Events(ev => ev.Select("onSelect"))
)

<script>
    var emplID = 0; //a global variable
    $(document).ready(function () {
        var mvvm = kendo.observable({
            employeeID: 1234
        });
        emplID = mvvm.get("employeeID"); //get the value of the ObservableObject field
    });

    function onSelect(e) {
        if (e.item.textContent == "BioData") { //check if the tab "BioData" is selected
            $.ajax({
                type: "POST",
                url: '@Url.Action("Index", "Employee")',
                data: { ID: emplID }, //the value of "emplID" will be received as "ID" in the Action Method
                success: function(result) {...}, //load the content returned from the Controller
                error: function (e) {...}
            });
        }
    }
</script>

 

Hopefully, this example will be helpful to your case.

 

Regards, Mihaela Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Renu
Top achievements
Rank 1
Iron
commented on 14 Aug 2021, 07:22 AM

Thanks this solution worked
Tags
TabStrip
Asked by
Renu
Top achievements
Rank 1
Iron
Answers by
Mihaela
Telerik team
Share this question
or