Add tabview to the window

Hi,

I have the below webix code.

webix.ui({
view:“window”,
id:“moviedata”,
height:700,
width:1000,
modal:true,
resize: true,
position:“center”,
head:“Movie Data”,
position: “center”,
hidden: true,
head: {
view: “toolbar”,
elements: [
{view: “label”, label: “Movie Data”},
]
},

              body: {
                      view: "form",
                      scroll:true,
                      elements: [
                          {
                              view: "datatable",columnWidth:5000,
                              resizeColumn: {headerOnly:true},
                              autoConfig:true  ,
                              id:"movie",
                              autoheight: false,
                              autowidth: false,
                              scroll:true,
                               dragColumn:true,
                               resizeColumn:true,
                               select:true,
                               headermenu:true,
                               spans: true,
                               rowHeight: 24,
                               rowLineHeight: 24,
                               subRowHeight: 24,
                               columnWidth: 100,
                               columns:[
                                      {id:"movieName", header:["movieName", {content:"textFilter"}], sort:"string",adjust: "true"}, //  cssFormat:missingval},
                                      {id:"movieAudience", header:["movieAudience", {content:"textFilter"} ], sort:"string", adjust: "true"}, //  adjust: "true", cssFormat:missingval},
                                  ],
                                  on:{
                                    	onAfterLoad:function(){
                                        this.sort("movieName", "asc");
                                        this.markSorting("movieAudience", "asc");
                                      }
                                    },

                          },
                          {
                              type: "button",
                              cols: [
                                  {},
                                  {view: "button", label: "Export", width: 80, click: "window.webix.toExcel($$('movie'), {filename: 'moviedatafile'});"},
                                  {view: "button", label: "Cancel", width: 80, click: "$$('moviedata').hide();"}
                              ]
                          }
                      ],





                  }

I wanted to add a separate tab called Upcoming movies to the window.
How can i add that?

Hey @prasadraju, did you mean a separate tab beside your already existing table or did you want to include your table in the tabview as well? Either way, it should be pretty straightforward, simply declare a tabview inside the window and put the wanted content inside the body property, the header will containt the tab’s specified name. Here’s an example: https://snippet.webix.com/apheso2g.

You can read more aobut tabview configuration here - https://docs.webix.com/desktop__tabview.html.

@Dzmitry

Hey thank you for the reply. But i want the tab to be placed side to the movie data.

But as of now it is coming below the Movie Data window .

You can imagine the functionality similar to Chrome with multiple tabs.

where 1 tab is Movie Data and 2nd tab is Upcoming movies.

where the user can easily toggle between two tabs.

Ah, ok, I get it now. This is pretty easy to do with some layout readjustment, just put the datatable inside a new cell in the tabview: https://snippet.webix.com/u0l4jp1a. Initially I thought you wanted a tabview beside your datatable, and didn’t want to include it inside.