Multiselect inside tabstrip

4 posts, 0 answers
  1. Jurica
    Jurica avatar
    9 posts
    Member since:
    Nov 2013

    Posted 24 May 2014 Link to this post

    Hello,

    I have following situation:

    Tabstrip

     @(Html.Kendo()
     .TabStrip()
     .Name("tabstripSvojta")
     .Events(events => events.ContentLoad("onTabContentLoad").Select("onTabSelect").Activate("onTabActivated"))
     .Items(tabstrip =>
     {
     tabstrip.Add()
     .Text("Sistematika")
     .Selected(true)                     
     .LoadContentFrom(Url.Content("/Catalog/Sistematika/Index/" + @Model));
     
      tabstrip.Add()
     .Text("Populacije")
     .LoadContentFrom("/Catalog/PopulacijaSvojte/PopulacijaSvojtePartial/" + @Model); 
     })
    )

    Inside every tabstrip content I have a few multiselect widgets.

    The point is that I want a pager widget in bottom of multiselect widget. I do it like this:
     
     var multiselect = $('#' + '@multiName').data("kendoMultiSelect");
     
     var pager = $("#" + '@pagerID').kendoPager({
                dataSource: multiselect.dataSource,
                pageSize: 10,
                info: false,
                previousNext: false,
                buttonCount: 3,
                change: function (e) {

                }
            }).data("kendoPager");

    $("#" + '@pagerID').appendTo($('#' + multiselect.element[0].id + '-list'));

    It is working correctly and looks like this.


    Image 

    Whenever a tabstrip item is clicked I refresh the content like this:

    var ts = $("#tabstripSvojta").kendoTabStrip().data("kendoTabStrip");
    ts.tabGroup.bind('click', 'li', function (e) {                   
    ts.reload(ts.select());
    });

    At this point I realised the problem. Every time content of tabstrip item is refreshed(reloaded), multiselect widgets from previous content (inside tabstrip content element) are not completely removed from the DOM. I am talking about animation part of multiselect widget.

    I am talking about
    <div class="k-animation-container" .... >
    <div class="k-list-container k-popup k-group k-reset" id="pre_IdOznakePopulacijePravilnik-list"...></div>
    </div>

    that the widget is creating on the end of body.

    When the tabstrip item content is reloaded I get previous X 2. So:

    <div class="k-animation-container" .... >
    <div class="k-list-container k-popup k-group k-reset" id="pre_IdOznakePopulacijePravilnik-list"...></div>
    </div>
    <div class="k-animation-container" .... >
    <div class="k-list-container k-popup k-group k-reset" id="pre_IdOznakePopulacijePravilnik-list"...></div>
    </div>

    You can see now what is my problem? I get two element (of more, depending on how many reloads) with the same id. And when the JavaScript line ($("#" + '@pagerID').appendTo($('#' + multiselect.element[0].id + '-list'));) kicks in it kicks in on wrong element/position - on the position of the old animation element.

    I figured that I could solve the problem with the change of javascript on reloading tabstrip content like this:

     var ts = $("#tabstripSvojta").kendoTabStrip().data("kendoTabStrip");
                ts.tabGroup.bind('click', 'li', function (e) {

    //I am finding all multiselect widgets from the old content
                    $(ts.contentElement(ts.select().index())).find('select').each(function () {
                       
                        var multiselect2 = $('#' + this.id).data("kendoMultiSelect");
                        
    //removing old animation elements; 
    //if we have previously focused on multiselect widget
                        $('#' + this.id + '-list').closest('.k-animation-container').remove();

    //if we have not been focused on multiselect widget

                        $('#' + this.id + '-list').remove();

                        multiselect2.destroy;
                    })
                    $(ts.contentElement(ts.select().index())).find('select').remove();

                    ts.reload(ts.select());
                });

    It works. But it feels more like a hack (and not a good one) than a proper solution.

    Any suggestions if i am doing something wrong or of some other solution?

    Thx





  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 May 2014 Link to this post

    Hi,

    You should destroy the widgets in the content before reloading it in order to avoid the problem. Also, note that:
    • You should get the existing tabstrip instance instead of initializing a new one:
      var ts = $("#tabstripSvojta").data("kendoTabStrip");
    • If the reload method is used the first time a tab is selected then a request will be made twice. The first one will be triggered by the default handler and the second by the reload method. You could check if the content element is empty before using the reload method in order to avoid this e.g.
      var ts = $("#tabstripSvojta").data("kendoTabStrip");
      ts.tabGroup.bind('click', 'li', function (e) {
          var tab = ts.select();
          var contentElement = $(ts.contentElement(tab.index()));
          if (!contentElement.is(":empty")) {
              kendo.destroy(contentElement);
              ts.reload(tab);
          }
      });


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jurica
    Jurica avatar
    9 posts
    Member since:
    Nov 2013

    Posted 02 Jun 2014 in reply to Daniel Link to this post

    Thx Daniel,

    this works, more or less :)

    For less part tab.index() is always -1 when switching from another tabstripitem.

    If I do like this 
     ts.tabGroup.bind('click', 'li', function (e) {
                        setTimeout(function () {
                            var tab = ts.select();
                            var contentElement = $(ts.contentElement(tab.index()));
                           
                            if (!contentElement.is(":empty")) {

                                //contentElement.html('');
                                kendo.destroy(contentElement);
                                ts.reload(tab);
                            }
                        }, 500);                    
    })
    then it works. Notice setTimeout. What could be wrong? Same works if I am stepping through the debugger.
    Thx






















  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Jun 2014 Link to this post

    Hello again,

    Could you try with the select event instead of the click handler? The click handler is bound directly to the elements and so it will be triggered before the tabstrip selection is updated.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready