CODEWITHSUNDEEP
javascriptuser-interfacedatatablespagerwebix
rannat
rannat

Reputation: 69

Datatable pager width

I have Webix a datatable with a huge dataset and the pager. All is well except the one problem: the width of the pager item is fixed, so big numbers (e.g. 1001) are not visible. Is there any way to overcome this? Here's an example:

var data = [];
for (var i = 1; i < 1011; i++)
    data.push({ id:i, package:"Some #"+i, section:i, size:i, architecture:i });                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

var grida = webix.ui({
    container:"testA",
    view:"datatable",
    columns:[
        { id:"package", header:"Name",          width:200 },
        { id:"section", header:"Section",       width:120 },
        { id:"size",    header:"Size" ,         width:80  },
        { id:"architecture",    header:"PC",    width:60  }
    ],
    select:"cell",
    autowidth:true,
    autoheight:true,
    pager:{
        template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
        container:"paging_here",
        size:1,
        group:5
    },
    data:data
});

http://webix.com/snippet/fdb4d9e0

Upvotes: 1

Views: 665

Answers (1)

davidkonrad
davidkonrad

Reputation: 85578

There does not seem to be any "native" solution for this. The injected pager containers(s) width is set to auto / 100% and seems to be inserted without any adjustment to the view it is serving; the paging buttons have a fixed size, also rendered without respect of the view. The workaround I have found for this is either adjusting the number of buttons 

pager:{
  template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
  container:"paging_here",
  size:1,
  group:5 //set the desired number of buttons here 
},

or adjusting the CSS for the buttons, here an example of giving them an increased equal margin, but you could also change the width / size of the pager buttons 

.webix_pager_item {
  margin-left: 15px;
}
.webix_pager_item_selected  {  
  margin-left: 15px;
}

See the webix docs for paging. On the returned object (like grida) there is no "secret" paging related methods either nor literals you can manipulate.

Upvotes: 1

Related Questions