This is a migrated thread and some comments may be shown as answers.
TabStrip only loading the first tab
5 Answers 71 Views
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 31 Aug 2018, 02:21 PM

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();
}

5 Answers, 1 is accepted

Sort by
0
n/a
Top achievements
Rank 1
answered on 31 Aug 2018, 02:26 PM

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");
        })
    )
)
0
Ivan Danchev
Telerik team
answered on 04 Sep 2018, 01:00 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
n/a
Top achievements
Rank 1
answered on 05 Sep 2018, 01:28 PM

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 

0
n/a
Top achievements
Rank 1
answered on 05 Sep 2018, 01:29 PM
another issue how can i reload the grid when i click on the tab name?
0
Ivan Danchev
Telerik team
answered on 06 Sep 2018, 12:44 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
n/a
Top achievements
Rank 1
Answers by
n/a
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or