Tabstrip inside kendo window issue

6 posts, 0 answers
  1. Paul
    Paul avatar
    28 posts
    Member since:
    May 2016

    Posted 07 Dec 2016 Link to this post

    Hi I have a tabstrip inside a kendo window which works perfect until i close the window, When i try to reopen the window the tabstrip doesn't work.

    All i see is the html not in a tabstrip 

    this is my function which is called on a click 

    function MyAccountWindow() {  

        var kendoWindow = $("<div id='window'/>").kendoWindow({
            title: "User Details",
            width: "600px",
            height:"400px",
            resizable: true,
            modal: true,       
            content: {
                template: tabTemplate
            }
        }).data("kendoWindow");
        
        var tab = $("#tabstrip").kendoTabStrip({
            animation: {
                open: {
                    effects: "fadeIn"
                }
            },
        });  
            kendoWindow.open().center();    
    }

     

    my tabtemplate is just a variable with html inside.

     

    Any help would be appreciated

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    358 posts

    Posted 09 Dec 2016 Link to this post

    Hi Paul,

    Here you will find a Dojo sample, based on the described scenario. You will notice that, after closing and reopening the Window, the TadStrip appears and works as expected.

    May I ask you to modify the sample, so it reproduces the problem observed? Then we will be able to discuss and troubleshoot your exact scenario.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Paul
    Paul avatar
    28 posts
    Member since:
    May 2016

    Posted 09 Dec 2016 in reply to Veselin Tsvetanov Link to this post

    I changed the Dojo to use this the way i did and i can reproduce the issue i had this 

      <script>
        function openWindow() {
       
        
        
        var tabTemplate = "<div id='tabstrip'><ul><li class='k-state-active'>Paris</li><li>New York</li></ul>" +
        "<div>this is Paris</div><div>this is New York</div>";
                               
        
      var kendoWindow = $("<div id='window'/>").kendoWindow({
           title: "User Details",
           width: "600px",
           height:"400px",
           resizable: true,
           modal: true,       
           content: {
             template: tabTemplate
           }
        }).data("kendoWindow");
        
        var tab = $("#tabstrip").kendoTabStrip({
          animation: {
            open: {
              effects: "fadeIn"
            }
          },
        });  
        
        kendoWindow.open().center();
        }
      </script>

  4. Paul
    Paul avatar
    28 posts
    Member since:
    May 2016

    Posted 09 Dec 2016 in reply to Paul Link to this post

    But i can see how to fix it now thank you so much. 

     

    So all mine is in a JavaScript[t file would i need to do the initialisation in a document.ready?

  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    358 posts

    Posted 09 Dec 2016 Link to this post

    Hello Paul,

    If the initialization needs some processed HTML apart from the statically defined on your page, it is always recommended to enclose it in a $(document).ready(function(){...}); handler. If that is not your case, you could avoid the above closure. Keep in mind, however, that you will have to reference the JavaScript file at the bottom of the <body> tag, so all the HTML has been already rendered at the time, when the initialization is performed.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  6. Paul
    Paul avatar
    28 posts
    Member since:
    May 2016

    Posted 09 Dec 2016 in reply to Veselin Tsvetanov Link to this post

    The initial load isn't the problem its when I then re open the window.

    I think you example has helped me a lot to see how it will work.

     

Back to Top