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

KendoUI tabstrip not showing default tab

2 Answers 301 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Pallavi
Top achievements
Rank 1
Pallavi asked on 23 Feb 2017, 04:52 AM
Hi,
I am not able to select the first tab as selected tab on page load.
I have my tab text coming from database.
if i click on any of the tab manually then i can see the data.
But the first tab as to be selected by default itself What setting am i missing here ?


               
<script type="text/javascript">
    $m = jQuery.noConflict();
    $m(document).ready(function myfunction()
    {
        $m("#tabstrip").kendoTabStrip({
            tabPosition: "left",
            dataTextField: "desc",
            dataContentUrlField: "Url",
            dataValueField: "menuOrder",
 
        }).data("kendoTabStrip").select(0);
         var dataSource = new kendo.data.DataSource(
        {
            transport:
            {
                read:
                {
                    url: "http://localhost:58030/Config/api/Feat/Get?Member=ASIA\Kiran",
                    type: "GET",
                    dataType: "json",
                    cache: false,
                    contentType: "application/json",
                    charset: "utf-8"
                }
            },
            data: {
                        name: { type: "string" },
                        desc: { type: "string" },
                        menuOrder: { type: "string" },
                        Url: { type: "string" }
                    },  
        });
         debugger;
        var tabStrip = $m("#tabstrip").data("kendoTabStrip");
        tabStrip.setDataSource(dataSource);
        tabStrip.select(0);
        //tabStrip.select(1);
    })
</script>


Thanks in advance!

2 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 24 Feb 2017, 11:16 AM
Hi Pallavi,

As you are binding the TabStrip to a remote DataSource, you will need to wait until the data has been retrieved from the remote service, before selecting a given tab. The easiest way to achieve that is to handle the TabStrip dataBound event, where you could select the desired tab:
$("#tabstrip").kendoTabStrip({
            dataTextField: "FullName",
            dataContentField: "FullName",
            dataBound: function(e) {
                e.sender.select(2);
            }
        });

Here you will find a simple implementation of the above.

Regards,
Veselin Tsvetanov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Pallavi
Top achievements
Rank 1
answered on 24 Feb 2017, 02:27 PM
Works perfect ! Thanks Again
Tags
General Discussions
Asked by
Pallavi
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Pallavi
Top achievements
Rank 1
Share this question
or