jQWidgets Forums

Tagged: grid, javascript grid, jquery grid, jqwidgets grid

This topic contains 6 replies, has 2 voices, and was last updated by atomic 8 years, 11 months ago.

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

Author

spredsheet grid Posts

June 15, 2016 at 9:30 am spredsheet grid #85124

atomic

Participant

Hi,

I am using jqx spreadsheet grid and have set one column to be

pinned: true,
 editable: false,

an it works fine, but when I copy/paste from excel that column is edited and values are changed.
Ho to disable this?

Any suggestions?

Thanks

June 15, 2016 at 3:26 pm spredsheet grid #85131

Peter Stoev

Keymaster

Hi atomic,

How do you paste data in that column because in the demo I can’t select it to paste data there.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 16, 2016 at 10:03 am spredsheet grid #85154

atomic

Participant

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"
    }
]

June 16, 2016 at 10:08 am spredsheet grid #85155

Peter Stoev

Keymaster

Hi atomic,

Sorry, but how is this related to our spreadsheet demo? There is nothing common here.

Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com

June 17, 2016 at 12:13 pm spredsheet grid #85216

atomic

Participant

Hi Peter,

Spreadsheet demo is just jqx Grid with

editable: true,
 columnsresize: true,
 selectionmode: 'multiplecellsadvanced',

.
right?!
Well I needed that feature as well. I dynamically generate header row and first column just as you did in your demo, but I use actual names.
and everything works well, I cannot edit my first column, I added some custom validation when I paste multiple values from wxcel( you do not provide these validation), but the problem is I can paste values in my first column, and it it set editable: false
I hope I am not missing something crucial, if I am please forgive me.
Thanks for support.
Best

June 17, 2016 at 12:36 pm spredsheet grid #85220

Peter Stoev

Keymaster

Hi atomic,

No, it is definitely not that. The spreadsheet demo is unbound Grid with empty cells. Setting editable: false disables the Editing with Editors, not the clipboard operations. In the Grid, you can disable clipboard operations for the Grid by setting clipboard: false in jqxGrid. However, there is no such column property so your option is to disable it for the Grid or leave it enabled.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 17, 2016 at 1:40 pm spredsheet grid #85226

atomic

Participant

Hi Peter,

Thanks for reply. Although column property clipboard: false would be awesome.
Cheers

Author

Posts

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

You must be logged in to reply to this topic.