Multiselect inside tabstrip

[Jurica]

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

[Daniel]

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

 

 

[Jurica]

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

[Daniel]

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