Forum Replies Created

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts

  • 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';
    	}
    }

    ChristianB
    Participant

    Hi phoebe,
    maybe this?

    Best regards
    Chrisitan


    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.


    ChristianB
    Participant

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

    LLAP
    Christian

    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


    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


    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

    • This reply was modified 4 years, 3 months ago by  ChristianB.
    • This reply was modified 4 years, 3 months ago by  ChristianB.
    • This reply was modified 4 years, 3 months ago by  ChristianB.

    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


    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


    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.

    • This reply was modified 4 years, 3 months ago by  ChristianB.

    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


    ChristianB
    Participant

    Thanks a lot Dimitar

    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


    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

    • This reply was modified 4 years, 3 months ago by  ChristianB.
    • This reply was modified 4 years, 3 months ago by  ChristianB.
    • This reply was modified 4 years, 3 months ago by  ChristianB.

    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

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