[atomicParticipant]

Hi,

i have just updated to jqxWidgets 4.5.2. and I have the same problem. After refreshing chart it displays zoomed range selected.
For example I have 8760 values (hours in one year) in my range selector, but I initially display only 730 values( 1 month) in the main chart, after refreshing chart I got only 730 values in my range selector, or any other range that is selected in range selector. There is no other way to display all 8760 values in range selector unless hitting F5 :(…
Everything worked fine in version 4 of jqxWidgets.

thanks

[atomicParticipant]

Yes I am aware of this feature, but question is can I show all tool-tips of the chart without hovering series?
It would be something as labels for all series and elements of, for example stacked-column chart…
thanks

[atomicParticipant]

My mistake By mistake I asked a question in reply… Sorry

Any ideas about animation?

Thanks

[atomicParticipant]

Hi guys,

Is there a way to add animation (slide down and up) when opening nested grid?
It would be good is here is way to blur parent grid when detils row is opened to highlight nested data.

Thanks a lot

[atomicParticipant]

Hi guys,

What am I doing wrong? I cannot even reproduce your demo…

    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
      
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
                        { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
                        { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
                        { name: 'City', map: 'm\\:properties>d\\:City' },
                        { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
                        { name: 'Country', map: 'm\\:properties>d\\:Country' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:CustomerID',
                    url: "customers.xml",
                    async: false
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree items. The first parameter is the grouping fields. The second parameter is the sub items collection name. The third                       parameter is the group's name. 
                // Each jqxTree item has a 'label' property, but in the data source, we have a 'CompanyName' field. The last parameter 
                // specifies the mapping between the 'CompanyName' and 'label' fields.  
                var records = dataAdapter.getGroupedRecords(['Country', 'City'], 'items', 'label', [{ name: 'uid', map: 'value' }, { name: 'CompanyName', map: 'label'}], 'row', 'value');

                $('#jqxWidget').jqxTree({ source: records, height: '300px', width: '300px'});
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>

with this data in customers.xml

<entry>
  <title type="text"></title>
  <updated>2011-11-30T11:39:28Z</updated>
  <author>
    <name />
  </author>
  <content type="application/xml">
    <m:properties>
      <d:CustomerID>ALFKI</d:CustomerID>
      <d:CompanyName>Alfreds Futterkiste</d:CompanyName>
      <d:ContactName>Maria Anders</d:ContactName>
      <d:ContactTitle>Sales Representative</d:ContactTitle>
      <d:Address>Obere Str. 57</d:Address>
      <d:City>Berlin</d:City>
      <d:Region m:null="true" />
      <d:PostalCode>12209</d:PostalCode>
      <d:Country>Germany</d:Country>
      <d:Phone>030-0074321</d:Phone>
      <d:Fax>030-0076545</d:Fax>
    </m:properties>
  </content>
</entry>

I get blank jqxWidget div…. I am using latest jqxWidgets.
Thank you.

[atomicParticipant]

Sorry, everything works fine now, I had delay set on add/remove class $("#content").removeClass("container",500); so windows resize event was fired before class is add//removed.
Thanks a lot for the help.
Cheers

[atomicParticipant]

Hi Peter,
Thank you for your reply. Yes, that is obvious. But it is not working with forcing resize event to happen…

 $("#content").removeClass("container-fluid");
  $("#content").addClass("container");
  $(window).trigger('resize');

What is wrong?
Thanks

[atomicParticipant]

Hi Ivailo,

Your solution actually did not work for me. I had to change css to

.jqx-rc-all{
      z-index:999999;
  }

and now it works, but thanks a lot for the hint. It was helpful!
Chreers

[atomicParticipant]

Thanks so much Ivailo. That solved the problem.
But I got another small issue. My chart in nested grid does not shows tooltip values. When I hover bar in chart it shows little arrow but with no values.
If I use same settings for chart outside nested grid everything works as expected.

Any ideas.

Thanks so much.

[atomicParticipant]

Hi Peter,

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

[atomicParticipant]

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

[atomicParticipant]

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

[atomicParticipant]

Acctually I got it.
cellvaluechanged event of nested grid trigers cellvaluechanged event of main grid which deletes my popups.
Is there a way not to invoke this second cellvaluechanged of main grid.
Thanks

[atomicParticipant]

Thanks for reply Peter.
Sorry my mistake, everything is ok with 4.1.2.
Thanks for support
Best

[atomicParticipant]

I would like to add that not all cells accept not number values and negative values, they are only set to 0.00, but some of them get negative values as well as strings. Unless I do something wrong this is bug.
Cheers

[Author]

Posts