Config header column datatable

Webix JS
1

Hi all !

i’m current using webix for my project.

I can’t config header for column in my datatable without width config. I want if table have a column then column header auto fit table ! Can anyone support me ?

Sorry for my litte English !

Thanks.

2

try this

…
id : “mytable”,
columns : [ {
id : “value”,
fillspace : true,
// width : yourWidth, no more
…

3

Datatable column featuresa fixed width of 100px. If you want another width value, set it as:

{ id:"col1", width:200}

If you want the column to take the whole free space, set fillspace:

{ id:"col2", fillspace:true}

In addition column width can be adjusted either to its content or its header ::

{ id:"col4", adjust:"data" }, //or adjust:"
{ id:"col4", adjust:"header"}
4

@jpv, @Helga

it woking ! thanks.

Can you help me ? i have a question:

i have a cell for my tabview:

////////////////////////////////////
{
    header: "Danh sách",
    gravity: 1,
    body:
    {
        autoheight: true,
        autowidth: true,
        cols: [
            {
                autoheight: true,
                autowidth: true,
                rows: [
                    {
                        view: "datatable",
                        id: 'girdInfo',
                        height: 300,
                        //autoConfig: true,
                        columns: [
                            { id: "tendoituong", header: "Đối tượng", adjust: true, fillspace: true },
                        ],
                        select: true,
                        on: {
                            'onItemClick': function(id,e)
                            {

                            }
                        }
                    }
                ]
            }
        ]
    }

}

////////////////////////////////////

How do get gridInfo in event onItemClick ? i’m using $$(‘gridInfo’) but it return undefined

5

You can use “this” in the event handler, it will alway point to the owner component

$$(“gridInfo”) will work as well ( in above snippet you have typo in id name “gridInfo” vs “girdInfo” )

6

Also, I don’t see the reason for mixing fillspace and and adjust properties in one and the same column configuration. Fillspace makes the column take free space while adjust makes it stick to its content.

So use either adjust, or fillspace. However, the fillspace seems to override the adjust value.

7

@maksim, @Helga

Thank all !

Webix is helpful for me ^^! Before using Webix, i’m used Extjs but it not smooth.

i’m define:

<code class="js">
var grid = webix.ui({
    view: "datatable",
    ........
})

var layout = Webix.ui({
   container: "layout_div",
   id: "layout",
   ........
   rows: [ grid ]
});

it don’t work…

8

Check the sample please: http://webix.com/snippet/2b685669

Do you have an element in your HTML with “layout_div” id?

9

//var grid = webix.ui({ view: “datatable”, … }) // not JSON but a webix object
var grid ={ view: “datatable”, … }; //JSON =

var layout = Webix.ui({ container: “layout_div”, id: “layout”, … rows: [ grid ] });

10

Thank @Helga, @jpv !

@Helga: yes, i have

Can i call ‘grid’ same $$(‘gridId’) ?

how do catch (listen) event itemclick of grid in every where ?

11

you can attach an onItemClick event to the datatable, eidther within its configuration via the on property, or with the help of an attachEvent function.

http://webix.com/snippet/75e49a89

Here you can read more about Event handling in Webix : http://docs.webix.com/desktop__event_handling.html

12

Thank @Helga !

13

adjust with header is not working in the case when i am updating table has no data.so that my last column header text is cutting and and first column header occupying the more space which i given fill space with true and rest with adjust with header.please help me.
thanks in advance.