jQWidgets Forums

This topic contains 6 replies, has 3 voices, and was last updated by akanis 9 years, 9 months ago.

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

Author

gridrecordtoform by hover/focus a row Posts

August 20, 2015 at 1:54 pm gridrecordtoform by hover/focus a row #75005

akanis

Participant

Hi, is there an example like dragdropgridrecordtoform.htm without drag&drop, but the Form Panel shows the record simultaneously when i hover or focus a row ?

Best Regards akanis

August 20, 2015 at 3:51 pm gridrecordtoform by hover/focus a row #75007

ChristianB

Participant

Hi akanis,
somthing like that?

(only on rowselect):

<!DOCTYPE html>
<html lang="en">
	<head>
	    <title>TEST</title>
	    <link rel="stylesheet" href="/kernel/js/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
	    <script type="text/javascript" src="/kernel/js/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
	    <script type="text/javascript" src="/kernel/js/jqwidgets/jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="/kernel/js/jqwidgets/jqwidgets/jqx-all.js"></script>
	    <style>
	    	html, body {
			    margin: 0;
			    width: 100%;
			    height: 100%;
			    padding: 0px;
			    overflow: hidden;
			}
			
			input
			{
				margin: 5px;
			}
	    </style>
	    <script type="text/javascript">
	        $(document).ready(function () {
	        	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 < 200; 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",
	                datafields:
	                [
	                    { name: 'firstname', type: 'string' },
	                    { name: 'lastname', type: 'string' },
	                    { name: 'productname', type: 'string' },
	                    { name: 'quantity', type: 'number' },
	                    { name: 'price', type: 'number' },
	                    { name: 'total', type: 'number' }
	                ]
	            };
	            var dataAdapter = new $.jqx.dataAdapter(source);
	       
	            $("#jqxgrid").jqxGrid(
	            {
	                width: 850,
	                source: dataAdapter,
	                columnsresize: true,
	                columns: [
	                  { text: 'Name', datafield: 'firstname', width: 120 },
	                  { text: 'Last Name', datafield: 'lastname', width: 120 },
	                  { text: 'Product', datafield: 'productname', width: 180 },
	                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
	                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
	                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
	                ]
	            });
	            
	            $('#jqxgrid').on('rowselect', function (event){
	            	var args = event.args;
	            	var rowBoundIndex = args.rowindex;
	            	var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowBoundIndex);
	            	$("#fname").val(data.firstname);
	            	$("#lname").val(data.lastname);
	            	$("#pname").val(data.productname);
	            	$("#quantity").val(data.quantity);
	            	$("#prise").val(data.price);
	            	$("#total").val(data.total);
	            });
	        });
	    </script>
	</head>
	<body class='default'>
		<div id="jqxgrid"></div>
		<br>
		<input type="text" id="fname"/><br>
		<input type="text" id="lname"/><br>
		<input type="text" id="pname"/><br>
		<input type="text" id="quantity"/><br>
		<input type="text" id="prise"/><br>
		<input type="text" id="total"/>
	</body>
</html>

enjoy your day
Christian

August 20, 2015 at 9:21 pm gridrecordtoform by hover/focus a row #75013

akanis

Participant

Hi Christian, ok, now i understand rowselect. It is so easy with jqx.
Is there any way to get the selected raw index instead(like) of the tooltip (rawselect by hovering) ?
I could not find something to realize this feature in the jquery-widgets-documentation.
I think, it is very special (patch the tooltip code?).

Best Regards akanis

August 21, 2015 at 6:24 am gridrecordtoform by hover/focus a row #75032

ChristianB

Participant

Hi akanis,
maybe i have not understanding your Question (my english is not the verry best )
Try this:
It makes a Hover-Event width jqxTooltip in the Name-Column
(sorry, no more time to make it pretty)

<!DOCTYPE html>
<html lang="en">
	<head>
	    <title>TEST</title>
	    <link rel="stylesheet" href="/kernel/js/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
	    <script type="text/javascript" src="/kernel/js/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
	    <script type="text/javascript" src="/kernel/js/jqwidgets/jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="/kernel/js/jqwidgets/jqwidgets/jqx-all.js"></script>
	    <style>
	    	html, body {
			    margin: 0;
			    width: 100%;
			    height: 100%;
			    padding: 0px;
			    overflow: hidden;
			}
			
			input
			{
				margin: 5px;
			}
	    </style>
	    <script type="text/javascript">
	        $(document).ready(function () {
	        	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 < 200; 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",
	                datafields:
	                [
	                    { name: 'firstname', type: 'string' },
	                    { name: 'lastname', type: 'string' },
	                    { name: 'productname', type: 'string' },
	                    { name: 'quantity', type: 'number' },
	                    { name: 'price', type: 'number' },
	                    { name: 'total', type: 'number' }
	                ]
	            };
	            var dataAdapter = new $.jqx.dataAdapter(source);
	       
	            var tooltiprenderer = function(row, column, value){
	            	var id = value + row;
	            	var html = '<div id="' + id + '">' + value + '</div>';
	            	return html;
	            }
	            var jqxToolTipRenderer = function(row, column, value){
	            	//console.log(row);
	            	var data = $('#jqxgrid').jqxGrid('getrowdatabyid', row);
	            	//console.log(data.firstname);
	            	
	            	var id = data.firstname + row;
	            	$('#' + id).jqxTooltip({ content: '<b>Form</b><input type="text" value="' + data.firstname + '"/><br><input type="text" value="' + data.lastname + '"/>', position: 'mouse', name: 'movieTooltip'});
	            }
	            
	            $("#jqxgrid").jqxGrid(
	            {
	                width: 850,
	                source: dataAdapter,
	                columnsresize: true,
	                columns: [
	                  { text: 'Name', datafield: 'firstname', width: 120, cellsrenderer: tooltiprenderer  },
	                  { text: 'Last Name', datafield: 'lastname', width: 120 },
	                  { text: 'Product', datafield: 'productname', width: 180 },
	                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
	                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
	                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2', cellsrenderer: jqxToolTipRenderer }
	                ]
	            });
	            
	            $('#jqxgrid').on('rowselect', function (event){
	            	var args = event.args;
	            	var rowBoundIndex = args.rowindex;
	            	var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowBoundIndex);
	            	$("#fname").val(data.firstname);
	            	$("#lname").val(data.lastname);
	            	$("#pname").val(data.productname);
	            	$("#quantity").val(data.quantity);
	            	$("#prise").val(data.price);
	            	$("#total").val(data.total);
	            });
	            
	        });
	    </script>
	</head>
	<body class='default'>
		<div id="jqxgrid"></div>
		<br>
		<input type="text" id="fname"/><br>
		<input type="text" id="lname"/><br>
		<input type="text" id="pname"/><br>
		<input type="text" id="quantity"/><br>
		<input type="text" id="prise"/><br>
		<input type="text" id="total"/>
	</body>
</html>

enjoy
Christian

August 21, 2015 at 6:33 am gridrecordtoform by hover/focus a row #75037

ChristianB

Participant

….and
I think one of the jqx-Team can make it better Maybe we can get a opinion from jqxTeam?
Next Step can be: read the jqxTooltip-API, modify the ‘tooltiprenderer’-function

August 21, 2015 at 6:50 am gridrecordtoform by hover/focus a row #75041

Peter Stoev

Keymaster

Hi guys,

It would be better to use the “cellhover” callback and init the Tooltip outside the Grid. You may find examples here in the forum. You may also use the built-in tooltips of jqxGrid by enabling them.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 21, 2015 at 7:57 am gridrecordtoform by hover/focus a row #75044

akanis

Participant

Hi,

i simply want to get the raw index of my geojson property grid using a “rawhover” callback, not for a special tooltip, but for highlighting an geojson object in a map simultaneously .

Christian, your codes does not work out of the box in my application, but your idea i can god use otherwise, thank you.

Thanks Peter, now i’m trying to search examples using “cellhover” callback in this forum to find a way to get the raw index.

Best Regards akanis

Author

Posts

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

You must be logged in to reply to this topic.