Forums

Hi All,

I have an issue with columns in the yui datatable that are hidden - as you can see in the screenshot. For some reason, hidden columns still take up minimal width, and if there are multiple hidden columns, these create a grey vertical band as seen in the screenshot attached.

The reason there are hidden columns is that the user can select which fields are visible or not....

Grateful for any suggestions

I generate the array for the myColumnDefs with a php file that reads a table for the properties of the columns to display. Below I pasted the array returned, in which some of the columns are set to "hidden":true.

var myColumnDefs = [{"key":"product_id","formatter":"number","parser":"number","label":"product_id","width":100,"hidden":true,"sortable":true,"isPrimaryKey":true,"alias":"sp","fieldname":"product_id"},{"key":"product_code","formatter":"string","parser":"string","label":"code","width":80,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"product_code"},{"key":"product_bar_code","formatter":"string","parser":"string","label":"barcode","width":300,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"product_bar_code"},{"key":"product_description","formatter":"string","parser":"string","label":"description","width":100,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"product_description"},{"key":"category_description","formatter":"string","parser":"string","label":"category","width":100,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"sc","fieldname":"category_description"},{"key":"mrp","formatter":"number","parser":"number","label":"mrp","width":100,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"mrp"},{"key":"is_available","formatter":"boolean","parser":"boolean","label":"is_available","width":100,"hidden":true,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"is_available"},{"key":"is_av_product","formatter":"boolean","parser":"boolean","label":"is_av_product","width":100,"hidden":true,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"is_av_product"},{"key":"is_perishable","formatter":"boolean","parser":"boolean","label":"is_perishable","width":100,"hidden":true,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"is_perishable"},{"key":"list_in_purchase","formatter":"boolean","parser":"boolean","label":"list_in_purchase","width":100,"hidden":true,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"list_in_purchase"},{"key":"minimum_qty","formatter":"number","parser":"number","label":"minimum_qty","width":100,"hidden":true,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"minimum_qty"},{"key":"tax_description","formatter":"string","parser":"string","label":"tax_description","width":100,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"st","fieldname":"tax_description"},{"key":"measurement_unit","formatter":"string","parser":"string","label":"measurement_unit","width":100,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"mu","fieldname":"measurement_unit"},{"key":"supplier_name","formatter":"string","parser":"string","label":"supplier_name","width":100,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"ss","fieldname":"supplier_name"},{"key":"image_filename","formatter":"formatImage","parser":"string","label":"image_filename","width":100,"hidden":false,"sortable":true,"isPrimaryKey":false,"alias":"sp","fieldname":"image_filename"}];
myColumnDefs.push({key:"delete", label:' ', className:'delete-button', action:'delete'});

You mean I should run the removeColumn after this?

Thanks for your time!!

In order to not display a given Column, simply omit its definition from your myColumnDefs array. You can call insertColumn() later if you do want to display it.

Omitting columns from the DataTable's column definition is not the same as excluding fields from the DataSource's fields collection. Have a look at this example. Hopefully it will be helpful.

http://yuiblog.com/sandbox/yui/v270/exa ... _cols.html

Thanks Norman, that worked perfectly for me!

With Gratitude

Luk