jQWidgets Forums

Forum Replies Created

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

Author

Posts

July 1, 2013 at 11:58 am in reply to: JavaScript Error After Updating to 2.9.0 JavaScript Error After Updating to 2.9.0 #24257

alexx

Member

Hi Peter,

Thanks, that worked.

Alexx

June 28, 2013 at 8:47 pm in reply to: JavaScript Error After Updating to 2.9.0 JavaScript Error After Updating to 2.9.0 #24156

alexx

Member

Hi Peter
I have done what you suggest and I am no longer getting that javascript error, however, currently all the data is being render in the first column. This issue does not exist in the previous versions.
I came up with the following sample to demonstrate this issue. For testing just comment/uncomment references to the appropriate packages.

Any clue why this might be happening?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<!-- 						********		JQWidgets 2.8.3		********				 -->
<!--     <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />        -->
<!--     <script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>  -->
<!--     <script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script> -->
<!-- 						********		JQWidgets 2.9.0		********				 -->    
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxcheckbox.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxcore.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxdata.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxbuttons.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxscrollbar.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxmenu.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxlistbox.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.columnsresize.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.filter.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.pager.js"></script>
	<script type="text/javascript" src="../jqwidgets_ver2.9.0/jqxgrid.grouping.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {        
           
            var data = [{
                "id": 85110368,
                "vendorAcctID": 10000093,
                "vendorID": 8,
                "vendorName": "American Stock Exchange (AMEX)",
                "vendorAcctNum": "AcctTest",
                "invoiceDate": 1331010000000,
                "invoiceNum": "9999999",
                "currentAmt": 1500.0000,
                "currentTax": 100.0000,
                "pastDueAmt": null,                
                "appvDate": null,                
                "created": 1331045184350,
                "createdBy": "admin",
                "modified": 1341310013153,
                "modifiedBy": "mikeDModifier",                
                "invoiceAmt": 1600.0000,
                "paidAmt": 1600.0000,
                "total": 1600.0
            }];
           
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'vendorName' },                    
                    { name: 'vendorAcctNum' },
                    { name: 'invoiceNum' },
                    { name: 'invoiceDate' }
                ],
                id: 'id',
                localdata: data
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            $("#jqxgrid").jqxGrid(
            {
            	width: 900,
             	columnsheight:20,
                source: dataAdapter,
                columnsresize: true,
                showemptyrow: false,
                pagesize: 25,
                pageable: true,
                sortable: true,
                columns: [
                  { text: 'Vendor', datafield: 'vendorName', width: 240},
                  { text: 'Vendor Acct Num', datafield: 'vendorAcctNum', width: 150},
                  { text: 'Invoice Num', datafield: 'invoiceNum', width: 170},
                  { text: 'Invoice Date', datafield: 'invoiceDate', width: 150}                  
              ]
            });
        });
    </script>
</head>
<body>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

June 25, 2013 at 7:26 pm in reply to: JavaScript Error After Updating to 2.9.0 JavaScript Error After Updating to 2.9.0 #23849

alexx

Member

Peter,
Thanks for the info.

Alexx

April 4, 2013 at 2:00 pm in reply to: Vertical Scrolling in Grid Programmatically Vertical Scrolling in Grid Programmatically #18603

alexx

Member

Thanks Peter,
The Virtual Scroll Sample didn’t help with what I was looking; however, I was able to achieve my goals by utilizing jqxGrid(‘scrolltop’). Users who have similar need should bear in mind that the scroll position is in reference to virtual scroll size and not he grids viewable pane.

March 27, 2013 at 11:47 am in reply to: jqxDataAdapter and Server requests jqxDataAdapter and Server requests #18146

alexx

Member

Thanks Peter. That helped.

January 22, 2013 at 5:44 pm in reply to: Custom cellrender affects grid hover style Custom cellrender affects grid hover style #14065

alexx

Member

Cloudsurfer, Peter,
Can you please put cloudsurfer’s two queries along with the responses in a separate thread; I am afraid we may lose track of my original question. Peter has requested sample code which I provided in my last post. Thanks.

Peter, do you have any suggestions based on the sample I posted?

January 15, 2013 at 2:34 pm in reply to: Custom cellrender affects grid hover style Custom cellrender affects grid hover style #13640

alexx

Member

Thanks for the prompt respond. Your response is just as I thought about style precedence. Is there any way I could still have selection/hover style? Is there a way to access jqwidgets hover/select event handlers?
I have recreated this by tweaking your Grid Cells Rendering Sample. See code below.

<!DOCTYPE html>
<html lang="en">    
    <head>
        <title id='Description'>Grid with custom cells rendering.</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
        <style type="text/css">
	        .samplebgcolor{
				overflow: hidden;
				width: 100%;
				height:100%;
				background-color: #FFDDAA !important;
			}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
            	// prepare the data
            	var data = new Array();
            	var firstNames =
            		[
            		 "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            		 ];
            	var lastNames =
            		[
            		 "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            		 ];
            	var productNames =
            		[
            		 "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            		 ];
            	var priceValues =
            		[
            		 "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            		 ];
            	for (var i = 0; i < 100; i++) {
            		var row = {};
            		var productindex = Math.floor(Math.random() * productNames.length);
            		var price = parseFloat(priceValues[productindex]);
            		var quantity = 1 + Math.round(Math.random() * 10);
            		row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
            		row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
            		row["productname"] = productNames[productindex];
            		row["price"] = price;
            		row["quantity"] = quantity;
            		row["total"] = price * quantity;
            		data[i] = row;
            	}
            	
            	var source =
            	{
            			localdata: data,
            			datatype: "array"
            	};
            	
            	var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
           			if (value < 20) {
           				return '<div class="samplebgcolor"><span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span></div>';
                        //return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
               		}
               		else {
               			return '<div><span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span></div>';
                        //return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
               		}
            	}
            	
            	$("#jqxgrid").jqxGrid(
            			{
            				width: 670,
            				source: source,
            				pageable: true,
            				autoheight: true,
            				columns: [
            				          { text: 'First Name', datafield: 'firstname', width: 100 },
            				          { text: 'Last Name', datafield: 'lastname', width: 100 },
            				          { text: 'Product', datafield: 'productname', width: 180 },
            				          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer },
            				          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: 'c2' },
            				          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
            				         ]
            			});
            	});
        </script>
    </head>
    
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
        </div>
    </body>
</html>

Author

Posts

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