Problem to open Kendo Window in Kendo Tabstrip

[york]

Hi,

I have a Kendo Tabstrip in each tab there is a Kendo Grid and a button. A Kendo Window is suppose to open when the button is clicked. But weird thing is that in some tabs Kendo Window is opened when a button is clicked, while in others tabs the window is not opened when the button is clicked. Another problem is that initially Grid in the tab (set by SelectedIndex) can not show up. It only shows up after clicking another tab.

I attach a sample project named MVC_Controls_Kendo as well as MVC_Controls_Kendo Database to show the problems. Because of the size limit, I remove the package in the project. The package include, Kendo MVC (2015.1.429.440.Trial), MVC 4 and many others. The simplest way to recreate the solution is to create
new Telerik MVC project (name: MVC_Controls_Kendo) and select .Net 4 and ASPX (not razor), and add the source files attached.

Please add the OTPTEST.mdf in attached MVC_Controls_Kendo Database to the Data folder for SQL Server Express on the your pc and attach it in SQL management studio. Then modify the connection string in Webconfig in MVC_Controls_Kendo project and App.Config file in Data project. Currently it is:
    <add name="OTPTESTEntities" connectionString="metadata=res://*/Model3.csdl|res://*/Model3.ssdl|res://*/Model3.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=ZHANG-PC\SQLEXPRESS;initial catalog=OTPTEST;integrated security=True;multipleactiveresultsets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />.

Replace ZHANG-PC with your pc name. After launching the project, just click on "Action Items", which will go to ActionItems.aspx. Click any link in "Type Desc" column and it will redirect to EvaluationForm.aspx which will display a Kendo TabStrip. In each of its tab, it supposes to display a Kendo Grid defined in EvaluationFormTab.ascx. Another Kendo Grid and Kendo Window hosting it are also defined in this file.

The problem is that after initial click on "Type Desc" column, it will redirect to EvaluationForm.aspx and display a Kendo TabStrip, but the Kendo Grid that is supposed to show up doesn't. It only shows up after clicking on another tab.

Another weird problem is that while Kendo Window is opened in some tabs like "Overall", "Coaching" after "Best Practice" button is clicked, the window never opens in tab like "Governance" after "Best Practice" button is clicked. In some tabs like "IST", "Benchmarks", the window opens for 1st time and not opens for the rest of time after "Best Practice" button is clicked.

I have no idea on these problems and need your help. Thanks. 

[Dimo]

Hello York,

The problem is caused by duplicate IDs. You have addressed the issue partially for one of the Grids in the partial view (QuestionsGrid), but this is not enough. Please use the same approach for all IDs and widgets in the partial view.

http://docs.telerik.com/kendo-ui/aspnet-mvc/troubleshooting#loading-partial-view-that-contains-a-widget-works-only-the-first-time

Another possible approach is to use one Window instance, defined outside the EvaluationFormTab partial view, and loading its content with Ajax. In this case you will only need to open() and refresh() the Window with JavaScript code inside the partial view.

Regards,
Dimo
Telerik

[york]

Hi Dimo,

After adding Ids like

.Name("BestPracticesGrid" + Model.Pillar.Id)

.Name("BestPracticesWindow" + Model.Pillar.Id)

in EvaluationFormTab partial view. The problem (window opens for 1sté2nd time and not opens for the rest of time ) still exist. But I think that might have something to with another problem in the post, i.e. Kendo Grid that is supposed to show up after initial click on the tab doesn't. It only shows up after clicking on another tab.

The Kendo Tabstrip (Name("TabStrip")) is initialized as

SelectedIndex(Model.SelectedTabIndex)

But it cannot display the Kendo grid in the tab by SelectedTabIndex initially. What is the problem?

Thanks.

[Dimo]

Hello York,

Based on the provided information, it sounds like there is still some problem with:

- duplicate widget IDs
- duiplicate widget initialization
http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

Please verify that there is always only one element with a specific ID on the page. Note that if a specific TabStrip tab is reloaded (e.g. in the select event handler), this will result in two Window instances on the page with the same ID. This is because each Window isntance is moved in the DOM and becomes a child of the <body>.

http://docs.telerik.com/kendo-ui/controls/layout/window/overview#html-structure-and-dom-placement

To achieve correct behavior, either use only one Window instance outside the EvaluationFormTab partial view, or destroy the existing Window instance before reloading the TabStrip tab.

http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy

Regards,
Dimo
Telerik