TabStrip only loading the first tab

[n/a]

Hi

I'm trying to setup TabStrip and its only show the first tab which i set .Selected(true) to , here is my code :

<div class="demo-section k-content">
    @(Html.Kendo().TabStrip()
    .Name("tabstripname")
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Bank Account")
                    .Selected(true)
                     .LoadContentFrom("Bank", "People", new { personid = ViewData["personid"] });

        tabstrip.Add().Text("Address")
                     .LoadContentFrom("Address", "People", new { personid = ViewData["personid"] });

        tabstrip.Add().Text("ContactNumber")
                     .LoadContentFrom("ContactNumber", "People", new { personid = ViewData["personid"] });

        tabstrip.Add().Text("Email Address")
                     .LoadContentFrom("Email", "People", new { personid = ViewData["personid"] });
    })
    )
</div>

 

example of controller code :

public PartialViewResult Commercial()
{
      return PartialView();
}

[n/a]

in addition here is an example of one of my views :

@(Html.Kendo().Grid<Models.BankView>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.bankname).Width(120);
        columns.Bound(p => p.branchcode).Width(120);
        columns.Bound(p => p.accountnumber).Width(120);
        columns.Command(command => { command.Destroy(); command.Edit(); }).Width(100);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        // toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .AutoBind(false)
    .Scrollable(scr => scr.Height(800))
    .Reorderable(reorderable => reorderable.Columns(true))
    .DataSource(dataSource => dataSource
        .Custom()
        .PageSize(20)
        .Events(events => events
        .Sync("sync_handler"))
        .Schema(schema =>
        {
            schema.Model(m =>
            {
                m.Id(p => p.banckaccountid);
                m.Field(p => p.accounttype).DefaultValue(ViewData["defaultType"] as AdorReactUI.Models.TypeView);

            });
            schema.Data("Data");
        })
        .Transport(transport =>
        {

            transport.Read(read =>
            read.Url(Base.APIHostAddress + "/api/bankaccount/getbankdetails?personid=" + ViewData["personid"])
            .DataType("json")

            .Type(HttpVerbs.Get)
            );
            transport.ParameterMap("parameterMap");
        })
    )
)

[Ivan Danchev]

Hello Adam,

A parameter is sent to the respective action on selecting a tab:

.LoadContentFrom("Bank", "People", new { personid = ViewData["personid"] });

Therefore the action should be declared so that it accepts a parameter:

public ActionResult Bank(string personid)
{
//...
}

If there is no such action this would be indicated by a 404 (Not Found) exception in the browser's console.

You can find a sample runnable project attached to this reply, in which the TabStrip is configured similarly to the code snipped you posted in your first post. In one of the partial views there is a Grid, in the others only an h4 element. All partial views are loaded as expected on selecting the respective tab.

Regards,
Ivan Danchev
Progress Telerik

[n/a]

hey Danchev

Thanks for the reply, i have resolved the problem, all my grids in all the tabs had the same name, somehow that why it wasn't working 

[n/a]

another issue how can i reload the grid when i click on the tab name?

[Ivan Danchev]

Hello Adam,

You can reload the Grid by calling its dataSource's read method and the Grid's refresh method in the TabStrip's ContentLoad event handler:

Attach a ContentLoad handler to the TabStrip:

.Events(ev => ev.ContentLoad("onContentLoad"))

in the handler get a reference to the Grid and call the two mentioned methods:

<script>
    function onContentLoad(e) {
        $('#grid').data('kendoGrid').dataSource.read();
        $('#grid').data('kendoGrid').refresh();
    }
</script>

This logic will be executed for every clicked tab, so if you want to reload the grid only when a specific tab is selected, you can add a condition in the event handler that will check the selected tab. It is available from the event data - e.item

Regards,
Ivan Danchev
Progress Telerik