[williamtourinhoParticipant]

Hi Petter, here a example to better understand my problem. Thank you for your time.

$(document).ready(function () {
var theme = getTheme();
var data = generatedata(500);
var source =
{
localdata: data,
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter(source);

var cellrenderer = function (row, column, value) {
var html = ‘

‘ + value +’

‘;
return html;
}

$(“#jqxgrid”).jqxGrid(
{
width: 685,
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
columns: [
{ text: ‘Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, cellsrenderer: cellrenderer, datafield: ‘name’, width: 115 },
{
text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220
},
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
{ text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’ }
]
});
$(‘#button’).jqxButton({ height: 25, theme: theme });
$(‘#button’).click(function () {
var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’);
var rowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);

$(“#NameRow_” + rowindex).css(“color”, “blue”);
});
});

select cell, press button and them move the scroll bar to see behavior

[williamtourinhoParticipant]

Ok Peter, Thank you.

[williamtourinhoParticipant]

Hi Peter,
My question is: When the source has, for example, 4 items and the grid height is not auto the lines of the grid after that first 4 rows will not be alternate.
Imagine a grid with:

height: 700px,
altrows: true,
source: mysource // the source have 4 rows

In this situation the “altrows” will work for the first 4 rows/div, but for the rest of the div’s (the div’s without data) the “altrows” property will not work.
When the virtual mode is true, you can set the property “showemptyrow” to true, but when virtual mode is false, the empy rows will not appear.

Thanks for the feedback.

[williamtourinhoParticipant]

Thank you Peter, know it’s working:)

[williamtourinhoParticipant]

Yes, it is 2.5.5. If you see i have the .js files with the link to your files.
The button click update is the only think that doesn’t hapen..

[williamtourinhoParticipant]

The example is not working in my pc Peter..
When i press the button the items in the grid don’t update.. I had made this:

function generatedata(rowscount, hasNullValues) {
// prepare the data
var data = new Array();
if (rowscount == undefined) rowscount = 100;
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”, “Caramel 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”
];

for (var i = 0; i < rowscount; 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["available"] = productindex % 2 == 0;
if (hasNullValues == true) {
if (productindex % 2 != 0) {
var random = Math.floor(Math.random() * rowscount);
row["available"] = i % random == 0 ? null : false;
}
}
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["name"] = row["firstname"] + " " + row["lastname"];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;

var date = new Date();
date.setFullYear(2012, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
date.setHours(0, 0, 0, 0);
row["date"] = date;

data[i] = row;
}

return data;
}

$(document).ready(function () {

var data = generatedata(500);

var source =
{
localdata: data,
datatype: "array"
};

var theme = getTheme();

var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 685,
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
{
text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
},
{ text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
{ text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
{ text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
]
});
$('#button').jqxButton({ height: 25, theme: theme });
$('#button').click(function () {
data = generatedata(500);
$("#jqxgrid").jqxGrid('updatebounddata');
});
});

[williamtourinhoParticipant]

Hi Peter, I am using the 2.5.5 but the behavior is the same.
My MVC example is not the best one but i hope you can understand. In my code, when i press the button the data is updated but the items in the filter not. When i press the button again, the items in the filter are updated…

var data = [];
$(document).ready(function () {

var sourcePerson =
{
datatype: ‘jsonp’,
datafields: [
{ name: ‘Name’, type: ‘string’ }
],
url: ‘@Url.Content(“~/People/GetPerson”)’,
root: ‘Rows’,
data: {
token: “null”,
},
processdata: function (data) {

data.model = JSON.stringify(“william”);
}
};

// Source
var dataPersonAdapter = new $.jqx.dataAdapter(sourcePerson, {
downloadComplete: function (data, status, xhr) {
},
loadComplete: function (data) {
},
loadError: function (xhr, status, error) {
//alert(status + ‘: ‘ + xhr);
}
});

// cell render
var cellsrenderer = function (row, column, value) {
return ‘

‘ + value + ‘

‘;
}

// column render
var columnrenderer = function (value) {
return ‘

‘ + value + ‘

‘;
}

$(“#jqxPersonGrid”).jqxGrid(
{
width: 396,
height: 730,
autoheight: false,
altstart: 0,
source: dataPersonAdapter,
showfilterrow: true,
filterable: true,
theme: ‘mybag’,
altrows: true,
sortable: true,
columns: [
{ text: ‘Name’, filtertype: ‘checkedlist’, createfilterwidget: function(column, columnElement, widget)
{
widget.jqxDropDownList({ dropDownWidth: 130 });
}, datafield: ‘Name’, renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 66 }
]
});

$(“#jqxPersonGrid”).bind(“bindingcomplete”, function (event) {
alert(“data updated”);
});

});

function updateGrid() {
$(‘#jqxPersonGrid’).jqxGrid(‘updatebounddata’);
}

[williamtourinhoParticipant]

I have found the solution. I cant use the “editmode: ‘dblclick’,”. This was creating the problem.

[williamtourinhoParticipant]

Ok Peter Stove, thanks for your feedback again.
I will wait for the next version:)

[williamtourinhoParticipant]

Try unchked some items in the product checklist. Whait for the updatebounddata and you will see that all the items in the check list are selected.
Thanks.
Here is the example:

widgets

$(document).ready(function () {
var theme = ”;

var data = [];
for (var i = 0; i < 10; i++){
var row = {};
row["name"] = "Name " + parseInt(Math.random()* 100);
row["productname"] = "Product " + i;

data[i]= row;
}

function updateData() {
for (var i = 0; i < 10; i++){
var row = {};
data[i]["name"] = "Name " + parseInt(Math.random()* 100);
}
}

var source =
{
localdata: data,
datatype: "array"
};

var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 685,
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
{
text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
}
]
});

function UpdateTimerFunction () {
updateData();
$('#jqxgrid').jqxGrid('updatebounddata');
}

var UpdateTimerIntervalId = setInterval(UpdateTimerFunction, 5000);

});

[williamtourinhoParticipant]

Ok, thanks. I will be waiting for it.
Just one more question, can you say when it wil be available?

[williamtourinhoParticipant]

Thank you very much. You save my day;)

[Author]

Posts