Scrolling issue with dynamic tabs

10 posts, 1 answers
  1. Claudia
    Claudia avatar
    36 posts
    Member since:
    Jun 2017

    Posted 16 Apr 2018 Link to this post

    Hi

    I have a TabStrips that gets the tabs from external source (dynamic) and the scrollable property is not working for me. Here is part of the code, I will appreciate any help.

    $("#tabstrip").kendoTabStrip({
    tabPosition: "top",
    scrollable: true,
    dataTextField: "ItemId",
    dataContentUrlField: "ItemUrl",
    dataSource: dataSourceItem
    dataBound: function () {
    var tabStrip = $("#tabstrip").data("kendoTabStrip");
    tabStrip.select(0);
    },
    activate: onItemSelect,
    });

     

    Thank you!!!

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 18 Apr 2018 Link to this post

    Hi Claudia,

    For the scrollable tabs functionality to work the TabStrip's width must exceed that of its container, for example if you place the element you initialize the widget from in a container with specified width:
    <div class="container" style="width: 200px;">
      <div id="tabstrip"></div>
    </div>

    Let me know whether that works and enables tabs scrolling.

    Regards,
    Ivan Danchev
    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
    36 posts
    Member since:
    Jun 2017

    Posted 20 Apr 2018 in reply to Ivan Danchev Link to this post

    Still no working. I kind of wired because one time I opened and the scroll was there but not any more and I didn't change anything in between. I attached an image of my tabstrip
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 23 Apr 2018 Link to this post

    Hi Claudia,

    Here's a dojo example that is based on the code snippet you posted. As you can see the TabStrip is in a container with fixed width and at my end scrolling works as expected in IE, Firefox and Chrome. Please give the example a try, modify it accordingly so that the issue with the scrollable tabs functionality you are experiencing is reproduced and link it back for further review.

    Regards,
    Ivan Danchev
    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
    36 posts
    Member since:
    Jun 2017

    Posted 24 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

    Still the same I tried and no scroll for me.

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 25 Apr 2018 Link to this post

    Hi Claudia,

    If you have tried the approach shown in the dojo and it didn't work, what is the difference between your page and the one in the dojo? Could you modify the linked example or post another one that demonstrates the issue?

    Regards,
    Ivan Danchev
    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.
  7. Claudia
    Claudia avatar
    36 posts
    Member since:
    Jun 2017

    Posted 25 Apr 2018 in reply to Ivan Danchev Link to this post

    sure here is what I have

     

    <div id="tabContiner" style="width:700px">
          <div id="tabstrip"></div>
    </div>

     

    function createTabStrip() {
    $("#tabstrip").kendoTabStrip({
    tabPosition: "top",
    scrollable: true,
    dataTextField: "ItemId",
    dataContentUrlField:"ItemtId",
    dataSource: dataSourceItem,
    dataBound: function () {
    var tabStrip = $("#tabstrip").data("kendoTabStrip");
    tabStrip.select(0);
    },
    select: function (e) {
    var template = kendo.template($("#template").html());
    $(e.contentElement).html(template(this.dataSource.at($(e.item).index())));
    }
    });
    }

     

    function createItemSource() {
    dataSourceItem = new kendo.data.DataSource({
    transport: {
    read: {
    url: baseUrl + "/api/EPDApi/GetItems/",
    dataType: "json",
    type: "POST"
    },
    parameterMap: function (data, type) {
    var result = {
    provId: currProvId,
    lob: currLob,
    source: currSource,
    }
    return kendo.stringify(result);
    }
    },
    });
    }

    this is the json (dataSourceItem) I get from API:

    [
      {
        "ItemId": "1258473254363543684384357",
        "ItemName": "",
        "ItemDescrip": "",   
      },
      {
        "ItemId": "246876249665454354574354",
        "ItemName": "",
        "ItemDescrip": "",   
      },
      {
        "ItemId": "356468436574685435435",
       "ItemName": "",
        "ItemDescrip": "",   
      },
      {
        "ItemId": "7896212448975113354576",
       "ItemName": "",
        "ItemDescrip": "",   
      },
      {
         "ItemId": "96114785112221258427854",
       "ItemName": "",
        "ItemDescrip": "",   
      }
    ]

     

    //change event of a different control (listview)

    function onChange() {
    var data = dataSourceLob.view(),
    selected = $.map(this.select(), function (item) {
    currLob = data[$(item).index()].LOB;
    });
    if (itemSourceCreated === false) {
    createItemSource();
    createTabStrip();
    itemSourceCreated = true;
    }
    else
    dataSourceItem.read();
    var tabStrip = $("#tabstrip").data("kendoTabStrip");
    tabStrip.select(0);
    }

     

    that's what I have and the tabstrips shows like the attachment

    Thank you

  8. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 27 Apr 2018 Link to this post

    Hi Claudia,

    Even with the data you posted the TabStrip does trigger its scrolling functionality: see this dojo. The problem could be in the onChange handler in creating the dataSource and the TabStrip in a quick succession:
    createItemSource();
    createTabStrip();

    and since the dataSource uses remote data it takes time for the data to be loaded. Instead of creating the TabStrip after calling the createItemSource function you could try creating it in the dataSource's requestEnd event handler.

    Regards,
    Ivan Danchev
    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.
  9. Claudia
    Claudia avatar
    36 posts
    Member since:
    Jun 2017

    Posted 27 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

    It is working now I used the requestEnd event and the scroll is there

    Thank you

  10. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 01 May 2018 Link to this post

    Hi Claudia,

    I am glad initializing the TabStrip in the dataSource's requestEnd event worked out. This confirms that the issue was related to the widget being initialized while the data in its dataSource was still being loaded.

    Regards,
    Ivan Danchev
    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.
Back to Top