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?

Comments

  • 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.

  • edited August 7

    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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!