show/hide issue !!

[AdarshaParticipant]

Hi,

i have jqxGrid with virtualmode: true and rendergridrows: rendergridrows,

I tried to show/hide as below
$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value); OR
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);

Looks like Show/Hide does not work when grid is in virtualmode:true; is it so? if yes, how can i implement this concept? what is the alternative.

[Peter StoevKeymaster]

Hi Adarsha,

Sorry, but I think the issue is not on our side. Example: http://jsfiddle.net/5d44wvje/

Regards,
Peter

[AdarshaParticipant]

perfect.. can u pls have a look here

http://jsfiddle.net/5d44wvje/#&togetherjs=knVqxbm8Vk

[AdarshaParticipant]

am not sure whether u saw my code or not.. but the example you shown is something that show/hide is happening while grid is initialized.

But i have a show/hide button where the grid is at first shown with all the columns and then i try to show/hide. thats the difference

below is the code..

$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
// generate sample data.
var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row[“id”] = i;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;
data[i] = row;
}
return data;
}
var source =
{
datatype: “array”,
localdata: {},
totalrecords: 1000000
};
var alldata=generatedata(0, 999999);

var generatedata2 = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {
data[i] = alldata[i];
}
return data;
}

// load virtual data.
var rendergridrows = function (params) {
var data = generatedata2(params.startindex, params.endindex);
return data;
}

/* // load virtual data.
var rendergridrows = function (params) {
var data = generatedata2(params.startindex, params.endindex);
return data;
}*/
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 500,
source: dataAdapter,
filterable: true,
showfilterrow:true,
virtualmode: true,
rendergridrows: rendergridrows,
columns: [
{ text: ‘Id’, datafield: ‘id’, width: 100,pinned:true },
{ text: ‘First Name’, datafield: ‘firstname’, pinned:true, width: 120 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 120 },
{ text: ‘Product’, datafield: ‘productname’, width: 180 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’ },
{ text: ‘Unit Price’, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, datafield: ‘total’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});
var listSource = [
{ label: ‘First Name’, value: ‘firstname’, checked: true },
{ label : ‘Last Name’, value: ‘lastname’, checked: true},
{ label : ‘Product’, value: ‘productname’, checked: true},
{ label : ‘Quantity’, value: ‘quantity’, checked: true},
{ label : ‘Unit Price’, value: ‘price’, checked: true}

];

$(“#showhide”).jqxListBox({ source: listSource, height:500, width: 175, checkboxes: true });

$(“#showhide”).on(‘checkChange’, function (event) {
$(“#jqxgrid”).jqxGrid(‘beginupdate’);

if (event.args.checked) {
$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);
}
});
});

[Peter StoevKeymaster]

Hi Adarsha,

It does not matter whether it is on button click or not. It matters that you missed to call “endupdate” after calling “beginupdate” so your Grid is in “update” mode.

Best Regards,
Peter Stoev

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

[Author]

Posts