virtualmode: true, groupable: true,editable: true bug

[tooniceParticipant]

on current row column updated value; display new value,jump other row column display.

<script type=”text/javascript”>
$(document).ready(function () {
var data = `[{
“id”: “1”,
“name”: “Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “370”,
“totalfat”: “16g”,
“protein”: “14g”
,”test”:0
}, {
“id”: 2,
“name”: “Peppermint Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “440”,
“totalfat”: “16g”,
“protein”: “13g”
,”test”:0
}, {
“id”: “3”,
“name”: “Salted Caramel Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “450”,
“totalfat”: “16g”,
“protein”: “13g”
,”test”:1
}, {
“id”: “4”,
“name”: “White Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “420”,
“totalfat”: “16g”,
“protein”: “12g”
,”test”:0
}, {
“id”: “5”,
“name”: “Caffe Americano”,
“type”: “Espresso Beverage”,
“calories”: “15”,
“totalfat”: “0g”,
“protein”: “1g”
,”test”:0
}, {
“id”: “6”,
“name”: “Caffe Latte”,
“type”: “Espresso Beverage”,
“calories”: “190”,
“totalfat”: “7g”,
“protein”: “12g”
,”test”:1
}, {
“id”: “7”,
“name”: “Caffe Mocha”,
“type”: “Espresso Beverage”,
“calories”: “330”,
“totalfat”: “15g”,
“protein”: “13g”
,”test”:0
}, {
“id”: “8”,
“name”: “Cappuccino”,
“type”: “Espresso Beverage”,
“calories”: “120”,
“totalfat”: “4g”,
“protein”: “8g”
,”test”:1
}, {
“id”: “9”,
“name”: “Caramel Brulee Latte”,
“type”: “Espresso Beverage”,
“calories”: “420”,
“totalfat”: “9g”,
“protein”: “8g”
,”test”:0
}, {
“id”: “10”,
“name”: “Caramel Macchiato”,
“type”: “Espresso Beverage”,
“calories”: “240”,
“totalfat”: “11g”,
“protein”: “10g”
,”test”:1
}, {
“id”: “11”,
“name”: “Peppermint Hot Chocolate”,
“type”: “Espresso Beverage”,
“calories”: “440”,
“totalfat”: “10g”,
“protein”: “13g”
,”test”:0
}, {
“id”: “12”,
“name”: “Cinnamon Dolce Latte”,
“type”: “Espresso Beverage”,
“calories”: “260”,
“totalfat”: “6g”,
“protein”: “10g”
,”test”:0
}, {
“id”: “17”,
“name”: “Flavored Latte”,
“type”: “Espresso Beverage”,
“calories”: “250”,
“totalfat”: “6g”,
“protein”: “12g”
,”test”:0
}, {
“id”: “18”,
“name”: “Gingerbread Latte”,
“type”: “Espresso Beverage”,
“calories”: “320”,
“totalfat”: “13g”,
“protein”: “12g”
,”test”:1
}, {
“id”: “19”,
“name”: “White Chocolate Mocha”,
“type”: “Espresso Beverage”,
“calories”: “470”,
“totalfat”: “18g”,
“protein”: “15g”
,”test”:0
}, {
“id”: 20,
“name”: “Skinny Peppermint Mocha”,
“type”: “Espresso Beverage”,
“calories”: 130,
“totalfat”: “15g”,
“protein”: “13g”
,”test”:1
}, {
“id”: “21”,
“name”: “Skinny Flavored Latte”,
“type”: “Espresso Beverage”,
“calories”: “120”,
“totalfat”: “0g”,
“protein”: “12g”
,”test”:0
}, {
“id”: “22”,
“name”: “Pumpkin Spice Latte”,
“type”: “Espresso Beverage”,
“calories”: “380”,
“totalfat”: “13g”,
“protein”: “14g”
,”test”:0
}, {
“id”: “26”,
“name”: “Caramel Brulee Frappuccino Light”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “190”,
“totalfat”: “0g”,
“protein”: “3g”
,”test”:0
}, {
“id”: “27”,
“name”: “Eggnog Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “420”,
“totalfat”: “18g”,
“protein”: “7g”
,”test”:0
}, {
“id”: “28”,
“name”: “Mocha Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “400”,
“totalfat”: “15g”,
“protein”: “5g”
,”test”:0
}, {
“id”: “29”,
“name”: “Tazo Green Tea Creme Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “430”,
“totalfat”: “16g”,
“protein”: “6g”
,”test”:1
}]`;
// prepare the data
data.so
var source =
{
datatype: “json”,
datafields: [
{ name: ‘name’, type: ‘string’ },
{ name: ‘type’, type: ‘string’ },
{ name: ‘calories’, type: ‘int’ },
{ name: ‘totalfat’, type: ‘string’ },
{ name: ‘protein’, type: ‘string’ },
{ name: ‘test’, type: ‘string’ }
],
id: ‘id’,
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

var toThemeProperty = function (className) {
return className + ” ” + className + “-” + JQWidgetsTheme;
}
var groupsrenderer = function (text, group, expanded, data) {
if (data.groupcolumn.datafield === ‘f9’) {
if (/(test: 1)/i.test(text))
return ‘<div class=”‘ + toThemeProperty(‘jqx-grid-groups-row’) + ‘” style=”position: absolute;color:chocolate;”><span>加分项【’ + data.subItems.length + ‘】</span>’;
else if (/(test: 0)/i.test(text))
return ‘<div class=”‘ + toThemeProperty(‘jqx-grid-groups-row’) + ‘” style=”position: absolute;color:red;”><span>扣分项【’ + data.subItems.length + ‘】</span>’;
}
}

$(“#grid”).jqxGrid(
{
width: ‘100%’,
height: 800,
altrows: true,
pageable: true,
virtualmode: true,
editmode: ‘selectedcell’,
selectionmode: ‘multiplerowsadvanced’,
columnsresize: true,
pagesize: 100000,
autoloadstate: true,
pagesizeoptions: [30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90],
showaggregates: true,
showstatusbar: true,
statusbarheight: 22,
enabletooltips: true,
editable: true,
source: dataAdapter,
columnsresize: true,
groupable: true,
groupsrenderer: groupsrenderer,
editable: true,
groups: [‘test’],
rendergridrows: function (args) {
return args.data;
},
columns: [
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
{ text: ‘Calories’, datafield: ‘calories’, width: 180 },
{ text: ‘Total Fat’, datafield: ‘totalfat’, width: 120 },
{ text: ‘Protein’, datafield: ‘protein’, minwidth: 120 },
{ text: ‘test’, datafield: ‘test’, minwidth: 60,hidden:true }
]
});
});

</script>
<div id=”grid”></div>

[MartinParticipant]

Hello toonice,

Could you, please, clarify what is the issue that you have encountered?
Thank you!

Best Regards,
Martin Yotov

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

[tooniceParticipant]

I need to use the grouping function

[MartinParticipant]

Hello toonice,

I have tested the code that you have sent and don’t see any issues.
Also, please note that Grouping in Virtual Mode is not supported because it is an invalid approach. Data which is Loaded on Demand and stored Per Page Only cannot be Grouped.

Best Regards,
Martin Yotov

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

[tooniceParticipant]

Version:Javascript/jQuery jqxgrid 12.1.2

Try to enter any column in the second row of group test: 0, and you will find the problem.
I’ll send the test video to your email and give me your email address.

[MartinParticipant]

Hello toonice,

You can send the video to support@jqwidgets.com

Best Regards,
Martin Yotov

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

[tooniceParticipant]

The video has been sent to the mailbox. Please check it。

[Author]

Posts