Hiding/showing columns outside of visible area empties cell contents

[dmuldiaMember]

I’ve got a grid with more columns than there is horizontal room for, so you have to scroll to see all of them. When I hide some of the rightmost columns and then make them visible again, they appear without any content in the cells. If if then scroll around, left and right, the content reappears in the cell.

It seems like the render function assumes that the column will not be visible because (column count * column width) exceeds the visible horizontal area (even though it actually should be visible, either because of scrolling or because other columns are also invisible, reducing the visible width).

Bug?

$(function ()

{

// prepare the data

var source =

{

datatype: "json",

datafields: [

{ name: 'Id', type: 'int' },

{ name: 'Grouping' },

{ name: 'Subgrouping' },

{ name: 'Segment' },

{ name: 'Subsegment' },

{ name: 'Code' },

{ name: 'Name' }

],

id: 'Id',

url: 'test.txt'

};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#grid1").jqxGrid({

source: dataAdapter,

columns: [

{ text: 'ID', datafield: 'Id', pinned: true, width: 50 },

{ text: 'Name', columntype: 'textbox', datafield: 'Name', width: 250,

validation: function (cell, value)

{

if (value == '')

{

return { result: false, message: "Name can't be empty!" };

}

return true;

}

},

{ text: 'Group', columntype: 'dropdownlist', datafield: 'Grouping', width: 100 },

{ text: 'Sub-group', columntype: 'dropdownlist', datafield: 'Subgrouping', width: 100 },

{ text: 'Segment', columntype: 'dropdownlist', datafield: 'Segment', width: 100 },

{ text: 'Sub-segment', columntype: 'dropdownlist', datafield: 'Subsegment', width: 100 },

{ text: 'Code', columntype: 'textbox', datafield: 'Code', width: 100,

validation: function (cell, value)

{

if (value == '')

{

return { result: false, message: "Code can't be empty!" };

}

return true;

}

}

],

columnsresize: true,

pageable: true,

sortable: true,

autoheight: true,

pagesize: 20,

editable: true,

selectionmode: 'singlecell',

width: 500

});

// Create grid 1 column filters

var grid1cols = [

{ fieldname: 'Id', name: 'ID' },

{ fieldname: 'Grouping', name: 'Group' },

{ fieldname: 'Subgrouping', name: 'Sub-group' },

{ fieldname: 'Segment', name: 'Segment' },

{ fieldname: 'Subsegment', name: 'Sub-segment' },

{ fieldname: 'Code', name: 'Code' },

{ fieldname: 'Name', name: 'Name' }

];

var grid1source = {

localdata: grid1cols,

datatype: 'json'

};

var grid1dataAdapter = new $.jqx.dataAdapter(grid1source);

$("#grid1cols").jqxListBox({

source: grid1dataAdapter,

displayMember: "name",

valueMember: "fieldname",

multiple: true, width: 200, height: 150

});

for (var i = 0; i < grid1cols.length; i++)

{

$("#grid1cols").jqxListBox('selectIndex', i);

}

$("#grid1cols").bind('select', function (event)

{

if (event.args)

{

var item = event.args.item;

if (item)

{

console.log('selected ' + item.value + ' (' + item.label + ')');

$('#grid1').jqxGrid('showcolumn', item.value);

}

}

});

$("#grid1cols").bind('unselect', function (event)

{

if (event.args)

{

var item = event.args.item;

if (item)

{

console.log('unselected ' + item.value + ' (' + item.label + ')');

$('#grid1').jqxGrid('hidecolumn', item.value);

}

}

});

});

test data: http://dl.dropbox.com/u/16503530/test.txt

[Peter StoevKeymaster]

Hi dmuldia,

Thank you for the feedback.

I tested the reported behavior and I confirm that there’s an issue with hiding/showing columns caused by the columns UI virtualization. The issue will be resolved for the next release.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[wwhalenMember]

Hi.. Has this been fixed yet? I am using $(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘id’) and it is not working. Setting the width to 0 does not work either.

[Peter StoevKeymaster]

Hi wwhalen,

Yes, it works. We also have a demo for hiding/showing columns: hideshowcolumns.htm. Note that the Grid must we loaded when you call methods.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts