Tab strip call action each time

[arun]

Hi ,

Want the call the action each time I click the tab , Below is my code its not working , Please help

 

 

@(Html.Kendo().TabStrip()
              .Name("Information")
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Tab 1")
                  .Selected(true).Content(@<text> @Html.Action("one", "Home")</text>);

                  tabstrip.Add().Text("Tab 2 ")
               .Content(@<text> @Html.Action("two", "Home")</text>);                 

              })
             .Events(e => e.Select("reloadTab"))
           
              )

<script type="text/javascript">
        function reloadTab(e) {
            //clear the current content of the tab before it's displayed to force the tabStrip to load it
            var ts = $("#Information").data().kendoTabStrip;
            ts.tabGroup.on('click', 'li', function (e) {
                ts.reload($(this));
            });
        }
</script>

 

 

Arun

[Ivan Danchev]

Hello Arun,

If you want to hit the action on Tab selection instead of using the Content method you have to use the LoadContentFrom method:

.Items(tabstrip =>
{
    tabstrip.Add().Text("Tab 1")
    .Selected(true).LoadContentFrom("one", "Home");


    tabstrip.Add().Text("Tab 2 ").LoadContentFrom("two", "Home");

})

Regards,
Ivan Danchev
Telerik by Progress

 

 

[arun]

Hi Ivan,

Thank for reply ,

But I have grid in partial view. If i use "LoadContentFrom" Grid data is not populating .

 

Below is the content of partial view

@(Html.Kendo().Grid<GridCustomPopupTemplate.Models.Person>().Name("persons")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(m => m.PersonID))
            .Read(read => read.Action("GetPersons", "Home"))
            .Update(up => up.Action("UpdatePerson", "Home"))
            .Create(up => up.Action("InsertPerson", "Home"))
    )

    .Columns(columns =>
    {
        columns.Bound(c => c.PersonID).Width(200);
        columns.Bound(c => c.Name);
        columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(180);
    })
    .Pageable()
    .Sortable()
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person"))
   .ToolBar(toolbar =>
  {
      toolbar.Create();
      toolbar.Custom().Text("Click me").Action("UpdatePerson", "Home");
  })
    )

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());
    function showDetails(e) {
       
        e.preventDefault();                
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var id =dataItem.Name; 
        $.ajax({
            url: '@Url.Action("SetPerson", "Home")',
            type: "Post",
            data: { userId: id},
            dataType: 'json',
            success: function (result) {
              $("#persons").data("kendoGrid").dataSource.read();
            }
        });
    }
</script>

 

Regards

Arun A

[Ivan Danchev]

Hello Arun,

In that case since the Grid requires POST requests in order to function when using ajax, you could keep using the  Content method: .Content(@<text> @Html.Action("one", "Home")</text>); but make POST ajax requests in the TabStrip's Select event handler:

function onSelect(e) {

    if (e.item.textContent == "Tab 1") {

        $.ajax({

            type: "POST",

            url: '@Url.Action("one", "Home")',

            contentType: "application/json; charset=utf-8",

            dataType: "json"

        });

    }
...


}

Regards,
Ivan Danchev
Telerik by Progress