Tabstrip contents not reloaded after clicked on second time

20 posts, 0 answers
  1. Santosh
    Santosh avatar
    7 posts
    Member since:
    Feb 2013

    Posted 14 May 2013 Link to this post

    I have 3 tabs in tabstrip control for Asp.Net Mvc app.
    Each tab loads the contents using LoadContentFrom() API.
    once tab is clicked for the first time it calls the action method of the controller.
    After the same tab is clicked for the 2nd time it doesn't call the controller method and hence same content is displayed which was displayed for the 1st click. We need to have a functionality which will call the controller method every time the tab is clicked. Let us know if there is a workaround or property available to set this.

    Thanks,
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 16 May 2013 Link to this post

    Hi Santosh,

    You can use the Select event of the TabStrip to clear the current content of the tab which will force the TabStrip to load it's content again:

    function onSelect(e) {
        //clear the current content of the tab before it's displayed to force the tabStrip to load it
        $(e.contentElement).html("");
    }
    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Santosh
    Santosh avatar
    7 posts
    Member since:
    Feb 2013

    Posted 22 May 2013 Link to this post

    Hi Vladimir,

    It does solves the problem but then introduces new one.

    I have a button in the tab. when that tab is loaded for two times and when the button is clicked. the client side click  event for that button is fired two times because of the changes you have suggested. Let me know if there is better solution available for original issue.

    Thanks,
    Santosh
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 22 May 2013 Link to this post

    Hi Santosh,

     
    You should use the current approach and detach all events before clearing the content of the tab using custom code. 

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Santosh
    Santosh avatar
    7 posts
    Member since:
    Feb 2013

    Posted 22 May 2013 Link to this post

    But it doesn't seem to be a maintainable and readable code. I was hoping that control will expose a property which determines if tab is reloaded every time it is clicked.

    Thanks,
  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 22 May 2013 Link to this post

    Hi Santosh,

     
    I would suggest to share your idea at KendoUI UserVoice to allow other users vote for it. Most voted ideas are included in next KendoUI releases.

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Santosh
    Santosh avatar
    7 posts
    Member since:
    Feb 2013

    Posted 29 May 2013 Link to this post

    We cant wait for next release of KendoUI, since we will release our product in next week. So please let me know if there is a workaround with sample code.

    Thanks,
    Santosh
  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 May 2013 Link to this post

    Hi Santosh,

     
    As I mention in my previous reply detaching the events in the content of the tabs currently is not supported and you should implement it using custom code which is out of scope of our support service as it covers the build-in functionality of the controls only.

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Paul
    Paul avatar
    5 posts
    Member since:
    Mar 2012

    Posted 23 Dec 2013 Link to this post

    The proposed solution to just blank out the html during the "onSelect" event is poor, and as it was mentioned, it causes more problems than before. Even unbinding the events causes the page to reload several times because it actually calls the document.ready event several times.

    Here is a cleaner solution. Instead of using the onSelect event, just use your own click event:
    var ts = $("#clienttabstrip").data().kendoTabStrip;
        ts.tabGroup.on('click', 'li', function (e) {
        ts.reload($(this));
    });
    This will reload the data in the tab.  One more note: use the syntax above (data().kendoTabStrip) instead of the syntax in the documentation:
    var tabStrip = $("#clienttabstrip").data().kendoTabStrip;
    //$("#clienttabstrip").kendoTabStrip().data("kendoTabStrip");
    tabStrip.reload("li:first");
    I hope this helps anyone. This took me 3 days to figure out... please fix this in the next release. Thanks.
  11. G
    G avatar
    4 posts
    Member since:
    Feb 2014

    Posted 12 Feb 2014 in reply to Paul Link to this post

    Paul,

    I came across your post and it looks very similar to what I want to do as well. However, I am getting an error when trying to access the tabStrip.data() object, saying that it is null.

    I'm curious where on your page you have the JavaScript.

    Thank you,

    -G
  12. Paul
    Paul avatar
    5 posts
    Member since:
    Mar 2012

    Posted 12 Feb 2014 in reply to G Link to this post

    You can try this instead:

    $("#maintabstrip").data("kendoTabStrip");

    If you're still getting null, then your tab strip hasn't been initialized yet or you have the wrong id in there. Check to see if this is null as well:

    if($("#clienttabstrip") == null) {
        //Then check to see if this is null:
        if($("#maintabstrip").data("kendoTabStrip") == null) {
            $("#tabstrip").kendoTabStrip(<br>   
        }
    }


    Hope this helps.
  13. Paul
    Paul avatar
    5 posts
    Member since:
    Mar 2012

    Posted 12 Feb 2014 in reply to Paul Link to this post

    Sorry for the bad code in the last post, it won't let me edit it:

    if($("#clienttabstrip") != null) {
        //Then check to see if this is null:
        if($("#clienttabstrip").data("kendoTabStrip") == null) {
          // Initialize it here...
           $("#tabstrip").kendoTabStrip();
        }
    }
  14. G
    G avatar
    4 posts
    Member since:
    Feb 2014

    Posted 12 Feb 2014 in reply to Paul Link to this post

    Paul,

    Thanks for the quick response, while reading it occurred to me that I need the "#" sign in front of the elementID - I had forgotten it because the Kendo syntax for using "#" for evaluations of variables was confusing. Once I added that back on it works as expected.

    To add to the complexity, I am using tab strip as a template within a grid that will (hopefully) be able to POST data and then reload it from the server. Hence your portion of the code - reloading the data. I am running into an issue with the JavaScript inside of a Kendo script template. With your code and some tweaking I was able to come up with:

    <script id="script_#=ID#">
            var onActivate = function (e) {
                var ts = $("\#tabStrip_#=ID#").data().kendoTabStrip;
                ts.tabGroup.on('click', 'li', function (e) {
                    ts.reload($(this));
                });
            }
    <\/script>

    [You'll notice the additional "\" in front of the "#tabStrip" and the bottom "</script>" tag. The "\" is simply Kendo's escape character when using templates. If you simply use "#tabStrip" or "</script>" the Kendo template won't render the correct HTML and you get a JavaScript error.]

    The onActivate is tied to the tab Event.Activate which fires after the data has been loaded, which is exactly what I am looking for in order to reload the tab data on each click. I am essentially going to try to override the reload in order to POST data to the server and use the tab header (title) as a "Save" button.

    I know this is a bit off topic, but I am using the tab strip to load a partial view which has a Model. Any thoughts on how to use the ajax calls associated with the tab strip in order to POST the Model back to the server?

    Thank you,

    -G
  15. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 14 Feb 2014 Link to this post

    Hi,

    As this thread is out of the original topic, may I kindly ask you to open a new support thread/ forum post for the TabStrip and provide your current TabStrip code? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

    Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 28 Mar 2014 Link to this post

    Hello,

    I realize this post is a little bit older but I am hoping to still get some help.  Paul's solution with adding the click event seems like a great solution.  I am having one issue though.  My tabstrip is setup much the same as the OP's is.  Each tab uses LoadContentFrom to load a partial view.  Each of my partial views are Ajax forms.  When I add the click even script to the tabstrip, the first time I click on a tab it seems like it is loading it and then it never does.  If I click it a second time then it is fine.  Each time after that it is fine, it is just the first time.  I am guessing it has something to do with the Ajax form which is calling the Get method on the controller and then the click event performing the same action?

    If there is something I am not understanding or simply missing I would appreciate the help.

    Thanks,

    Steve
  17. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 01 Apr 2014 Link to this post

    Hi Stephen,

    Could you please open a new support ticket / forum post and provide your current TabStrip setup as well as the related partial views and Controller? This would help us pinpoint the exact reason for current behavior. 

    Regards,
    Vladimir Iliev
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  18. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 01 Apr 2014 in reply to Vladimir Iliev Link to this post

    ok done
  19. Danilo
    Danilo avatar
    1 posts
    Member since:
    Jul 2014

    Posted 11 Sep 2014 in reply to Paul Link to this post

    Nice solution, Thanks
  20. Srinivas
    Srinivas avatar
    2 posts
    Member since:
    Jun 2015

    Posted 01 Oct 2015 Link to this post

    This solution seems to work fine for Chrome but doesn't work on IE. Is there a different workaround to implement this in IE? 

     

    Thanks,

    Srini.

  21. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 05 Oct 2015 Link to this post

    Hi Srinivas,

    The previously provided solution works as expected in IE browser on our side - could you please isolate the issue in sample project and send it back to us?

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
Kendo UI is VS 2017 Ready