jQWidgets Forums
jQuery UI Widgets › Forums › Grid › spredsheet grid › Reply To: spredsheet grid
Hi Peter,
I can select it but cannot edit it, but when I paste it accepts the value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView, jqxTabs" />
<meta name="description" content="In this sample, the Tab Contents will be loaded with Ajax when
a Tab is selected." />
<title id='Description'>Spreadsheet</title>
<link rel="stylesheet" href="../INCLUDES/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../INCLUDES/jqwidgets/styles/jqx.bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../INCLUDES/jqwidgets/styles/jqx.fresh.css" type="text/css" />
<script type="text/javascript" src="../INCLUDES/scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../INCLUDES/scripts/demos.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="../INCLUDES/jqwidgets/jqxnotification.js"></script>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
}
.jqx-notification-container
{
z-index:9999;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var theme = 'fresh';
var myURL2 ='FEDSectors.json';
var source =
{
url: myURL2,
datatype: 'json',
cache: false,
async: false,
updaterow: function (rowid, rowdata) {
// synchronize with the server - send update command
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var recordi = dataAdapter.records;
function getYears() {
$.ajax({
url:'years.json',
async: false,
cache: false,
success:function(data) {
result = data;
}
});
return result;
}
var years = getYears();
var kol = years.length;
var columns_years_editable = [];
flag = false;
$.each(years, function(key, value) {
if (!flag)
{
var kolone ={
text:'PJ',
datafield:'sector',
width:120,
pinned: true,
editable: false,
aggregates: [{
function (aggregatedValue, currentValue) {
return aggregatedValue;
}
}
],
aggregatesrenderer: function (aggregates, column, element, summaryData) {
var container = $("<div style='overflow: hidden; position: relative; margin: 2px;'></div>");
var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../INCLUDES/images/save16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Save</span></div>");
container.append(addButton);
addButton.jqxButton({ width: 70, height: 20, theme: theme });
addButton.click(function () {saveChanges();});
return container;
},
};
flag = true;
columns_years_editable.push(kolone);
}
kolone ={
text:value["year"],
datafield:value["year"],
width:120,
aggregates: ['sum'],
cellsalign: 'right',
cellsformat: 'd2',
columntype: 'numberinput',
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 2 });
},
validation: function (cell, value) {
if (value < 0) {
return { result: false, message: value_should_be_positive };
}
return true;
}
}
columns_years_editable.push(kolone);
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function checkSectorInputs(){
var errorType = [];
var rows = $("#jqxgrid").jqxGrid('getrows');
for(var i = 0; i < rows.length; i++)
{
$.each(years, function(key, value)
{
var error = new Object();
var year = value["year"];
if(rows[i][year]<0){
error['Sector'] = rows[i].sector;
error['Year'] = year;
error['Value'] = rows[i][year];
errorType.push(error);
}
if(!isNumber(rows[i][year])){
error['Sector'] = rows[i].sector;
error['Year'] = year;
error['Value'] = rows[i][year];
errorType.push(error);
}
});
}
return errorType;
}
function saveChanges()
{
var objList = [];
var rows = $("#jqxgrid").jqxGrid('getrows');
for(var i = 0; i < rows.length; i++)
{
var data = new Object();
$.each(years, function(key, value)
{
var year = value["year"];
data[year] = parseFloat(rows[i][year]);
});
data['sector'] = rows[i].sector;
objList.push(data);
}
errorType = checkSectorInputs();
if(Object.keys(errorType).length === 0){
var myJsonString = JSON.stringify(objList);
$.ajax({
type: "POST",
url: "controler.php?action=SaveData",
data: myJsonString,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$(".jqx-grid-validation, .jqx-grid-validation-arrow-up, .jqx-grid-validation-arrow-down").remove();
$("#jqxNotification").jqxNotification({width: 450, position: "top-left", opacity: 0.9,theme: theme,autoOpen: false, animationOpenDelay: 500, autoClose: false, autoCloseDelay: 500, template: "success"});
$("#notificationContent").html('Succesfull update of final energy demand by sectors.');
$("#jqxNotification").jqxNotification("open");
}
});
}
else{
for (var i = 0; i < errorType.length; i++) {
index = recordi.findIndex(x => x.sector==errorType[i]['Sector']);
$("#jqxgrid").jqxGrid('showvalidationpopup', index, errorType[i]['Year'], "Invalid Value");
}
}
}
var sirina = 120*kol+120;
$('#jqxgrid').on('cellvaluechanged', function (event) {
$(".jqx-grid-validation, .jqx-grid-validation-arrow-up, .jqx-grid-validation-arrow-down").remove();
errorSectors = checkSectorInputs();
if(Object.keys(errorSectors).length !== 0){
for (var i = 0; i < errorSectors.length; i++) {
index = recordi.findIndex(x => x.sector==errorSectors[i]['Sector']);
$("#jqxgrid").jqxGrid('showvalidationpopup', index, errorSectors[i]['Year'], "Invalid Value");
}
}
});
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
editable: true,
columnsresize: true,
selectionmode: 'multiplecellsadvanced',
autoheight: true,
width: sirina,
theme: theme,
altrows: true,
showstatusbar: true,
showaggregates: true,
columns: columns_years_editable,
});
});
</script>
</head>
<body>
<div id="jqxNotification">
<div id="notificationContent"></div>
</div>
<div id="jqxgrid" class="table table-striped"></div>
</body>
</html>years.json
[
{
"year":2000
},
{
"year":2010
},
{
"year":2020
},
{
"year":2030
},
{
"year":2040
},
{
"year":2050
}
]FEDSectors.json
[
{
"2000": 5,
"2010": 0,
"2020": 5,
"2030": 0,
"2040": 0,
"2050": 22.09,
"sector": "Industry"
},
{
"2000": 5,
"2010": 2,
"2020": 5,
"2030": 0,
"2040": 8.11,
"2050": 5.07,
"sector": "Transport"
},
{
"2000": 5,
"2010": 0,
"2020": 5,
"2030": 0,
"2040": 9.85,
"2050": 0,
"sector": "Households"
},
{
"2000": 5,
"2010": 0,
"2020": 5,
"2030": 0,
"2040": 5.3,
"2050": 0,
"sector": "Comercial"
},
{
"2000": 0,
"2010": 0,
"2020": 1,
"2030": 0,
"2040": 4,
"2050": 0,
"sector": "Agriculture"
},
{
"2000": 0,
"2010": 0,
"2020": 0,
"2030": 0,
"2040": 2,
"2050": 0,
"sector": "Fishing"
},
{
"2000": 0,
"2010": 9.8,
"2020": 5.4,
"2030": 0,
"2040": 2.1,
"2050": 0,
"sector": "Non-energy use"
},
{
"2000": 0,
"2010": 4,
"2020": 5,
"2030": 0,
"2040": 2,
"2050": 0,
"sector": "Other"
}
]