jQWidgets Forums

This topic contains 8 replies, has 2 voices, and was last updated by toonice 4 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

grid columntype is checkbox value change no first trigger cellbeginedit Posts
January 22, 2021 at 3:33 am grid columntype is checkbox value change no first trigger cellbeginedit #114274

toonice
Participant

grid columntype is checkbox , value change no first trigger cellbeginedit,cellendedit event;but for first trigger updaterow event;
can change for trigger cellbeginedit->cellendedit->updaterow event order ?
Otherwise get not to edit cell name.

version 11.0.1

<body>
<script>
$(document).ready(function () {
var editCellName = “”;
var jqxGridsource =
{
type: “post”,
datatype: “json”,
contentType: “text/json”,
datafields: [
{ name: ‘id’, type: ‘string’ }
, { name: ‘f1’, type: ‘string’ }
, { name: ‘f2’, type: ‘bool’ }

],
url: ‘/EngineerManageQRCodeWCF/EngineerManageQRCodeWCF.svc/DisplayUser’,
formatdata: function (data) {
},
beforeprocessing: function (data) {
reuslt = JSON.parse(data.d);
return reuslt;
},
addrow: function (rowid, rowdata, position, commit) {
},
updaterow: function (rowid, rowdata, commit) {

//when ceckbox change value editCellName is null
if (editCellName === “f2”) {
updaterow();
}
}
};
var jqxgriddataAdapter = new $.jqx.dataAdapter(jqxGridsource);

$(“#jqxGrid”).jqxGrid({
//rowdetails: true,
width: ‘100%’,
height: ‘100%’,
altrows: true,
pageable: true,
source: jqxgriddataAdapter,
theme: JQWidgetsTheme,
//localization:”zh-CN”,
columnsresize: true,
selectionmode: ‘multiplecellsadvanced’,
pagesize: 30,
autoloadstate: true
pagesizeoptions: [30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90],
pagerrenderer: pagerrenderer,
virtualmode: true,
showtoolbar: true,
editable: true,
enabletooltips: true,
rowsheight: 86
, rendergridrows: function (args) {
return args.data;
},
columns: [

{
datafield: “id”, text: “id”, width: 250, editable: true, cellsalign: ‘left’, align: ‘center’
},

{
datafield: “f1”, text: “username”, width: 250, editable: true, cellsalign: ‘left’, align: ‘center’
}
,
{
datafield: “f2”, text: “test”, editable: true, width: 60, cellsalign: ‘center’, align: ‘center’, columntype: ‘checkbox’
}
]

});
$(“#jqxGrid”).on(‘cellbeginedit’, function (event) {
oldvalue = event.args.value;

});

$(“#jqxGrid”).on(‘cellendedit’, function (event) {
editCellName = event.args.datafield;
});
});

</script>
<div id=”jqxGrid” style=”margin: 0;”>
</div>
</body>

January 22, 2021 at 10:32 am grid columntype is checkbox value change no first trigger cellbeginedit #114278
Yavor Dashev
Participant
Hi, toonice

I was unable to recreate the problem with not triggering cellbeginedit,cellendedit,cellvaluechanged events with the code snippet you have shared in first post.
However the problem in the code you shared is in the ‘updaterow’ function.When the EditCellName is ‘f2’ you call the ‘updaterow’ function again and this is the reason why the checkbox does not change its value. Instead in the ‘updaterow’ function should look like this:
```
 updaterow: function (rowid, rowdata, commit) {
//when ceckbox change value editCellName is null
if (editCellName === ‘f2’) {
commit(true)
}
}
```
Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
jQWidgets Team
https://www.jqwidgets.com/
January 25, 2021 at 3:23 am grid columntype is checkbox value change no first trigger cellbeginedit #114286

toonice
Participant

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<script type=”text/javascript” src=”/JQuery/BasicJavaScript.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets.js”></script>
<script type=”text/javascript” src=”/JQuery/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/JQuery/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/JQuery/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/JQuery/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”/JQuery/jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxloader.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxfileupload.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”/JQuery/JQWidgets/jqxgrid.sort.js”></script>

<title></title>
<script type=”text/javascript”>
$(document).ready(function () {
var editCellName = “”;
var oldvalue = “”;
var _value = “”;
var source =
{
localdata: [{
“id”: “1”,
“name”: “Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “370”,
“totalfat”: “16g”,
“protein”: “14g”,
“test”: true
}, {
“id”: 2,
“name”: “Peppermint Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “440”,
“totalfat”: “16g”,
“protein”: “13g”,
“test”: false
}, {
“id”: “3”,
“name”: “Salted Caramel Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “450”,
“totalfat”: “16g”,
“protein”: “13g”,
“test”: false
}, {
“id”: “4”,
“name”: “White Hot Chocolate”,
“type”: “Chocolate Beverage”,
“calories”: “420”,
“totalfat”: “16g”,
“protein”: “12g”,
“test”: false
}, {
“id”: “5”,
“name”: “Caffe Americano”,
“type”: “Espresso Beverage”,
“calories”: “15”,
“totalfat”: “0g”,
“protein”: “1g”,
“test”: false
}, {
“id”: “6”,
“name”: “Caffe Latte”,
“type”: “Espresso Beverage”,
“calories”: “190”,
“totalfat”: “7g”,
“protein”: “12g”,
“test”: false
}, {
“id”: “7”,
“name”: “Caffe Mocha”,
“type”: “Espresso Beverage”,
“calories”: “330”,
“totalfat”: “15g”,
“protein”: “13g”,
“test”: false
}, {
“id”: “8”,
“name”: “Cappuccino”,
“type”: “Espresso Beverage”,
“calories”: “120”,
“totalfat”: “4g”,
“protein”: “8g”,
“test”: false
}, {
“id”: “9”,
“name”: “Caramel Brulee Latte”,
“type”: “Espresso Beverage”,
“calories”: “420”,
“totalfat”: “9g”,
“protein”: “8g”,
“test”: false
}, {
“id”: “10”,
“name”: “Caramel Macchiato”,
“type”: “Espresso Beverage”,
“calories”: “240”,
“totalfat”: “11g”,
“protein”: “10g”,
“test”: false
}, {
“id”: “11”,
“name”: “Peppermint Hot Chocolate”,
“type”: “Espresso Beverage”,
“calories”: “440”,
“totalfat”: “10g”,
“protein”: “13g”,
“test”: false
}, {
“id”: “12”,
“name”: “Cinnamon Dolce Latte”,
“type”: “Espresso Beverage”,
“calories”: “260”,
“totalfat”: “6g”,
“protein”: “10g”,
“test”: false
}, {
“id”: “13”,
“name”: “Eggnog Latte”,
“type”: “Espresso Beverage”,
“calories”: “460”,
“totalfat”: “16g”,
“protein”: “13g”,
“test”: false
}, {
“id”: “14”,
“name”: “Espresso”,
“type”: “Espresso Beverage”,
“calories”: “5”,
“totalfat”: “1g”,
“protein”: “1g”,
“test”: false
}, {
“id”: “15”,
“name”: “Espresso Con Panna”,
“type”: “Espresso Beverage”,
“calories”: “30”,
“totalfat”: “1g”,
“protein”: “0g”,
“test”: false
}, {
“id”: “16”,
“name”: “Espresso Macchiato”,
“type”: “Espresso Beverage”,
“calories”: “100”,
“totalfat”: “1g”,
“protein”: “0g”,
“test”: false
}, {
“id”: “17”,
“name”: “Flavored Latte”,
“type”: “Espresso Beverage”,
“calories”: “250”,
“totalfat”: “6g”,
“protein”: “12g”,
“test”: false
}, {
“id”: “18”,
“name”: “Gingerbread Latte”,
“type”: “Espresso Beverage”,
“calories”: “320”,
“totalfat”: “13g”,
“protein”: “12g”,
“test”: false
}, {
“id”: “19”,
“name”: “White Chocolate Mocha”,
“type”: “Espresso Beverage”,
“calories”: “470”,
“totalfat”: “18g”,
“protein”: “15g”,
“test”: false
}, {
“id”: 20,
“name”: “Skinny Peppermint Mocha”,
“type”: “Espresso Beverage”,
“calories”: 130,
“totalfat”: “15g”,
“protein”: “13g”,
“test”: false
}, {
“id”: “21”,
“name”: “Skinny Flavored Latte”,
“type”: “Espresso Beverage”,
“calories”: “120”,
“totalfat”: “0g”,
“protein”: “12g”,
“test”: true
}, {
“id”: “22”,
“name”: “Pumpkin Spice Latte”,
“type”: “Espresso Beverage”,
“calories”: “380”,
“totalfat”: “13g”,
“protein”: “14g”,
“test”: false
}, {
“id”: “23”,
“name”: “Caffe Vanilla Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “310”,
“totalfat”: “3g”,
“protein”: “3g”,
“test”: false
}, {
“id”: “24”,
“name”: “Caffe Vanilla Frappuccino Light”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “180”,
“totalfat”: “0g”,
“protein”: “3g”,
“test”: false
}, {
“id”: “25”,
“name”: “Caramel Brulee Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “410”,
“totalfat”: “13g”,
“protein”: “4g”,
“test”: false
}, {
“id”: “26”,
“name”: “Caramel Brulee Frappuccino Light”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “190”,
“totalfat”: “0g”,
“protein”: “3g”,
“test”: true
}, {
“id”: “27”,
“name”: “Eggnog Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “420”,
“totalfat”: “18g”,
“protein”: “7g”,
“test”: true
}, {
“id”: “28”,
“name”: “Mocha Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “400”,
“totalfat”: “15g”,
“protein”: “5g”,
“test”: false
}, {
“id”: “29”,
“name”: “Tazo Green Tea Creme Frappuccino”,
“type”: “Frappuccino Blended Beverage”,
“calories”: “430”,
“totalfat”: “16g”,
“protein”: “6g”,
“test”: false
}],
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: ‘bool’ }
],
id: ‘id’
, updaterow: function (rowid, rowdata, commit) {
//when chexbox change vlaue not get edit cell name,is null.
//first trigger updaterow,after trigger cellbeginedit,cellendedit,current get not edit cell name
//trigger event order 1
console.log(“edit cell name=” + editCellName + ” value=” + _value);
editCellName = “”;

}
}
;
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#grid”).jqxGrid(
{
width: 900,
source: dataAdapter,
columnsresize: true,
editable: true,
columns: [
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
{ text: ‘Calories’, datafield: ‘calories’, width: 60 },
{ text: ‘Total Fat’, datafield: ‘totalfat’, width: 60 },
{ text: ‘Protein’, datafield: ‘protein’, width: 60 },
{ text: ‘test’, datafield: ‘test’, minwidth: 60, columntype:’checkbox’}
]
});

$(“#grid”).on(‘cellbeginedit’, function (event) {
//trigger event order 2
oldvalue = event.args.value;
});

$(“#grid”).on(‘cellendedit’, function (event) {
//trigger event order 3
console.log(event.args);
editCellName = event.args.datafield;
_value=event.args.value

});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”grid”>
</div>
</div>
</body>
</html>

January 25, 2021 at 8:30 am grid columntype is checkbox value change no first trigger cellbeginedit #114288
Yavor Dashev
Participant
Hi toonice,

From the code you shared I see that you want to get the id of the cell and its value when its clicked.
So I would suggest to use the arguments you pass in the ‘updaterow’ function.
Here is the code changes in the ‘update’ row function:
```
 updaterow: function (rowid, rowdata, commite ) {
//when chexbox change vlaue not get edit cell name,is null.
//first trigger updaterow,after trigger cellbeginedit,cellendedit,current get not edit cell name
//trigger event order 1
editCellName = rowid;
_value = rowdata;
//console.log("edit cell name=" + editCellName + " value=" + _value);
console.log('This is the value of the cell',_value);
console.log('This is the id of the cell',editCellName);
editCellName = "";
}
```
Best regards,
Yavor Dashev
jQWidgets Team
https://www.jqwidgets.com/
January 25, 2021 at 11:15 am grid columntype is checkbox value change no first trigger cellbeginedit #114295

toonice
Participant

I want to get which column has been modified

January 25, 2021 at 11:17 am grid columntype is checkbox value change no first trigger cellbeginedit #114296

toonice
Participant

You rowid can only get the line number, not the current modified column name

January 25, 2021 at 1:16 pm grid columntype is checkbox value change no first trigger cellbeginedit #114301
Yavor Dashev
Participant
Hi toonice,

If you want to get the modified column name you can do it for example like this:
```
$("#grid").on("cellendedit", function (event) {
    editCellName = event.args.datafield;
    _value=event.args.value
    
    editedDataField = event.args.datafield;
    console.log('This is the column that has been modified:', editedDataField)

});
```
Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
jQWidgets Team
https://www.jqwidgets.com/
January 25, 2021 at 1:37 pm grid columntype is checkbox value change no first trigger cellbeginedit #114305

toonice
Participant

You still don’t understand what I mean. Trigger updaterow first and then trigger cellendedit.

January 25, 2021 at 1:40 pm grid columntype is checkbox value change no first trigger cellbeginedit #114306

toonice
Participant

checkbox value change trigger sequence is updaterow->cellbeginedit->cellendedit,instead of cellbeginedit->cellendedit->updaterow 。
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.