This is a migrated thread and some comments may be shown as answers.

Issue with Grid and Tabstrip

3 Answers 394 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shreesh
Top achievements
Rank 1
Shreesh asked on 17 Dec 2014, 03:01 PM
Attached is the sample project where we use grid along with tabstrip.

We Do NOT see the drill down of 2nd  tab when we open the dril-down from Top to bottom. It means we in the attached snapshot when we click on Project1 to Project4 then only project1 shows the tab named "Second". The rest projects : Project 2 , 3, 4 do not show the second tab and it cannot be selected also when clicked on it. (Refer: Issue_TopToBottom.jpg)

But the bottom to top works well (Refer: Issue_BottomToTop.jpg)

Please give us a solution at the earliest.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Dec 2014, 11:09 AM
Hello Shreesh,

Currently you have several TabStrip instances on the page with the same ID (Name), which is not a valid implementation. Please use a dynamic and unique ID (Name) for all widgets inside the detail template.

http://demos.telerik.com/aspnet-mvc/grid/detailtemplate

The same is mentioned also in the documentation.

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/client-detail-template#client-hierarchy

(point 11)

Regards,
Dimo
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Shreesh
Top achievements
Rank 1
answered on 24 Dec 2014, 02:48 PM
Hello Dimo,

Thanks for your reply.
The solution that you have provided does NOT work for using partial view in the tabstrip. Now my issue with multiple grid in Tabstrip is resolved and working from top to bottom.
Attached is the code base (index.cshtml) where I load content from method "FetchPeopleInformationForDrillDown"  of Peoples controller. This method returns Partial view "PeopleInformation".
Here again, top to bottom does NOT work, but bottom to top works.  From top to bottom, Kendo Textbox is shown correctly but other widgets like drodownlist, datepicker, autocomplete do NOT show correctly. For example, dropdown list shows Id instead of Name.

The partial view "PeopleInformation.cshtml" is also provided in the code base.

Please provide the solution for this partial issue at the earliest.

1
Dimo
Telerik team
answered on 24 Dec 2014, 03:04 PM
Hello Shreesh,

When you load the same partial view multiple times on the page, you will get multiple HTML elements with the same IDs. This is not allowed and this is the cause of the discussed problem - you can't have multiple Kendo UI widgets on the page with the same ID, because the Javascript code cannot reference and create all of them correctly. When there are duplicate IDs on the page, a jQuery selector for this ID will always return the first element in the DOM with this ID. This is the reason why Kendo UI widgets are initialized when you go from bottom to top and not when you go from top to bottom. When you go from top to bottom, what happens is that the same widgets are initialized multiple times and the newly added ones are not initialized.

Please ensure that all IDs and widget Names inside the PeopleInformation partial view are unique when this partial view is loaded several times on the page. This represents a general web development task, which would exist also if you were not using Kendo UI at all.

Regards,
Dimo
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Tags
Grid
Asked by
Shreesh
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Shreesh
Top achievements
Rank 1
Share this question
or