TabStrip: Delete tabs with javascript

8 posts, 0 answers
  1. Bert
    Bert avatar
    13 posts
    Member since:
    Jul 2008

    Posted 30 Jul 2008 Link to this post

    Hi,

    I'm using a function that I found in the online demo's for deleting tabs. And it seems to work great but when I deleted some tabs and I then click on an existing tab (just selecting it - not deleting it) all deleted tabs are returned. Am I forgetting something because its seems that the remove function only changes the view and not the tabs and pageviews collections

    function
    deleteTab(tabText)
    {
        var tabStrip = $find("<%= rtsTabs.ClientID %>");
        var multiPage = $find("<%= multiPage.ClientID %>");
        var tab = tabStrip.findTabByText(tabText);
        var pageView = tab.get_pageView();

        tabStrip.get_tabs().remove(tab);
        multiPage.get_pageViews().remove(pageView);
    }

    Thanks

    Bert

  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 31 Jul 2008 Link to this post

    Hi Bert,

    By default, changes made in client-side code do not persist over a post-back to the server. To preserve changes, you must use the trackChanges and commitChanges methods:

    function deleteTab(tabText)  
    {  
        var tabStrip = $find("<%= rtsTabs.ClientID %>");  
        var multiPage = $find("<%= multiPage.ClientID %>");  
        var tab = tabStrip.findTabByText(tabText);  
        var pageView = tab.get_pageView();  
          
        tabStrip.trackChanges();  
        multiPage.trackChanges();  
     
        tabStrip.get_tabs().remove(tab);  
        multiPage.get_pageViews().remove(pageView);  
          
        tabStrip.commitChanges();  
        multiPage.commitChanges();  
    }  
     


    Regards,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bert
    Bert avatar
    13 posts
    Member since:
    Jul 2008

    Posted 31 Jul 2008 Link to this post

    Thanks Paul

    That was just what I needed
  5. Bert
    Bert avatar
    13 posts
    Member since:
    Jul 2008

    Posted 08 Aug 2008 Link to this post

    I have a new problem with this.

    When I delete a tab and a multipage with the track en commitchanges methodes, then I have a problem with the deletion of the pageview of the multipage. It seems that the clientstate of the multipage isn't cleared after deleting it.

    ex. when I delete the first tab with pageview he deletes 1 tab and 1 pageview.
    When I delete another tab and I see that in the LoadClientState methode of the RadMultiPage.cs file that still 2 remove statements are found in the clientstate.ChangeLog and then he want's to delete 2 pageviews instead of the one I deleted.

    Is there something wrong with my use of trackchanges and commitchanges of the multipage or am I forgetting something?

            function deleteTab(tabValue)  
            {  
                      
                var tabStrip = $find("<%= rtsTabs.ClientID %>");  
                var multiPage = $find("<%= multiPage.ClientID %>");  
                           
                var tab = tabStrip.findTabByValue(tabValue);  
                var pageView = tab.get_pageView();  
                  
                  var tabtabToSelect = tab.get_nextTab();  
                if (!tabToSelect)  
                   tabtabToSelect = tab.get_previousTab();  
                     
                tabStrip.trackChanges();  
                tabStrip.get_tabs().remove(tab);  
                tabStrip.commitChanges();  
                  
                multiPage.trackChanges();              
                multiPage.get_pageViews().remove(pageView);  
                multiPage.commitChanges();  
                  
                if (tabToSelect)  
                    tabToSelect.set_selected(true);  
     
                var arg = "removed/" + tabValue;  
                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(arg);   
            } 

    Thanks

    Bert
  6. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 08 Aug 2008 Link to this post

    Hello Bert,

    Unfortunately, the provided information does not help us much in reproducing the error. I'm afraid we could not be of much help unless we reproduce the issue on our side. It will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Sincerely yours,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Bert
    Bert avatar
    13 posts
    Member since:
    Jul 2008

    Posted 08 Aug 2008 Link to this post

    It's not easy to create a small example.

    I just have one more question. I thought that with trackchanges and commitchanges the following would happen.

    I start trackchanges. Everything I do with my multipage is stored in the clientState.ChangeLog.

    When I call commitchanges. Everything in de ClientState.Changelog is handled server-side.

    When I call for a second time in my application the trackchanges method on my multipage and commits it. De ClientState.ChangeLog consists of 2 items (in this case 2 removes) and I was expecting 1 because I already commited my first delete in the first run. 

    Thats the way I think it should work. Am I right?

    In the foreach of the following piece of code, I found that de ClientState.Changelog isn't cleared.

    private void LoadClientState(string state)  
            {  
                JavaScriptSerializer serializer = new JavaScriptSerializer();  
                MultiPageClientState clientState = serializer.Deserialize<MultiPageClientState>(state);  
                SelectedIndex = clientState.SelectedIndex;  
                if (clientState.ChangeLog == null) return;  
     
                foreach (ClientStateLogEntry logEntry in clientState.ChangeLog)  
                {  
                    switch(logEntry.Type)  
                    {  
                        case ClientStateLogEntryType.Insert:  
                            PageViews.AddAt(Convert.ToInt32(logEntry.Index), new RadPageView());  
                            break;  
                        case ClientStateLogEntryType.Remove:  
                            PageViews.RemoveAt(Convert.ToInt32(logEntry.Index));  
                            break;  
                    }  
                }  
            } 
    Bert
  8. Bert
    Bert avatar
    13 posts
    Member since:
    Jul 2008

    Posted 08 Aug 2008 Link to this post

    I still have 1 question.

    On my first question you answered me that I should use track and commitchanges and it seemed to work. But now I'm wondering why the code on the online demo of telerik doesn't use the track and commitchanges and still deletes the tabs correctly.

    Is there an other way to do the deletion without the track and commitChanges?

    Thanks

    Bert
  9. Kevin
    Kevin avatar
    8 posts
    Member since:
    Feb 2012

    Posted 09 Feb 2012 Link to this post

    So if there are additional steps needed to force a tab to stay deleted upon post back, maybe consider adding the additional steps to the demo referenced above. (http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/deletetabs/defaultcs.aspx)

    I was also stuck because the track and commit changes javascript code isn't included in the demo.

    I assume most developers would want a deleted tab to remain deleted and this would be expected functionality from a Telerik example on how to delete a tab.  

    Thanks
    Kevin
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017