[AdarshaParticipant]

did you see any difference in my code? i used the same sample. even the variables. Hope you did not take pain to see the code i wrote.
its sometime panic that the code works in fidle and not in our page

[AdarshaParticipant]

thx peter,

i wonder wht is the mistake in my code.. the fiddle is not opening for me today since my netwrok is very slow. i can only paste my code below.
Can u pls help, as i have a presentation tomorw to the customer, and if this fly then there will be a commericial licence with your team. we liked your widgets.

I have beloow issues.
1. the aggregates are not displayed
2. when i horizontally scroll the pinned column filter textbox disolve insde
3. the filter does not work

$(document).ready(function (){

// ******** Create anaGrid ********* //

json = ‘[{“columns”:[{“text”:”Fa”,”datafield”:”fa”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”Mkt”,”datafield”:”mkt”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”Typ”,”datafield”:”typ”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”En”,”datafield”:”en”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”Sv”,”datafield”:”sv”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”BGS”,”datafield”:”bgs”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”MC”,”datafield”:”mc”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”Color”,”datafield”:”color”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”Uphols”,”datafield”:”uphols”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”Option”,”datafield”:”option”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”Smess”,”datafield”:”smess”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”OT”,”datafield”:”ot”,”pinned”:”true”,”filtertype”:”textbox”,”filtercondition”:”starts_with”,”width”:”60″,”align”:”center”},{“text”:”2014W25″,”datafield”:”weeks1″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W26″,”datafield”:”weeks2″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W27″,”datafield”:”weeks3″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W28″,”datafield”:”weeks4″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W29″,”datafield”:”weeks5″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W30″,”datafield”:”weeks6″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W31″,”datafield”:”weeks7″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W32″,”datafield”:”weeks8″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W33″,”datafield”:”weeks9″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W34″,”datafield”:”weeks10″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W35″,”datafield”:”weeks11″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W36″,”datafield”:”weeks12″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W37″,”datafield”:”weeks13″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W38″,”datafield”:”weeks14″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W39″,”datafield”:”weeks15″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W40″,”datafield”:”weeks16″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W41″,”datafield”:”weeks17″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W42″,”datafield”:”weeks18″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W43″,”datafield”:”weeks19″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W44″,”datafield”:”weeks20″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W45″,”datafield”:”weeks21″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W46″,”datafield”:”weeks22″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W47″,”datafield”:”weeks23″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W48″,”datafield”:”weeks24″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W49″,”datafield”:”weeks25″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W50″,”datafield”:”weeks26″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W51″,”datafield”:”weeks27″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2014W52″,”datafield”:”weeks28″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”},{“text”:”2015W01″,”datafield”:”weeks29″,”width”:”70″,”align”:”center”,”aggregates”:”[‘+ “‘”+’sum’+”‘”+’]”}]},{“rows” : [{“id”:”1″,”fa”:”22″,”mkt”:”110″,”typ”:”134″,”en”:”07″,”sv”:”12″,”bgs”:”0B1″,”mc”:”10″,”color”:”702″,”uphols”:”3661″,”option”:”000255″,”smess”:”00000″,”ot”:”00″,”weeks1″:”0″,”weeks2″:”0″,”weeks3″:”0″,”weeks4″:”0″,”weeks5″:”0″,”weeks6″:”0″,”weeks7″:”0″,”weeks8″:”0″,”weeks9″:”0″,”weeks10″:”0″,”weeks11″:”0″,”weeks12″:”0″,”weeks13″:”0″,”weeks14″:”0″,”weeks15″:”0″,”weeks16″:”0″,”weeks17″:”0″,”weeks18″:”0″,”weeks19″:”0″,”weeks20″:”0″,”weeks21″:”0″,”weeks22″:”0″,”weeks23″:”1″,”weeks24″:”0″,”weeks25″:”0″,”weeks26″:”0″,”weeks27″:”0″,”weeks28″:”0″,”weeks29″:”0″}]},{“datflds” : [{“name”:”fa”,”type”:”string”},{“name”:”mkt”,”type”:”string”},{“name”:”typ”,”type”:”string”},{“name”:”en”,”type”:”string”},{“name”:”sv”,”type”:”string”},{“name”:”bgs”,”type”:”string”},{“name”:”mc”,”type”:”string”},{“name”:”color”,”type”:”string”},{“name”:”uphols”,”type”:”string”},{“name”:”option”,”type”:”string”},{“name”:”smess”,”type”:”string”},{“name”:”ot”,”type”:”string”},{“name”:”weeks1″,”type”:”string”},{“name”:”weeks2″,”type”:”string”},{“name”:”weeks3″,”type”:”string”},{“name”:”weeks4″,”type”:”string”},{“name”:”weeks5″,”type”:”string”},{“name”:”weeks6″,”type”:”string”},{“name”:”weeks7″,”type”:”string”},{“name”:”weeks8″,”type”:”string”},{“name”:”weeks9″,”type”:”string”},{“name”:”weeks10″,”type”:”string”},{“name”:”weeks11″,”type”:”string”},{“name”:”weeks12″,”type”:”string”},{“name”:”weeks13″,”type”:”string”},{“name”:”weeks14″,”type”:”string”},{“name”:”weeks15″,”type”:”string”},{“name”:”weeks16″,”type”:”string”},{“name”:”weeks17″,”type”:”string”},{“name”:”weeks18″,”type”:”string”},{“name”:”weeks19″,”type”:”string”},{“name”:”weeks20″,”type”:”string”},{“name”:”weeks21″,”type”:”string”},{“name”:”weeks22″,”type”:”string”},{“name”:”weeks23″,”type”:”string”},{“name”:”weeks24″,”type”:”string”},{“name”:”weeks25″,”type”:”string”},{“name”:”weeks26″,”type”:”string”},{“name”:”weeks27″,”type”:”string”},{“name”:”weeks28″,”type”:”string”},{“name”:”weeks29″,”type”:”string”}]},{“listsource”:[{“label”:”Fa”,”value”:”fa”,”checked”:”true”},{“label”:”Mkt”,”value”:”mkt”,”checked”:”true”},{“label”:”Typ”,”value”:”typ”,”checked”:”true”},{“label”:”En”,”value”:”en”,”checked”:”true”},{“label”:”Sv”,”value”:”sv”,”checked”:”true”},{“label”:”BGS”,”value”:”bgs”,”checked”:”true”},{“label”:”MC”,”value”:”mc”,”checked”:”true”},{“label”:”Color”,”value”:”color”,”checked”:”true”},{“label”:”Uphols”,”value”:”uphols”,”checked”:”true”},{“label”:”Option”,”value”:”option”,”checked”:”true”},{“label”:”Smess”,”value”:”smess”,”checked”:”true”},{“label”:”OT”,”value”:”ot”,”checked”:”true”}]}]’;

var obj = jQuery.parseJSON(json);
var columns = obj[0].columns;

var rows = obj[1].rows;

var datfld = obj[2].datflds;
var listsource = obj[3].listsource

var source =
{
totalrecords: 100,
datatype: “json”,
localdata: {}
};

var getdata = function (startindex, endindex) {

var data = {};
for (var i = startindex; i < endindex; i++) {
data[i] = rows[i];
}
return data;
}

var rendergridrows = function (params) {
var data = getdata(params.startindex, params.endindex);
return data;
}
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#anaGrid”).jqxGrid({
width: ‘90%’,
height: 600,
source: dataAdapter,
filterable: true,
showfilterrow:true,
virtualmode: true,
rendergridrows: rendergridrows,
showstatusbar: true,
statusbarheight: 50,
showaggregates:true,
columns:columns
});
});

[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);
}
});
});

[AdarshaParticipant]

perfect.. can u pls have a look here

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

[AdarshaParticipant]

Thanks Peter

I know how to pin the columns. I wonder dow do i create the coulumns dynamically according to my selecttion. MY selection may result in 10 columns of 50 columns..

[AdarshaParticipant]

perfect.. thanks !

don you think it is good to have a property to handle this scenario ?

[AdarshaParticipant]

One small issue. When i issue ‘getrows’ I get empty rows as well. Is thr any way to filter empty row and select only those rows which has data while issuing ‘getrow’. If yes, it will avaoid unnecessary loop if i have 1000 rows and i have only 5-10 rows with data.

[AdarshaParticipant]

worked ! thanks !

[AdarshaParticipant]

thanks !

[AdarshaParticipant]

i’m trying as below.. does not work..

http://jsfiddle.net/#&togetherjs=hicsNR57eI

[AdarshaParticipant]

okey.. i did it.. but i could not get the check boxes inside.. lemme relook one more time..

[AdarshaParticipant]

Thanks Dimitar.. i was wondering how would same class name help.. u cleared it !!

[AdarshaParticipant]

am sorry i did not understand how to send the code in fiddle !! lemme expand my issue

Step 1: Create a combobox to select the items
var dataAdapter = new $.jqx.dataAdapter(source);
// Create a jqxDropDownList
$(“#jqxlibrarylist”).jqxComboBox({
placeHolder: “Select libraries..”,
theme: ‘arctic’,
source: dataAdapter,
displayMember: “cdsid”,
valueMember: “name”,
multiSelect:true,
autoDropDownHeight: true,
width: 250
});

Step 2. When i select the items, their values are displayed next to the combobox
var displayNames = function(){
var items = $(“#jqxlibrarylist”).jqxComboBox(‘getSelectedItems’);
if (items.length>0){var log = “Name: “;}
else{var log = ”;}

for (var i = 0; i < items.length; i++) {
log += items[i].value;
if (i < items.length – 1) {
log += ‘, ‘;
}
}
$(“#selectionlog”).text(log);
}

Step 3: Only three items are allowed to select. Once 4th item is selected then the warning window should appear
$(“#jqxlibrarylist”).on(‘change’, function (event) {
var items = $(“#jqxlibrarylist”).jqxComboBox(‘getSelectedItems’);

if (items.length <= 3){
displayNames ();
}else
{
for (var i = 0; i < items.length; i++)
{
var cds = items[i].label;
}

function createElements() {
$(‘#eventWindow’).jqxWindow({
maxHeight: 150,
maxWidth: 280,
minHeight: 30,
minWidth: 250,
height: 120,
width: 270,
/*resizable: false,*/
isModal: true,
/*modalOpacity: 0.3,*/
okButton: $(‘#ok’),
initContent: function () {
$(‘#ok’).jqxButton({ width: ’65px’ });
$(‘#ok’).focus();
}
});
};
createElements();
document.getElementById(“errmess”).innerText =’Only 3 libraries can be selected. “Ok” to close this dialog box’;
$(“warnwindow”).css(‘visibility’, ‘visible’);
$(“#jqxlibrarylist”).jqxComboBox(‘unselectItem’, cds);
};
});

HTML For this

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”css/jqx.base.css” type=”text/css”>
<link rel=”stylesheet” type=”text/css” href=”css/styles/jqx.arctic.css”>
<link rel=”stylesheet” type=”text/css” href=”css/styles/jqx.fresh.css”>
</head>
<body class=”default”>
<div id=”content-wrapper”>
<div id=’jqxWidget’>
<div id=’jqxlibrarylist’></div>
<div id=”selectionlog”></div>
</div>
</body>
</html>

[AdarshaParticipant]

Thanks Dimitar. it worked!!!

[AdarshaParticipant]

can any one please help…:(

[Author]

Posts