Dynamic Tabs | On Removal - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: addAt, close, event, index, item, jqxTabs, removed, tab, Tabs

This topic contains 3 replies, has 3 voices, and was last updated by Dimitar 11 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Dynamic Tabs | On Removal Posts

September 17, 2013 at 10:03 am Dynamic Tabs | On Removal #29105

Spectator

Hi,

I create a new tab by passing title, contents etc. dynamically and when I remove the newly created tab, I want to bring the focus to the parent tab i.e. from where the new tab was created. Actually during the tab creation, I get the parent tab index and I kept one separate flag to keep track of new tab count.

To achieve that, I use the following method and check the length of the newly created tab. If the length is zero then, I want to bring the focus to my parent tab.

$('#primaryTabs').on('removed', function (event){
if(length of the new tab !=0)
{
}
else
{
// Highlight the parent tab using the index
$('#primaryTabs').jqxTabs('select',ParentTabIndex);
}
});

But it is not happening as expected. Scenarios explained below

Tab 1   |   Tab 2   |    Newly created tab from Tab 2

Step 1: Created a new tab from tab 2, now the focus goes to the new tab. Within this tab, if I close, it automatically moves the focus to the previous tab i.e. Tab 2.

Step 2: Instead, after creating a new tab, select the Tab 1 and try to close the newly created tab. Obviously the focus goes to the Tab 1 but I want to focus to it’s parent tab.

Hope I explained clearly. Can someone suggest me a solution.

Looking for a solution.

Thanks & Cheers,
\_rssb

September 18, 2013 at 6:02 am Dynamic Tabs | On Removal #29160

Dimitar

Participant

Hello rssb,

Unfortunately, it is currently not possible to select a custom index on the removed event. After a tab is removed, its nearest tab to the left is selected by default. We will consider enhancing this behaviour in future versions of jQWidgets.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 18, 2013 at 4:40 pm Dynamic Tabs | On Removal #29185

rajendra

Participant

Hi Dimitar,

I have one requirement on closing tabs. I need to handle the tabs before closing like the tabs are setting dirty if any control’s data is changed. While closing the tab, I should check whether the tab is dirty or not… If the tab is dirty, the tab should not closed.

For the requirement, I did not find any event on closing the tab. I found “removed” event after closing the tab. But we cannot get the tab to back(with same index and content).

Is there any event available on this requirement. Any other alternatives…….

Please suggest……

Thanks,
Rajendra

September 19, 2013 at 6:55 am Dynamic Tabs | On Removal #29206

Dimitar

Participant

Hi Rajendra,

Unfortunately, there is no event that fires before a tab is closed. It is possible to add the same tab with the addAt method, however. Here is how:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var addButton,
                addButtonWidth = 29,
                index = 0;
            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500, theme: theme, showCloseButtons: true });
            var tabsContent = new Array();
            var tabsCount = $('#jqxTabs').jqxTabs('length');
            for (var i = 0; i < tabsCount - 1; i++) {
                tabsContent.push($('#jqxTabs').jqxTabs('getContentAt', i))
            };
            $('#jqxTabs').on('removed', function (event) {
                var index = event.args.item;
                var title = event.args.title;
                var content = tabsContent[index].html();
                $('#jqxTabs').jqxTabs('addAt', index, title, content);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>Node.js</li>
                <li>Active Server Pages</li>
                <li canselect='false' hasclosebutton='false'>Add New Tab</li>
            </ul>
            <div>
                Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
                is intended for writing scalable network programs such as web servers. It was created
                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
                Similar environments written in other programming languages include Twisted for
                Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
                Unlike most JavaScript, it is not executed in a web browser, but is instead a form
                of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
                includes a REPL environment for interactive testing.
            </div>
            <div>
                ASP.NET is a web application framework developed and marketed by Microsoft to allow
                programmers to build dynamic web sites, web applications and web services. It was
                first released in January 2002 with version 1.0 of the .NET Framework, and is the
                successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
                on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
                using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
                components to process SOAP messages.
            </div>
            <div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.