Tab strip call action each time

4 posts, 0 answers
  1. arun
    arun avatar
    2 posts
    Member since:
    Aug 2014

    Posted 28 Sep Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 30 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. arun
    arun avatar
    2 posts
    Member since:
    Aug 2014

    Posted 30 Sep in reply to Ivan Danchev Link to this post

    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

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 04 Oct Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready