[BarkhaParticipant]

Thanks a lot Dimitar ………… Its solved my problem…. 🙂

[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”}]

[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]

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

[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);

[Author]

Posts