Tabbar Fixed Tabs and Custom Event on Close Button

Suite and Optimus Suite 6
#1

I need to add some tabs closable and some not closable at runtime.
Also how to add custom event on close button?

#2

The closeButtons property is applied globally, it is not possible to apply it to a particular tab.

#3

Can we add custom click event on close button before closing the tab.
I some statement is false then we deny closing the tab.

#4

Hi @vicky1360,
We would still have a close button that we don’t want to show.

I have not tried this another solution, but I think should works. Look this. The css property is particular to each tab, that means we can create a CSS class that hides the Close button for that particular tab. We know that the class of a close button is .dhx_tabbar-tab__close so that we can do something like this:

CSS:

.x-tab-hiden-close .dhx_tabbar-tab__close{
     visibility: hidden;
}

JavaScript:

var tabbar = new dhx.Tabbar("tabbar_container", {
    views:[
        { tab: "left", tabCss:"x-tab-hiden-close", header:"Left"},
    ]
})

Other aspects can be customized, see this example.

You could also suggest this functionality to the dhtmlx team for the future here.

#5

Thanks. This solution covers one of the problem. Can we figure out any possibility to invoke onBeforeClose event for a tab to avoid accidental closure of a tab before completion of a task.

#6

This could be a solution to prevent a tab from being closed. But be careful because it uses the internal API that could change. We know that the close button will call the removeCell function, so we can overload this function and decide when to call Tabbar.removeCell. In this example we will not allow the first tab (Vilnius) to close:

var tabbar = new dhx.Tabbar("tabbar", {
    closeButtons: true,
    views: [
        {
            tab: "Vilnius",
            html: "<div><p style='font-size: 18px; line-height: 1.6; padding-left: 20px; padding-right: 20px'><strong>Vilnius(Lithuanian pronunciation: [ˈvʲɪlʲnʲʊs]</strong> , see also other names) is the capital of Lithuania and its largest city, with a population of 574,147 as of 2018. Vilnius is in the southeast part of Lithuania and is the second largest city in the Baltic states. Vilnius is the seat of the main government institutions of Lithuania and the Vilnius District Municipality.</p></div>"
        },
        {
            tab: "Paris",
            html: "<div><p style='font-size: 18px; line-height: 1.6; padding-left: 20px; padding-right: 20px'><strong>Paris (French pronunciation: ​[paʁi]</strong> is the capital and most populous city of France, with an area of 105 square kilometres (41 square miles) and an official estimated population of 2,140,526 residents as of 1 January 2019. Since the 17th century, Paris has been one of Europe's major centres of finance, diplomacy, commerce, fashion, science, as well as the arts. The City of Paris is the centre and seat of government of the Île-de-France, or Paris Region, which has an estimated official 2019 population of 12,213,364, or about 18 percent of the population of France.</p></div>"
        },
        {
            tab: "London",
            html: "<div><p style='font-size: 18px; line-height: 1.6; padding-left: 20px; padding-right: 20px'><strong>London</strong> is the capital and largest city of both England and the United Kingdom, as well as the largest city within the European Union. Standing on the River Thames in the south-east of England, at the head of its 50-mile (80 km) estuary leading to the North Sea, London has been a major settlement for two millennia. Londinium was founded by the Romans</p></div>"
        },
        {
            tab: "Rome",
            html: "<div><p style='font-size: 18px; line-height: 1.6; padding-left: 20px; padding-right: 20px'><storng>Rome (Latin and Italian: Roma [ˈroːma]</storng> is the capital city and a special comune of Italy (named Comune di Roma Capitale). Rome also serves as the capital of the Lazio region. With 2,872,800 residents in 1,285 km2 (496.1 sq mi), it is also the country's most populated comune. It is the fourth most populous city in the European Union by population within city limits. It is the centre of the Metropolitan City of Rome, which has a population of 4,355,725 residents, thus making it the most populous metropolitan city in Italy.</p></div>"
        }
    ]
});

tabbar.getTabName = function(id, cells) {
    var cell;
    for (var i in cells) {
        if (cells[i].id === id) {
            return cells[i].config.tab;
        }
    }
}

tabbar.removeCell = function (id) {

    var name = this.getTabName(id, this._cells);

    if (name !== 'Vilnius') {

        // Trigger custom beforeClose here.

        dhx.Tabbar.prototype.removeCell.call(this, id);
    }
}

I think the two solutions combined complete the functionality you need.

1 Like
#7

I apologize for the delay with the reply.
Your request is confirmed an was sent to the dev team, so the feature may appear in the future updates of the dhtmlxSuite.
Thank you for your patience and assistance,

1 Like
#8

We have added the possibility to block the tab closing in the dhtmlxSuite 6.4.
You may use the closable property:
https://docs.dhtmlx.com/suite/tabbar__api__tabbar_closable_config.html
https://docs.dhtmlx.com/suite/samples/tabbar/02_configuration/02_close_button.html
or the beforeClose event:
https://docs.dhtmlx.com/suite/tabbar__api__tabbar_beforeclose_event.html
to prevent tab from closing

#9

Thats a useful feature. Hence SOLVED.