KendoUI tabstrip not showing default tab

[Pallavi]

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!

[Veselin Tsvetanov]

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

[Pallavi]

Works perfect ! Thanks Again