Facing problem in jqxcheckbox

[BarkhaParticipant]

Hello Team,

I am using jqxgrid for one of my project, where I have 5 columns with 3rd and 4th are dropdown columns and 5th one is check box column.

Issue: When I check the checkbox on 5th column, the values selected in 3rd and 4th are getting reset.

Required: I would like to retain the values of 3rd and 4th column irrespective check/uncheck on 5th column.
(1st and 2nd column are text fields, whose values are retained as it is. So this is fine).

Widget version used: 3.0.3

Can you please help in resolving the issue?

[Peter StoevKeymaster]

Hi Barkha,

Please, share a jsfiddle.net sample which illustrates your scenario so people would be able to text it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BarkhaParticipant]

(function($) {
var ccDetail;
var locationDetail;
var departmentDetail;

costCentreData = function(ccdetails, locationNameList, departmentNameList) {
ccDetail = ccdetails;
locationDetail = locationNameList;
departmentDetail = departmentNameList;

/** To define the data types of the CostCentre model */
var source = {
datafields : [
{
name : ‘costCentreCode’,
type : ‘string’
},{
name : ‘costCentreId’,
type : ‘number’
},{
name : ‘serviceName’,
map : ‘serviceName’
}, {
name : ‘locationCode’,
map : ‘locationCode’
}, {
name : ‘departmentName’,
map : ‘departmentName’
}, {
name : ‘isManagementCost’,
type : ‘boolean’
},
{
name : ‘createdBy’,
type : ‘string’
},
{
name : ‘createdDate’,
type : ‘date’
},
{
name : ‘locationId’,
map : ‘locationId’
},
{
name : ‘service’,
type : ‘string’
}
],
datatype : ‘json’,
localdata : ccDetail,
/* its the end of data presentaion */

/* Update operation */
updateRow : function(rowid, rowdata, commit) {
},

/* Add operation */
addrow : function(rowid, rowdata, position, commit) {
commit(true);
},

/* Delete operation */
deleterow : function(rowid, commit) {
deleteRowData(rowid, commit);
}

};
var adapter = new $.jqx.dataAdapter(source);
jqxgrid(adapter);
};

/** Grid formation */
jqxgrid = function(adapter) {

$(“#jqxgrid”).jqxGrid({
width : 950,
source : adapter,
pageable : true,
rowdetails : true,
rowsheight : 35,
editable : true,
sortable : true,
columnsresize : true,
localization : getLocalization(),
showrowdetailscolumn : false,
autosavestate : false,
editmode : ‘selectedrow’,
autoheight : true,
ready : function() {
$(‘#jqxgrid’).jqxGrid({
pagesizeoptions : [ ’10’, ’20’, ’50’ ]

});
$(“#jqxgrid”).jqxGrid(‘selectionmode’, ‘multiplerows’);
},
columns : [
{
text : “Cost Centre “,
datafield : “costCentreCode”,
width : 150
},
{
text : “Service”,
datafield : “service”,
width : 250,
},
{
text : “Is Management CC”,
datafield : “isManagementCost”,
columntype : ‘checkbox’,
width : 150
},
{
text : “Location”,
datafield : “locationCode”,
width : 150,
columntype : ‘dropdownlist’,
createeditor : function(row, column, editor) {
editor.jqxDropDownList({
autoDropDownHeight : true,
source : locationDetail
});
},

cellvaluechanging : function(row, column,
columntype, oldvalue, newvalue) {

// return the old value, if the new value is
// empty.
if (newvalue == “”)
return oldvalue;
}
},
{
text : “Function”,
datafield : “departmentName”,
width : 250,
columntype : ‘dropdownlist’,
createeditor : function(row, column, editor) {
editor.jqxDropDownList({
autoDropDownHeight : true,
source : departmentDetail
});
},

cellvaluechanging : function(row, column,
columntype, oldvalue, newvalue) {
// return the old value, if the new value is
// empty.
if (newvalue == “”)
return oldvalue;
}
},

]
});
};

/** Validation before Save operation */
saveCostCentre = function()
{
isSave = true;
var isDuplicate = false;
var isEmptyField = false;
var j = 0;
var locationCodeList = [];
var duplicateCCCodeList = [];
var rowIndex = [];
var costCentreId = 0;
var dataInformation = $(‘#jqxgrid’).jqxGrid(‘getdatainformation’);

// rowscounts is total number of rows in grid
var rowscounts = dataInformation.rowscount;

//Validation for Cost Centre
for (; j < rowscounts; j++)
{

var selectedData = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, j);
var ccId = selectedData.costCentreId;
if(ccId != undefined)
{
costCentreId = ccId;
}
if (!(selectedData.costCentreCode) || !(selectedData.locationCode) ||!(selectedData.departmentName) )
{
rowIndex.push(j);
isEmptyField = true;
}
var costCentreCode = $.trim(selectedData.costCentreCode.toString().toUpperCase());
var locationCode = costCentreCode.substr(4, 2);

//Validating Location Code
if(!(locationCode == selectedData.locationCode))
{
locationCodeList.push(costCentreCode +” – “+ selectedData.locationCode +”\n”);
}

isDuplicate = getDuplicateList(costCentreCode, j);
if(isDuplicate) {
duplicateCCCodeList.push(costCentreCode + ” “);
break;
}

}
if (!isDuplicate && !isEmptyField) {

//if Location code of CostCentre code is not matched with location code
if(locationCodeList.length > 0){
if(confirm(“Are you sure to have following mapping for Cost Centre and Location ” +”\n” + locationCodeList.toLocaleString().replace(/,/g, ” “) + “\n” + “Click OK to continue”))
{
for(var rowindex = 0 ; rowindex < rowscounts; rowindex++)
{
var ccRow = $(‘#jqxgrid’).jqxGrid(‘getrowdata’,
rowindex);
udpateRowData(rowindex, ccRow);
}

}
}
else {
for(var rowindex = 0 ; rowindex < rowscounts; rowindex++)
{
var ccRow = $(‘#jqxgrid’).jqxGrid(‘getrowdata’,
rowindex);
udpateRowData(rowindex, ccRow);
}
}
}
else if(isDuplicate)
{
alert(“CostCentre Code ” + duplicateCCCodeList + ” already exists”);
}
else
{
alert(“Enter all field for row id – ” + rowIndex);
}
};

/** Save operation starts from here */
udpateRowData = function(rowid, rowdata, commit) {

$(“#successStatus”).empty();
$(“#failureStatus”).empty();

var costCentreId = 0;
var isManagementCC = false;
var dataInformation = $(‘#jqxgrid’).jqxGrid(‘getdatainformation’);
var rowscounts = dataInformation.rowscount;
var selectedLocationId = 0;

if(rowdata.costCentreId != undefined)
costCentreId = rowdata.costCentreId;

if(rowdata.isManagementCost != undefined)
isManagementCC = rowdata.isManagementCost

/* To get LocationId of selected locationName dropdown */
for ( var i = 0; i < locationDetail.length; i++)
{
if (locationDetail[i].locationCode == rowdata.locationCode)
{
selectedLocationId = locationDetail[i].locationId;
break;
}
}
/* To get functionId of selected functionName dropdown */
for ( var i = 0; i < departmentDetail.length; i++)
{
if (departmentDetail[i].departmentName == rowdata.departmentName)
{
selectedDepartmentId = departmentDetail[i].departmentId;
break;
}
}
var costCentreCode = $.trim(rowdata.costCentreCode.toString().toUpperCase());
var createdDate = “”;

if(rowdata.createdDate == undefined)
{
createdDate = convetDateToString(new Date());
}
else
{
createdDate = rowdata.createdDate;
}

if(costCentreCode != “”)
{
var dataup = “&costCentreCode=” + $.trim(convertSymbol(rowdata.costCentreCode))
+ “&costCentreId=” + costCentreId + “&isManagementCost=”
+ isManagementCC + “&createdBy=” + rowdata.createdBy
+ “&createdDate=” + createdDate + “&service=”
+ $.trim(convertSymbol(rowdata.service)) + “&location.locationId=”
+ selectedLocationId + “&department.departmentId=”
+ selectedDepartmentId;

$(“#status”).empty();

/* saveDataToDatabase(dataup1,rowdata); */
$.ajax({
type : “POST”,
dataType : “text”,
url : “saveOrUpdateCC”,
async : ‘false’,
data : dataup,
success : function(data, status, xhr) {
if (rowid == (rowscounts – 1)) {
location.reload(true);
}
},
error : function(data, status, xhr) {
location.reload(true);
}
});
}
};

/** */
deleteData = function()
{
var ccIdDeleteList = [];
var ccCodeList = [];
var selectedRows = $(“#jqxgrid”).jqxGrid(‘getselectedrowindexes’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
for ( var m = 0; m < selectedRows.length; m++)
{
var selectedRowIndex = selectedRows[selectedRows.length – m – 1];

if (selectedRowIndex >= 0 && selectedRowIndex < rowscount)
{
var slectedData = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, selectedRows[m]);
ccIdDeleteList.push(slectedData.costCentreId);
ccCodeList.push(slectedData.costCentreCode);
}
}
if(ccIdDeleteList.length > 0)
{
if(confirm(“Do you want to delete – ” + ccCodeList))
{
deleteRowData(ccIdDeleteList);
}
}

};

/** Delete operation starts from here */
deleteRowData = function(ccIdDeleteList, commit) {

$(“#successStatus”).empty();
$(“#failureStatus”).empty();

var dataup = “ccIdDeleteList=” + ccIdDeleteList;

$.ajax({
type : “POST”,
dataType : “text”,
url : “deleteCC”,
async : ‘false’,
data : dataup,
success : function(data, status, xhr) {
location.reload(true);
},
error : function(data, status, xhr) {
location.reload(true);
}
});
};

/** Get selected menu in administration dropdopwn */
onChangeForCC = function()
{
var searchValue = document.getElementById(“selectedMenu”);
var value = searchValue.options[searchValue.selectedIndex].value;

document.location.href = “admin?listValue=” + value;
};

/** Convert date to String */
convetDateToString = function (dateString)
{
if(null != dateString)
{
var dateJs = new Date(dateString);
var year=dateJs.getFullYear();
var month=dateJs.getMonth()+1;
var day=dateJs.getDate();
var hours = dateJs.getHours();
var minutes = dateJs.getMinutes();
var seconds = dateJs.getSeconds();
var milliSeconds = dateJs.getMilliseconds();
return formatted=day+”/”+month+”/”+year + ” ” + hours +”:” + minutes +”:” + seconds +”:” + milliSeconds;
}
else
{
return formatted=null;
}
};

/** To Check Duplicate data in Grid */
getDuplicateList = function(costCentreCode, j)
{
var isDuplicate = false;
for (var i = j+1; i < ccDetail.length; i++)
{

var ccRow = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, i);

var gridCCCode = $.trim(ccRow.costCentreCode.toString().toUpperCase());
if($.trim(gridCCCode) == $.trim(costCentreCode))
{
isDuplicate = true;
break;
}
}
return isDuplicate;
};

})(jQuery);

[Peter StoevKeymaster]

Hi Barkha,

Please, share a jsfiddle.net sample which illustrates your scenario so people would be able to test it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BarkhaParticipant]

Hi ,
Please find the url of jsfiddle.net :
http://jsfiddle.net/barkha/8hvq2293/

[Peter StoevKeymaster]

Hi Barkha,

Sorry, but nothing is displayed in that fiddle. There is no Grid. Are you sure that this is correct code and you have not missed something?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BarkhaParticipant]

Actually we are using spring and hibernate in our project and getting all data in json format from controller..

in above code ccdetails, locationNameList, departmentNameList are json list…

and in jsfiddle.net i cant share my backend code, so i have shared only javascript code. if you want i can share my json fromat.

Thanks..

[BarkhaParticipant]

we are getting data in below format:

ccdetails = [{“costCentreId”:207,”costCentreCode”:”6000KL7810″,”isManagementCost”:false,”createdBy”:”lputhran”,”createdDate”:”15/01/2015 15:17:22:447″,”service”:”MI Service”,”departmentId”:100,”departmentName”:”OPERATIONS”,”locationId”:71,”locationCode”:”KL”}]

locationNameList = [{“locationId”:71,”locationCode”:”KL”,”createdBy”:”lputhran”,”createdDate”:”09/01/2015 18:09:25:277″}]

departmentNameList = [{“departmentId”:100,”departmentName”:”OPERATIONS”}]

[Peter StoevKeymaster]

Hi Barkha,

What I actually need is not your real project or anything like that. I need an example which shows an issue with our product. It is not necessary to be your real data with your real project. That sample should run in jsfiddle.net and demonstrate an issue. This will help us to identify whether this is a problem with our product or with your code. This will help other users in this Forum to try to help you, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts