jqxGrid, how to use set its width like table can use %, then it can automatic resize upon container size change

[Peter StoevKeymaster]

Hi Ioana,

Seems to work fine to me: http://jsfiddle.net/jqwidgets/ncpu0zwx/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jxGridUserParticipant]

Hello jqWidgets Team,

var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: ‘firstname’,
type: ‘string’
}, {
name: ‘lastname’,
type: ‘string’
}, {
name: ‘productname’,
type: ‘string’
}, {
name: ‘date’,
type: ‘date’
}, {
name: ‘quantity’,
type: ‘number’
}, {
name: ‘price’,
type: ‘number’
}],
datatype: “array”
};

var adapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid({
width: ‘100%’,
theme: ‘energyblue’,
source: adapter,
columnsresize: true,
columns: [{
text: ‘First Name’,
datafield: ‘firstname’,
columngroup: ‘Name’,
width: ‘20%’
}, {
text: ‘Last Name’,
columngroup: ‘Name’,
datafield: ‘lastname’,
width: ‘20%’
}, {
text: ‘Product’,
datafield: ‘productname’,
width: ‘20%’
}, {
text: ‘Order Date’,
datafield: ‘date’,
width: ‘20%’,
cellsformat: ‘dd-MMMM-yyyy’
}, {
text: ‘Quantity’,
datafield: ‘quantity’,
width: ‘10%’,
cellsalign: ‘right’
}, {
text: ‘Unit Price’,
datafield: ‘price’,
cellsalign: ‘right’,
cellsformat: ‘c2′,
width:’10%’
}]
});

I have set the container width and column width in ‘%’ and on window resize it works good! But on column resize the table does not occupy the whole container. On column resize also the table should occupy the full space, what should i do for this scenario??

[Peter StoevKeymaster]

Hi jxGridUser,

If you resize your columns, you will change their width so they can take less or more than the table’s width.

Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts