TabStrip: Delete tabs with javascript

[Bert]

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

[Paul]

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.

[Bert]

Thanks Paul

That was just what I needed

[Bert]

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

[Paul]

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.

[Bert]

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

[Bert]

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

[Kevin]

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