in jqxGrid before validation change a cell value

[mohitParticipant]

Hi All
I am having a JQXGrid and in that many celll are there .
Cell should accept only number for that I need to do validation , now My probelms is ..

when i enter digits with any comma(“,”) it should first convert it into Dot(“.”) then do the validation.

For example if user entes 123,45 , it should convert it to 123.45 before validation only so that i can do my validation.

I am doing hte same thing in validation method , first taking the value then replacing comma with Dot and trying to set in the same column,,but its not working ..please help me out here..this probelm is for Europe where they enter commas with digits and expect it to convert into dot by itself ..

My code is below.

var column = cell.column;
var row = cell.row;

var selectedItem = $(‘#jqxTabs’).jqxTabs(‘selectedItem’);
var locationTab = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedItem);
var index =$(“#”+locationTab+”Grid”).jqxGrid(‘getcolumnindex’, column);
var rowIndex = $(“#”+locationTab+”Grid”).jqxGrid(‘getrowid’, row);

if(value.indexOf(“,”) >= 0){

value=value.replace(“,”,”.”);
//$(“#”+locationTab+”Grid”).jqxGrid(‘setcellvalue’, row, column, value);
alert(row+”-“+this.datafield+”-“+value+”-“+column);
$(“#”+locationTab+”Grid”).jqxGrid(‘setcellvalue’, row, column, value);// its not setting the value to the edited cell.

}

[mohitParticipant]

any solutions guys

[DimitarParticipant]

Hello mohit,

We will need a larger code sample to determine the source of the issue, including your grid initialization code, column settings and validation. Please format your code before posting by selecting it and clicking the code button in the toolbar.

Best Regards,
Dimitar

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

[mohitParticipant]

var cellrender = function (row, column,value,data ) {
//start:This If condition is used to set blank for cell if value is 0
if(value==0 || value == “”)
{
return ‘<div></div>’;
}
else
{
return ‘<div style=”position: relative; margin:3px; text-align: right;font-family: Arial;font-size: 12px;”>’ +value.toFixed(2)+ ‘</div>’;
}

//End If condition for set blank value

}

var colStr = $.trim(colNamesDataArray[i]);

if(i > actualMonths)
{
futureBudgetColumns.push(colStr);
gridColumns.push({ text: colNamesArray[i], dataField:colStr , align : ‘center’ , cellsalign:’right’, width: 60, filterable: false , cellsformat: ‘F2’,cellsrenderer: cellrender,rendered: function (element) {
$(element).parent().jqxTooltip({ position: ‘mouse’, content: $(element).text()+’ P HC’ });
}
,aggregates : [ ‘sum’ ],
aggregatesrenderer: function (aggregates, column, element, summaryData) {
var renderstring = “<div class=’jqx-widget-content jqx-widget-content-” + ‘theme’ + “‘ style=’float: left; width: 100%; height: 100%;background-color:#E5E5E5’>”;
$.each(aggregates, function (key, value) {
renderstring += ‘<div style=”position: relative; margin:3px; text-align: right;font-family: Arial;font-size: 12px;”> ‘ + value + ‘</div>’;
});
renderstring += “</div>”;
return renderstring;

},
//Code to validate planning cell values
// e.g For CR Projects for planningType == ‘HeadCount’ value cannot be ‘< 0’ & ‘> 100’
// e.g For CR Projects for planningType == ‘Hours’ value cannot be greater then ((Monthly Hours Value) * 100)
validation: function (cell, value) {
// alert(value);

var column = cell.column;
var row = cell.row;
valueToConvert=value;

var a = value.split(‘,’);
if (a.length > 2) {
return {result:false,message:”Enter number in correct format”};
}else{
if(value.indexOf(“,”) >= 0){

valueToConvert=valueToConvert.replace(“,”,”.”);
return true;

}
}

if(isNaN(value) ){
return {result:false,message:”Enter only number”};
}

if((pdxType != ‘PD3’ || pdxType != ‘PD4’ || pdxType != ‘PD4_Z’)){
if ((value < 0 || value > 100) && (planningType == ‘HeadCount’)) {
return { result: false, message: “Value should be within 0 to 100 interval” };
}
else{
var Regex = /^\d*(\.\d{0})?\d{0,8}$/;
if(Regex.test(value)){

return true;
}else{
return { result: false, message: “Decimal values should not exceed 8 digits” };
}
}
if(planningType == ‘Hours’){
var column = cell.column;
var selectedItem = $(‘#jqxTabs’).jqxTabs(‘selectedItem’);
var locationTab = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedItem);
var index =$(“#”+locationTab+”Grid”).jqxGrid(‘getcolumnindex’, column);

locationHrs=locationTab.substring(0,3).toUpperCase();
monthlyHrsArray=monthlyHrLocArray[locationHrs];
var maxValue = parseFloat(monthlyHrsArray[index-8]) * 100;

if (value > maxValue || value < -maxValue) {
return { result: false, message: “Value should be less then “+maxValue};
};

}
} else {
//Code to validate planning cell values
// e.g For Non CR Projects for planningType == ‘HeadCount’ value cannot be ‘< -100’ & ‘> 100’
// e.g For Non CR Projects for planningType == ‘Hours’ value cannot be greater then ((Monthly Hours Value) * 100)
if ((value < -100 || value > 100) && (planningType == ‘HeadCount’)) {
return { result: false, message: “Value should be within -100 to 100 interval” };
}else{
var Regex = /^\d*(\.\d{0})?\d{0,8}$/;
if(Regex.test(value)){

return true;
}else{
return { result: false, message: “Decimal values should not exceed 8 digits” };
}
}

if(planningType == ‘Hours’ ){ var column = cell.column;
var selectedItem = $(‘#jqxTabs’).jqxTabs(‘selectedItem’);
var locationTab = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedItem);
var index =$(“#”+locationTab+”Grid”).jqxGrid(‘getcolumnindex’, column);

locationHrs=locationTab.substring(0,3).toUpperCase();
monthlyHrsArray=monthlyHrLocArray[locationHrs];
var maxValue = parseFloat(monthlyHrsArray[index-8]) * 100;

if (value > maxValue || value < -maxValue) {
return { result: false, message: “Value should be less then “+maxValue};
};
}
}
return true;
}
});

}
else
{

if($.trim(colNamesDataArray[i]).length > 6)
{
pastActualColumns.push(colStr);
gridColumns.push({ text: colNamesArray[i], dataField:colStr , align : ‘center’ , cellsalign:’right’, width: 60, editable:false,cellclassname: ‘readonlyclass’, filterable: false , cellsformat: ‘F2’,cellsrenderer: cellrender,rendered: function (element) {
$(element).parent().jqxTooltip({ position: ‘mouse’, content: $(element).text()+’ HC’ });
}
,aggregates : [ ‘sum’ ],
aggregatesrenderer: function (aggregates, column, element, summaryData) {
var renderstring = “<div class=’jqx-widget-content jqx-widget-content-” + ‘theme’ + “‘ style=’float: left; width: 100%; height: 100%;background-color:#E5E5E5’>”;
$.each(aggregates, function (key, value) {
renderstring += ‘<div style=”position: relative; margin:3px; text-align: right;font-family: Arial;font-size: 12px;”> ‘ + value + ‘</div>’;
});
renderstring += “</div>”;
return renderstring;

},
//Code to validate planning cell values
// e.g For CR Projects for planningType == ‘HeadCount’ value cannot be ‘< 0’ & ‘> 100’
// e.g For CR Projects for planningType == ‘Hours’ value cannot be greater then ((Monthly Hours Value) * 100)
validation: function (cell, value) {

var column = cell.column;
var row = cell.row;
valueToConvert=value;

var a = value.split(‘,’);
if (a.length > 2) {
return {result:false,message:”Enter number in correct format”};
}else{
if(value.indexOf(“,”) >= 0){

valueToConvert=valueToConvert.replace(“,”,”.”);
return true;

}
}

if(value == 0){
return {result:false,message:”Enter only number”};
}

if((pdxType != ‘PD3’ || pdxType != ‘PD4’ || pdxType != ‘PD4_Z’)){
if ((value < 0 || value > 100) && (planningType == ‘HeadCount’)) {
return { result: false, message: “Value should be within 0 to 100 interval” };
}else{
var Regex = /^\d*(\.\d{0})?\d{0,8}$/;
if(Regex.test(value)){

return true;
}else{
return { result: false, message: “Decimal values should not exceed 8 digits” };
}
}
if(planningType == ‘Hours’){ var column = cell.column;
var selectedItem = $(‘#jqxTabs’).jqxTabs(‘selectedItem’);
var locationTab = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedItem);
var index =$(“#”+locationTab+”Grid”).jqxGrid(‘getcolumnindex’, column);

locationHrs=locationTab.substring(0,3).toUpperCase();
monthlyHrsArray=monthlyHrLocArray[locationHrs];
var maxValue = parseFloat(monthlyHrsArray[index-8]) * 100;

if (value > maxValue || value < -maxValue) {
return { result: false, message: “Value should be less then “+maxValue};
};

}
} else {
//Code to validate planning cell values
// e.g For Non CR Projects for planningType == ‘HeadCount’ value cannot be ‘< -100’ & ‘> 100’
// e.g For Non CR Projects for planningType == ‘Hours’ value cannot be greater then ((Monthly Hours Value) * 100)
if ((value < -100 || value > 100) && (planningType == ‘HeadCount’)) {
return { result: false, message: “Value should be within -100 to 100 interval” };
}else{
var Regex = /^\d*(\.\d{0})?\d{0,8}$/;
if(Regex.test(value)){

return true;
}else{
return { result: false, message: “Decimal values should not exceed 8 digits” };
}
}
if(planningType == ‘Hours’ ){ var column = cell.column;
var selectedItem = $(‘#jqxTabs’).jqxTabs(‘selectedItem’);
var locationTab = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedItem);
var index =$(“#”+locationTab+”Grid”).jqxGrid(‘getcolumnindex’, column);

locationHrs=locationTab.substring(0,3).toUpperCase();
monthlyHrsArray=monthlyHrLocArray[locationHrs];
var maxValue = parseFloat(monthlyHrsArray[index-8]) * 100;

if (value > maxValue || value < -maxValue) {
return { result: false, message: “Value should be less then “+maxValue};
};
}
}
return true;
}
});

}
else
{
pastActualColumns.push(colStr);
gridColumns.push({ text: colNamesArray[i], dataField:colStr , align : ‘center’ , cellsalign:’right’, width: 60, editable:false,cellclassname: ‘readonlyclass’, filterable: false , cellsformat: ‘F2’,cellsrenderer: cellrender,rendered: function (element) {
$(element).parent().jqxTooltip({ position: ‘mouse’, content: $(element).text()+’ A HC’ });
}
,aggregates : [ ‘sum’ ],
aggregatesrenderer: function (aggregates, column, element, summaryData) {
var renderstring = “<div class=’jqx-widget-content jqx-widget-content-” + ‘theme’ + “‘ style=’float: left; width: 100%; height: 100%;background-color:#E5E5E5’>”;
$.each(aggregates, function (key, value) {
renderstring += ‘<div style=”position: relative; margin:3px; text-align: right;font-family: Arial;font-size: 12px;”> ‘ + value + ‘</div>’;
});
renderstring += “</div>”;
return renderstring;

},
//Code to validate planning cell values
// e.g For CR Projects for planningType == ‘HeadCount’ value cannot be ‘< 0’ & ‘> 100’
// e.g For CR Projects for planningType == ‘Hours’ value cannot be greater then ((Monthly Hours Value) * 100)
validation: function (cell, value) {

var column = cell.column;
var row = cell.row;
valueToConvert=value;

var a = value.split(‘,’);
if (a.length > 2) {
return {result:false,message:”Enter number in correct format”};
}else{
if(value.indexOf(“,”) >= 0){

valueToConvert=valueToConvert.replace(“,”,”.”);
return true;

}
}

if(value == 0){
return {result:false,message:”Enter only number”};
}

if((pdxType != ‘PD3’ || pdxType != ‘PD4’ || pdxType != ‘PD4_Z’)){
if ((value < 0 || value > 100) && (planningType == ‘HeadCount’)) {
return { result: false, message: “Value should be within 0 to 100 interval” };
}else{
var Regex = /^\d*(\.\d{0})?\d{0,8}$/;
if(Regex.test(value)){

return true;
}else{
return { result: false, message: “Decimal values should not exceed 8 digits” };
}
}
if(planningType == ‘Hours’){ var column = cell.column;
var selectedItem = $(‘#jqxTabs’).jqxTabs(‘selectedItem’);
var locationTab = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedItem);
var index =$(“#”+locationTab+”Grid”).jqxGrid(‘getcolumnindex’, column);

locationHrs=locationTab.substring(0,3).toUpperCase();
monthlyHrsArray=monthlyHrLocArray[locationHrs];
var maxValue = parseFloat(monthlyHrsArray[index-8]) * 100;

if (value > maxValue || value < -maxValue) {
return { result: false, message: “Value should be less then “+maxValue};
};

}
} else {
//Code to validate planning cell values
// e.g For Non CR Projects for planningType == ‘HeadCount’ value cannot be ‘< -100’ & ‘> 100’
// e.g For Non CR Projects for planningType == ‘Hours’ value cannot be greater then ((Monthly Hours Value) * 100)
if ((value < -100 || value > 100) && (planningType == ‘HeadCount’)) {
return { result: false, message: “Value should be within -100 to 100 interval” };
}else{
var Regex = /^\d*(\.\d{0})?\d{0,8}$/;
if(Regex.test(value)){

return true;
}else{
return { result: false, message: “Decimal values should not exceed 8 digits” };
}
}
if(planningType == ‘Hours’ ){ var column = cell.column;
var selectedItem = $(‘#jqxTabs’).jqxTabs(‘selectedItem’);
var locationTab = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedItem);
var index =$(“#”+locationTab+”Grid”).jqxGrid(‘getcolumnindex’, column);

locationHrs=locationTab.substring(0,3).toUpperCase();
monthlyHrsArray=monthlyHrLocArray[locationHrs];
var maxValue = parseFloat(monthlyHrsArray[index-8]) * 100;

if (value > maxValue || value < -maxValue) {
return { result: false, message: “Value should be less then “+maxValue};
};
}
}
return true;
}
});

}

}

dataFieldColumns.push({name : colStr,type: ‘float’});//,type: ‘float’
}
//var check=false;
//var allTabCount=0;
/*else{

if(check && allTabCount==0){
gridColumns.shift();
dataFieldColumns.shift();
allTabCount++;
}

} */
numberOfStaticColumnsJobGrid= (dataFieldColumns.length-colNamesDataArray.length) – 1;

var planningGrid =
{
async:false,
datatype: “json”,
datafields: dataFieldColumns,
cache: false,
url: ‘getGridPlanningData.htm?loc=’+location
+ “&leadProjectNumber=” + leadProjectNumberEffCr
+”&statusDdlValuesEffCR=”+statusDdlValuesEffCR
+”&displayType=”+displayType

};

var dataAdapter = new $.jqx.dataAdapter(planningGrid);

var gridName = “#”+location+”Grid”;

$(gridName).jqxGrid({
width: gridWidth,
// autoheight : true,
height : 395,
source : dataAdapter,
theme : ‘theme’,
editable : true,
rowsheight:21,
showstatusbar : true,
showfiltercolumnbackground: true,
showfilterrow: true,
filterable: true,
showaggregates : true,
columnsresize:true,
selectionmode : ‘multiplecellsadvanced’,
columns :gridColumns ,

handlekeyboardnavigation: function (event) {
var rowindex = $(“#”+location+”Grid”).jqxGrid(‘getselectedcell’);
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
if (key == 46)
{
if(rowindex.datafield==”strLocation”
||rowindex.datafield==”strActivityCode”
|| rowindex.datafield==”strJobCodeId”
|| rowindex.datafield==”strActivityCode”
|| rowindex.datafield==”strTotalApprovedAndCR”
|| rowindex.datafield==”strEAC”
|| rowindex.datafield==”strCRPastApprovals”
|| rowindex.datafield==”strSurplusOrDeficit”
|| rowindex.datafield==”strTotalFTE”
|| rowindex.datafield==”strTotalCost”)
{
return true;
}
else
{
for(var i=0; i< pastActualColumns.length; i++)
{
if(pastActualColumns[i] == rowindex.datafield)
return true;
}
}
}
}

});
for(var i = 0; i < locationColorArray.length ;i++) {
for(var j = 0; j < locationArray.length ;j++) {
if($.trim(locationColorArray[i]) == $.trim(locationArray[j])){
$(“#jqxTabs .jqx-tabs-title:eq(” + j + “)”).css(“background-color”, “Orange”);
// alert(“grid name:”+’#’+$.trim(locationArray[j])+’ExpRecGrid’);

$(‘#’+$.trim(locationArray[j])+’Grid’).jqxGrid({ editable: false});

$(‘#’+$.trim(locationArray[j])+’Grid’).css(“color”, “#808080”);

$(‘#’+$.trim(locationArray[j])+’Grid’).jqxGrid({ keyboardnavigation: false});

// break;
}
}
}
var surDefGrossTot = $(‘#originalSurplusDeficitGrossTotal’).val();
var pdxType = $(‘#pdxTypeCRHidden’).val();
if(pdxType == ‘PD3’ && parseFloat(surDefGrossTot) < parseFloat(“-30”))
{
$(“#”+location+”Grid”).jqxGrid({ editable: false});
$(“#”+location+”Grid”).css(“color”, “#808080”);
$(“#”+location+”Grid”).jqxGrid({ keyboardnavigation: false});
PD3HiddenLocation.push(location);
}
var surpDef;
var celledit=false;

$(“#”+location+”Grid”).on(‘cellendedit’, function (event) {
var pdxType = $(‘#pdxTypeCRHidden’).val();`

[mohitParticipant]

this is my code. I want to change the entered value during cell edit before validation.

Let’s say if user entered 1,45 , by default it should convert it into 1.45 before any validation starts .

Waiting for reply

[DimitarParticipant]

Hi mohit,

Please try out the solution given in the forum topic How to replace ‘,’ with ‘.’ in jqxgrid.

Best Regards,
Dimitar

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

[Author]

Posts