jQWidgets Forums

Tagged: custom, editor, endcelledit, grid, initeditor, jqxgrid, rule, validation

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 11 years ago.

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

Author

Issues when using initEditor and validation together Posts
May 18, 2014 at 7:22 am Issues when using initEditor and validation together #54583

deepak_chaurasia
Participant

Hi Team,
I am calling endcelledit from initeditor of a cell and i have applied validation rule on the same. Issue that i’m facing is that when control is going inside initeditor it is working fine for the first time , But if some validation failure has happened and if i’m invoking 2nd time initeditor , at that moment i’m getting editor as undefined,
Please clarify why this is happening?

May 19, 2014 at 5:28 am Issues when using initEditor and validation together #54597

Dimitar
Participant

Hello deepak_chaurasia,

Please post an example demonstrating the issue (preferably at JSFiddle), which we may test to determine why it occurs.

Best Regards,
Dimitar

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

May 21, 2014 at 7:27 am Issues when using initEditor and validation together #54737

deepak_chaurasia
Participant

Hi ,
Please find the sample code for the same:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In order to enter in edit mode, select a grid cell and start typing, “Click” or press the “F2” key. You
can also navigate through the cells using the keyboard arrows or with the “Tab” and “Shift + Tab” key combinations. To cancel the cell editing, press the “Esc” key. To save
the changes press the “Enter” key or select another Grid cell. Pressing the ‘Space’ key when a checkbox cell is selected will toggle the check state.</title>
<link rel=”stylesheet” href=”js/externallibs/jqxwidgets_upgrade/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/externallibs/jquery-1.11.2.min.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxcore.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxdata.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxmenu.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxgrid.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxlistbox.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxcalendar.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”js/externallibs/jqxwidgets_upgrade/globalization/globalize.js”></script>
<script type=”text/javascript” src=”js/externallibs/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘date’, type: ‘date’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
editable: true,
enabletooltips: true,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{
text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 110, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘d’,
validation: function (cell, value) {
if (value == “”)
return true;
var year = value.getFullYear();
if (year >= 2015) {
return { result: false, message: “Ship Date should be before 1/1/2015” };
}
return true;
},
initeditor : function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
editor.jqxDateTimeInput({showFooter:true});
editor.unbind(‘change’).bind(‘change’,function(){
$(“#jqxgrid”).jqxGrid(‘endcelledit’, row, this.datafield, false, true ,false);
})
}
},
{ text: ‘Price’, datafield: ‘price’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value < 0 || value > 15) {
return { result: false, message: “Price should be in the 0-15 interval” };
}
return true;
},
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
},
initeditor : function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
editor.unbind(‘change’).bind(‘change’,function(){
$(“#jqxgrid”).jqxGrid(‘endcelledit’, row, this.datafield, false, true ,false);
})
}
}
]
});

});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”font-size: 12px; font-family: Verdana, Geneva, ‘DejaVu Sans’, sans-serif; margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
</div>
</body>
</html>

In htis example if i change Ship Date. it is binded dynamically to grid , but if i change date to some value which is invalid (in this case date more than 1/1/2015). error message is getting displayed but when i again click on that same cell , i get “This.editcell is undefined” error in console.

Please see into this issue

May 21, 2014 at 10:07 am Issues when using initEditor and validation together #54747

Dimitar
Participant

Hi deepak_chaurasia,

This issue occurs because of the call to endcelledit in initeditor. You should avoid this and implement a different solution.

Best Regards,
Dimitar

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

May 22, 2014 at 12:59 pm Issues when using initEditor and validation together #54805

deepak_chaurasia
Participant

Hi,
Currently I am doing this , but as you said i should avoid it , is there any work around for this , my requirement is that without clicking anywhere else on grid i should be able to bind data to grid cell. Please provide any solution to it.

May 23, 2014 at 8:10 am Issues when using initEditor and validation together #54824

Dimitar
Participant

Hi deepak_chaurasia,

I am not sure I understand – do you wish to refresh only a particular cell? If you wish to do it for the whole grid, it can be achieved with methods such as refresh and updatebounddata.

For a single cell you may try calling begincelledit and endcelledit consecutively but I am not sure if this will suit your purposes.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.