Select first tab having external datasource

5 posts, 0 answers
  1. Claudia
    Claudia avatar
    33 posts
    Member since:
    Jun 2017

    Posted 19 Mar 2018 Link to this post

    Hi

    I have issue selecting first tab, I read  in https://www.telerik.com/forums/can-t-programmatically-select-a-tab#8GpHjbXuJkyTYw-siBriCw that the issue can be because of the external dataSource. I use the example from http://demos.kendoui.com/web/tabstrip/images.html to create my json. here is part of my code. Any idea?

    var dataSource = new kendo.data.DataSource({
    transport: {
    read: {
    url: "/api/GetTabs/",
    dataType: "json",
    type: "POST"
    },
    parameterMap: function (data, type) {
    var result = {
    val1: $("#val1").val(),
    val2: $("#val2").val(),
    }
    return kendo.stringify(result);
    }
    },
    });

    $("#tabstrip").kendoTabStrip({               
    dataTextField: "resId",
    dataContentUrlField: "resName",
    dataSource: dataSource
                    
                });

     

    function SelecTab() {    
    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabStrip.select(1);
    }

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 21 Mar 2018 Link to this post

    Hello Claudia,

    Here you will find a Dojo sample based on the snippets sent. You will notice, that upon a button click the Tab on index 1 (the second Tab) gets properly selected.

    May I ask you to modify the above, so it reproduces the issue observed at your end and send it back to us? This way we will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance for this case.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Claudia
    Claudia avatar
    33 posts
    Member since:
    Jun 2017

    Posted 21 Mar 2018 in reply to Veselin Tsvetanov Link to this post

    Hi

    Thank you for your answer. I need to call SelectTab function in dataBound of a listview. Once I load all the item in my listview I select the first and I need to show in the tabstrip all the subitems related and show the content of the first one.

    $("#listview").kendoListView({
    dataSource: dataSourceItem,
    selectable: "single",
    dataBound: onDataBound,
    change: onLobChange,
    template: kendo.template($("#template").html())
    });

     

    function onDataBound() {
    var listView = $("#listview").data("kendoListView");
    listView.select(listView.element.children().first());

    SelecTab()
    }

     

    This shows the list of tabs but do not select the first one. Maye is related with the event or something else but I don't have a button here. Can you please help me?

    Thank you

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 22 Mar 2018 Link to this post

    Hi Claudia,

    In the described case, at the time when the DataBound event of the ListView fires, the TabStrip may not be available yet, or it may not be bound yet to its DataSource. Therefore, selecting the tab at this stage may not be possible.

    In order to overcome this issue, I would suggest you to watch for the DataBound events of both widgets and perform the select after both of them are fired. Here you will find a simple Dojo implementing such scenario.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Claudia
    Claudia avatar
    33 posts
    Member since:
    Jun 2017

    Posted 22 Mar 2018 in reply to Veselin Tsvetanov Link to this post

    Hi

    Thank you!! yes that was the issue, now is working fine  I appreciate your help

Back to Top