Datatable dynamic width

Webix JS
1

Hi,

I have a html page that shows a dynamic 3-colum layout. the left- and right-most columns are fixed width and the middle column is dynamic according to available page width.
In the middle column i want to place a webix datatable (#results_datatable) that uses all of the available width of the middle column. the datatable gets it content from a url in chunks.
Currently i use this code to initialize the datatable:

  <div id="resultlist">
    <div id="results_datatable"></div>
  </div>

  <script type="text/javascript">
    var grid = new webix.ui({
      view:"datatable",
      container: "results_datatable",
      columns:[
        {id:"runstatus", header:"", adjust:"data"},
        {id:"name", header:"Name", fillspace:2},
        {id:"total", header:"Total", adjust:"data"},
        {id:"pfe_bubbles", header:"Distribution", adjust:"data"},
        {id:"cat_full", header:"Category", fillspace:3},
        {id:"startedat_f", header:"Started at", adjust:"data"},
        {id:"duration_f", header:"Duration", adjust:"data"}
      ],
      url: '/get/my/data/here',
      navigation: true,
      select: true,
      minHeight: 400,
      minWidth: 600,
      headerRowHeight:20,
      rowHeight:20,
      scrollX:false,
      autowidth: true
    });
  </script>

I also have a css to maximize the width of the #resultlist div (with respect to some margin)

#resultlist {
  margin-left: 10px;
  margin-right: 10px;
}

As a result of this, i get a #results_datatable that is 671px wide, even though the #resultlist is 1251px wide. Both columns that are configured with fillspace are 100px wide (name and cat_full). All other columns are as wide as they should be depending on the data they show.
If i remove the autowidth: true, then the #results_datatable grows too large to 1430px (pushing the right column (of the surrounding page) out of the screen as the #resultlist is expanded too), but the two fillspace columns “scale as expected” (slightly too large, but compared to before they expand).
What am i doing wrong? I would like to have a table that uses the maximum available width without creating a horizontal scrollbar.

Regards,
Marc

2

My html/javascript code i included in the post above got scrambled, how can i post source code in the form and have it escaped so its viewable in the post?

3

It looks like if you use leading spaces it will treat this as preformatted text

4

Unfortunatly this does not work for html tags.
@forumadmins: what the syntax for preformatted text that contains html?

5

You should wrap the code into ~~~js /code/ ~~~ marks.

6

That helps, thanks. Now maybe someone can help me set the width for my table correct. :slight_smile:
Marc

7

Could you please change this snippet http://webix.com/snippet/e86127fc to show the issue?

8

Hi Helga,

Ok, i was able to more or less recreate it. Unfortunatly our layout is a lot more complex, but i think i was able to break it down to the essentials and was able to recreate the effect.
Have a look at this snippet http://webix.com/snippet/fe327271
you see that the width of the table is to large. I do not want any horizontal scrollbar, the datatable should just use as must space as it needs and is available without creating a scrollbar.

Also, if i enable autowidth, then the size is totally wrong http://webix.com/snippet/127af6d5

Do you have any idea how to fix either one of those cases?

Thanks,
Marc

9

Additionally our data is loaded via url in chunks. I cannot show this here as the api is not available over the internet.

10

I’m afraid column fillspace is only possible if either a container or a datatable come fixed sized - it should know the whole width to distribute the rest of space.

In your snippet, column dimensions are counted on the base of the given minWidth. While autowidth also works as expected since it adjusts datatable width to its content, not container.

What can be done here? I suggest that you should count the datatable width and define it in the constructor. Hope that it possible with your layout. See the sample: http://webix.com/snippet/8d9c8a31

11

Hello Helga,
I tried this and it worked. Thanks.
Its not exactly what i had in mind as due to some dynamic resizing happening inside our page and we have to resize the datatable “manually” too, but i can work with that solution.
Unfortunatly i have another issue that is probably related to the delayed loading of the page (use of url instead of data). See this example http://webix.com/snippet/9db16f69
The datatable fills the full width, but the rows do not use all available space. There is some empty space on the right of the rows. Is this a bug or is there a way to fix this (i thought it might be due to my smaller font size, so i included it in the css part, but it makes not difference if i use size 12 or 15).
Regards, Marc

12

As to the data loading issues, you can call .refreshColumns() method to force the datatable recalculate column width: http://webix.com/snippet/fc307ce6

As to resizing within the page, you can catch the event and resize the datatable as shown in the snippet.

Webix components adjust to an HTML container they are placed into only during the initialization and one needs to provide resizing logic for them if some dynamics happens on the page. Auto sizing is possible in a fully Webix layout.

13

Wow, that helps and the table now looks as i would like it to. :slight_smile:
Thank you very much for the great support! So far you solved every problem i encountered and answered every question i had.
We are gonna get a webix license soon as the support is worth every penny of it!