jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Posts

December 31, 2015 at 6:26 pm in reply to: Row(s) highlighting(Color change) based on a search value Row(s) highlighting(Color change) based on a search value #79974

ChristianB

Participant

The Code is modifyed.

Take a look on this part:

var cellclass = function (row, columnfield, value) {
	var rowid = $('#jqxgrid').jqxGrid('getrowid', row);
	var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowid);
	if (data.firstname == $("#searchText").val()) {
		return 'red';
	}
}

December 30, 2015 at 9:18 am in reply to: Row(s) highlighting(Color change) based on a search value Row(s) highlighting(Color change) based on a search value #79922

ChristianB

Participant

Hi phoebe,
maybe this?

Best regards
Chrisitan

November 8, 2015 at 10:10 am in reply to: jqxGrid – Empty Rows if JSON = {"data": null} jqxGrid – Empty Rows if JSON = {"data": null} #77866

ChristianB

Participant

Hello JQX-Team,
Now the Widget Response “jqxDataAdapter: JSON Parse error! Invalid JSON. Please, check your JSON or your jqxDataAdapter initialization!” in all Browsers.
Your Code is: console.log('jqxDataAdapter: JSON Parse error! Invalid JSON. Please, check your JSON or your jqxDataAdapter initialization!');.
Can you please suppress this console.log for IE in future Versions?

Best Regards
Christian B.

September 18, 2015 at 9:00 pm in reply to: selectrow in nested Grid after rendering selectrow in nested Grid after rendering #75998

ChristianB

Participant

Hi Vladimir,
thx for that Tip. That’s the way.

LLAP
Christian

August 25, 2015 at 8:28 am in reply to: jqx-all Problem 3.8.1 to 3.8.2 jqx-all Problem 3.8.1 to 3.8.2 #75144

ChristianB

Participant

Hi Peter,
thanks for the response.
Have you take a look on the User-Agent?

Regards
Christian

August 21, 2015 at 6:33 am in reply to: gridrecordtoform by hover/focus a row 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:24 am in reply to: gridrecordtoform by hover/focus a row 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 20, 2015 at 6:49 pm in reply to: Problem by collapse or resizing jqxSplitter Problem by collapse or resizing jqxSplitter #75009

ChristianB

Participant

me again,
OK, in both loaded Modules i’ve take the same id for the nested splitter.
If i change it to different id’s the issue is solved.
Solution: $('#msplitter1').jqxSplitter('destroy');
Next Step: I print a book of your API-Dokumentation and hammer it against my head.

enjoy your day
Christian

August 20, 2015 at 3:51 pm in reply to: gridrecordtoform by hover/focus a row 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 1:30 pm in reply to: Problem by collapse or resizing jqxSplitter Problem by collapse or resizing jqxSplitter #75002

ChristianB

Participant

Hi Peter,
of course I have test your suggestion, but it dont work in my example.
Now i’ve modified and save the example-code
A Screenshot from my result is here

Maybe it is faster you post a suggestion (CODE) here?

Best Regards
Christian

PS: in my Workplace i am on the way to get the Enterprise License. Hope to get it next day’s.

August 20, 2015 at 11:49 am in reply to: Problem by collapse or resizing jqxSplitter Problem by collapse or resizing jqxSplitter #74996

ChristianB

Participant

Hi Peter,
sorry for this question but i do not know what you mean: you can’t see the issue in my Code-Example?

regards
Christian

August 20, 2015 at 11:14 am in reply to: Button disabled: true does not work Button disabled: true does not work #74994

ChristianB

Participant

Thanks a lot Dimitar

August 20, 2015 at 3:11 am in reply to: Dynamic columns Dynamic columns #74969

ChristianB

Participant

Hi ashwin prabhu,
here is the Code of my solution:

var gridColumns 	= [];
var dataFieldColumns 	= [];

for(var v = 0; v < values.length; v++){
	gridColumns.push({ text:yourColname, dataField: yourDataBinding});
	dataFieldColumns.push({name:yourDataName, type: yourDataType});
}

var source =
{
	datatype: "json",
	datafields: dataFieldColumns,
	localdata: whatever
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxTable").jqxGrid(
{
	height: '100%',
	width: '100%',
	source: dataAdapter,
	columns: gridColumns
});

hope it’s helpful
LLAP
Christian

August 18, 2015 at 7:24 pm in reply to: Problem by collapse or resizing jqxSplitter Problem by collapse or resizing jqxSplitter #74936

ChristianB

Participant

Hallo Peter,
first: thank you for your patience.
Unfortunately this does not work.
Only this can suppress the malfunction (only a Workaround):

$('#splitter1').on('expanded', function (event) {
	$('#msplitter1').jqxSplitter('refresh');
});
$('#splitter1').on('collapsed', function (event) {
	$('#msplitter1').jqxSplitter('refresh');
});

or this:

$('#splitter1').on('resize', function (event) {
	$('#msplitter1').jqxSplitter('refresh');
});

I’ve tested many times, different ways. I make 1:1 Copy from your Splitter->nested Splitter Demo an modified it for “Load Module on ButtonClick”. Always the same Problem by loading the second / sometimes the third Module.
Please, my example is writable…

Best Regards
Christian

August 18, 2015 at 6:39 am in reply to: Problem by collapse or resizing jqxSplitter Problem by collapse or resizing jqxSplitter #74913

ChristianB

Participant

Hi Peter,
$('#splitter1').jqxSplitter({ height: '100%', width: '100%', splitBarSize:7, touchSplitBarSize:20, resizable : true, panels: [{ size: '20%' }, { size: '80%', collapsible: false}] });

spliter1 is not false. Only the right panel is false. The nested splitters are false too. But this is not important.
Next example: Part2

LLAP
Christian

Author

Posts

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →