Issue with Grid and Tabstrip

4 posts, 0 answers
  1. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 17 Dec 2014 Link to this post

    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.

  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 19 Dec 2014 Link to this post

    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.

     
  3. Shreesh
    Shreesh avatar
    33 posts
    Member since:
    Aug 2011

    Posted 24 Dec 2014 in reply to Dimo Link to this post

    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.

  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 24 Dec 2014 Link to this post

    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.

Back to Top