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

Tab strip call action each time

3 Answers 229 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
arun
Top achievements
Rank 1
arun asked on 28 Sep 2016, 02:52 PM

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

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 30 Sep 2016, 12:34 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
arun
Top achievements
Rank 1
answered on 30 Sep 2016, 06:28 PM

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

0
Ivan Danchev
Telerik team
answered on 04 Oct 2016, 08:37 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
TabStrip
Asked by
arun
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
arun
Top achievements
Rank 1
Share this question
or