jQWidgets Forums

Forum Replies Created

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

Author

Posts

November 7, 2013 at 1:15 pm in reply to: 2 problems with the grid. 2 problems with the grid. #32172

JohnD

Member

Hi Peter,

When we use
$(“#HeaderText”).load(“LoadTOBlock.php”,{ ‘pahe_num’: 1 } );
$(“#MenuLeftBottom”).load(“LoadTOBlock.php”,{ ‘pahe_num’: 1 } );
$(“#MenuLeftTop”).load(“LoadTOBlock.php”,{ ‘pahe_num’: 1 } );
$(“#Center-Block-Content”).load(“LoadTOBlock.php”,{ ‘pahe_num’: 1 } );

It works perfectly with simultanius requests.

November 7, 2013 at 12:16 pm in reply to: 2 problems with the grid. 2 problems with the grid. #32157

JohnD

Member

The strange thing is or one grid is loaded or the other is loaded. never the same grid.

November 7, 2013 at 11:57 am in reply to: 2 problems with the grid. 2 problems with the grid. #32153

JohnD

Member

Hi Peter,

I am using the drag and drop version.
The data will never load if you call a php file that needs loading for more than one second.

Static input Always works.

In my case i am loading 2 php files that are generating xml code from mysql database.

Greetings

John

November 7, 2013 at 9:14 am in reply to: 2 problems with the grid. 2 problems with the grid. #32137

JohnD

Member

Hi it is included in another page before loading this page.

I got a new version of the script but also the loading is not posible there.

(The var gridcells is fixed here)

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Example.</title>
    <link rel="stylesheet" href="/Template/JS/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/Template/JS/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/Template/JS/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="/Template/JS/scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
			var theme = "";
			var url = "/Functies/GenXMLMain.php?SID=<?php echo $_GET['SID']; ?>";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                   { name: 'CustomerID', map: 'm\\:properties>d\\:CustomerID' }
				],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                 url: url
            };
			 var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/' + value + '"/>';
            }
			var mouseoverrender = function (row, datafield, value) {
			var str = value;
			var res = str.split(";");
			if (res[1].length == "1") {
				return '<div title="Direct"><img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/direct_group_icon.png" />' + res[0] + '</div>';
			}
			else
			{
				return '<div  style="font-size:12px; " title="Komt van'+ res[1] +'"><img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/groepen.png" />' + res[0] + '</div>';
			}
         
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
			
			
            // create data grids.
            var draggedCellFirstGrid = new Object();
            var draggedCellSecondGrid = new Object();
            $("#grid1").jqxGrid(
            {
                width: 450,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                rendered: function (type) {
                    // select all grid cells.
                    var gridCells = $('#grid1').find('.jqx-grid-cell');
                    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                    gridCells.jqxDragDrop({
                        appendTo: 'body', theme: theme, dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(25);
                        },
                        dropTarget: $('#grid2'), revert: true
                    });
                    gridCells.off('dragStart');
                    gridCells.off('dragEnd');
                    gridCells.off('dropTargetEnter');
                    gridCells.off('dropTargetLeave');
                    // disable revert when the dragged cell is over the second Grid.
                    gridCells.on('dropTargetEnter', function () {
                        gridCells.jqxDragDrop({ revert: false });
                    });
                    // enable revert when the dragged cell is outside the second Grid.
                    gridCells.on('dropTargetLeave', function () {
                        gridCells.jqxDragDrop({ revert: true });
                    });
                    // initialize the dragged object.
                    gridCells.on('dragStart', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid1").jqxGrid('getcellatposition', position.left, position.top);
                        draggedCellFirstGrid = { row: cell.row, column: cell.column };
                        $(this).jqxDragDrop('data', {
                            value: value
                        });
                    });
                    // set the new cell value when the dragged cell is dropped over the second Grid.      
                    gridCells.on('dragEnd', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid2").jqxGrid('getcellatposition', position.left, position.top);
                        if (cell != null) {
                            $("#grid2").jqxGrid('setcellvalue', cell.row, cell.column, value);
                            $("#grid1").jqxGrid('setcellvalue', draggedCellFirstGrid.row, draggedCellFirstGrid.column, "");
                        }
                    });
                },
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
               { text: 'Toegekende applicaties', datafield: 'CustomerID', width: '100%', cellsrenderer: mouseoverrender, height:10 },	
                ]
            });
				var theme = "";
				var url = "/Functies/GenXMLMain.php?SID=<?php echo $_GET['SID']; ?>";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                   { name: 'CustomerID', map: 'm\\:properties>d\\:CustomerID' }
				],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                 url: url
            };
			 var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/' + value + '"/>';
            }
			var mouseoverrender = function (row, datafield, value) {
			var str = value;
			var res = str.split(";");
			if (res[1].length == "1") {
				return '<div title="Direct"><img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/direct_group_icon.png" />' + res[0] + '</div>';
			}
			else
			{
				return '<div  style="font-size:12px; " title="Komt van'+ res[1] +'"><img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/groepen.png" />' + res[0] + '</div>';
			}
         
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
			
            $("#grid2").jqxGrid(
            {
                width: 450,
                theme: theme,
				source: dataAdapter,
                selectionmode: 'singlecell',
                autoheight: true,
                rendered: function (type) {
                    // select all grid cells.
                    var gridCells = $('#grid2').find('.jqx-grid-cell');
                    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                    gridCells.jqxDragDrop({
                        appendTo: 'body', theme: theme, dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(25);
                        },
                        dropTarget: $('#grid1'), revert: true
                    });
                    gridCells.off('dragStart');
                    gridCells.off('dragEnd');
                    gridCells.off('dropTargetEnter');
                    gridCells.off('dropTargetLeave');
                    // disable revert when the dragged cell is over the second Grid.
                    gridCells.on('dropTargetEnter', function () {
                        gridCells.jqxDragDrop({ revert: false });
                    });
                    // enable revert when the dragged cell is outside the second Grid.
                    gridCells.on('dropTargetLeave', function () {
                        gridCells.jqxDragDrop({ revert: true });
                    });
                    // initialize the dragged object.
                    gridCells.on('dragStart', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid2").jqxGrid('getcellatposition', position.left, position.top);
                        draggedCellSecondGrid = { row: cell.row, column: cell.column };
                        $(this).jqxDragDrop('data', {
                            value: value
                        });
                    });
                    // set the new cell value when the dragged cell is dropped over the second Grid.      
                    gridCells.on('dragEnd', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid1").jqxGrid('getcellatposition', position.left, position.top);
                        if (cell != null) {
                            $("#grid1").jqxGrid('setcellvalue', cell.row, cell.column, value);
                            $("#grid2").jqxGrid('setcellvalue', draggedCellSecondGrid.row, draggedCellSecondGrid.column, "");
                        }
                    });
                },
                         columns: [
      { text: 'Toegekende applicaties', datafield: 'CustomerID', width: '100%', cellsrenderer: mouseoverrender, height:10 },	
                ]
            });
        });
    </script>
</head>
<table>
<tr>
<td>  <div id="grid1">
        </div></td><td>   <div id="grid2">
        </div></td>
</tr>
</table>

November 7, 2013 at 8:42 am in reply to: 2 way move on grid 2 way move on grid #32135

JohnD

Member

http://imageshack.us/photo/my-images/33/vxz1.png/

November 7, 2013 at 8:42 am in reply to: 2 way move on grid 2 way move on grid #32134

JohnD

Member

First Tnx for the fix!

When i move the items it is getting a strange overlay.
Can this be fixed ?

November 5, 2013 at 8:56 am in reply to: 2 problems with the grid. 2 problems with the grid. #31927

JohnD

Member

Grid code:

<?php
 $TempLoc = "/Template/JS/jqwidgets/"; 
 $TempLocScript = "/Template/JS/"; 
?>
	   <link rel="stylesheet" href="<?php echo $TempLoc; ?>styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="<?php echo  $TempLocScript; ?>scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxcore.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxdata.js"></script> 
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxbuttons.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxscrollbar.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxmenu.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxgrid.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxgrid.pager.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxlistbox.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxdropdownlist.js"></script>
    <script type="text/javascript" src="<?php echo $TempLoc; ?>jqxdragdrop.js"></script>
    <script type="text/javascript" src="<?php echo  $TempLocScript; ?>scripts/gettheme.js"></script>
	<script>
$(document).ready(function(){ 
StartLoadApplicaties();
			StartLoadApplicaties2();
})
</script>
    <script type="text/javascript">
		function StartLoadApplicaties()
	{
	var theme = "";
          var url = "http://SERVER/Functies/GenXMLMain.php?SID=<?php echo $_GET['SID']; ?>";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                   { name: 'CustomerID', map: 'm\\:properties>d\\:CustomerID' }
					  
				],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                 url: url
            };
			 var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/' + value + '"/>';
            }
			var mouseoverrender = function (row, datafield, value) {
			var str = value;
			var res = str.split(";");
if (res[1].length == "1") {
    return '<div title="Direct"><img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/direct_group_icon.png" />' + res[0] + '</div>';
}
else
{
    return '<div  style="font-size:12px; " title="Komt van'+ res[1] +'"><img style="margin-left: 5px;" height="16" width="16" src="/Template/IMAGES/rendererIcons/groepen.png" />' + res[0] + '</div>';
}
         
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            { 
                width: 400,
				
                source: dataAdapter,
                theme: theme,
				scrollmode: 'asc',
                columnsresize: false,
				selectionmode: 'singlerow',
				autoheight: true,
				enabletooltips: true,
				pageable: true,
				sortable: true,
				   rendered: function(type)
                {
                    // select all grid cells.
                    var gridCells = $('#grid1').find('.jqx-grid-cell');
                    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                    gridCells.jqxDragDrop({
                        appendTo: 'body', theme: theme, dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(25);
                        },
                        dropTarget: $('#jqxgrid2'), revert: true
                    });
                    gridCells.off('dragStart');
                    gridCells.off('dragEnd');
                    gridCells.off('dropTargetEnter');
                    gridCells.off('dropTargetLeave');
                    // disable revert when the dragged cell is over the second Grid.
                    gridCells.on('dropTargetEnter', function () {
                        gridCells.jqxDragDrop({ revert: false });
                    });
                    // enable revert when the dragged cell is outside the second Grid.
                    gridCells.on('dropTargetLeave', function () {
                        gridCells.jqxDragDrop({ revert: true });
                    });
                    // initialize the dragged object.
                    gridCells.on('dragStart', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#jqxgrid").jqxGrid('getcellatposition', position.left, position.top);
                        $(this).jqxDragDrop('data', {
                            value: value
                        });
                    });
                    // set the new cell value when the dragged cell is dropped over the second Grid.      
                    gridCells.on('dragEnd', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#jqxgrid2").jqxGrid('getcellatposition', position.left, position.top);
                        if (cell != null) {
                            $("#jqxgrid2").jqxGrid('setcellvalue', cell.row, cell.column, value);
                        }
                    });
                },
                columns: [
                           { text: 'Toegekende applicaties', datafield: 'CustomerID', width: '100%', cellsrenderer: mouseoverrender, height:10 },
						   
					
						   
                ]
            });
			
			
			
			
	
	}
var tooltiprenderer = function (element) {
     $(element).jqxTooltip({position: 'mouse', content: $("FromCN").text() });
}
		function StartLoadApplicaties2()
	{
	 var theme = "";
            var url = "/test.php";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                 url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid2").jqxGrid(
            { 
                width: 400,
                source: dataAdapter,
                theme: theme,
				scrollmode: 'default',
                columnsresize: true,
                columns: [
                  { text: 'Beschikbare applicaties (Caching)', datafield: 'CompanyName', width: "100%" },
                ]
            });
			
			
			
	
	}
    </script>
<table>
<tr>
<td>
    <div id='jqxWidget' >
        <div id="jqxgrid"></div>     
    </div>
</td>
<td>
    <div id='jqxWidget' >
        <div id="jqxgrid2"></div>     
    </div>
</td>
</tr>

Loading Code:

<?php 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"SERVERURL");
curl_setopt($ch, CURLOPT_POST, 1);
$STR="";
$SDR="";
curl_setopt($ch, CURLOPT_POSTFIELDS,$STR);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$server_output = curl_exec ($ch);
curl_close ($ch);
$movies = new SimpleXMLElement($server_output);
foreach ($movies->item as $items) {
?>
<entry>
<title type="text"></title>
  <updated>2011-11-30T11:39:28Z</updated>
  <author>
    <name />
  </author>
  <content type="application/xml">
    <m:properties>
	
      <d:CustomerID>Desktop:<?php echo $items->Name; ?></d:CustomerID>
	
    </m:properties>
  </content>
</entry>
	  <?php
}
?>

The loading code is taking 10 seconds to load.

November 5, 2013 at 8:35 am in reply to: 2 problems with the grid. 2 problems with the grid. #31922

JohnD

Member

Any solution ?

November 5, 2013 at 8:23 am in reply to: tooltip for a row in grid tooltip for a row in grid #31919

JohnD

Member

Custom tooltip:


		var mouseoverrender = function (row, datafield, value) {
			var str = value;
			var res = str.split(";");
if (res[1].length == "1") {
    return '<div title="VL1">' + res[0] + '</div>';
}
else
{
    return '<div title="VL2">' + res[0] + '</div>';
}
         
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            { 
                width: 400,
				
                source: dataAdapter,
                theme: theme,
				scrollmode: 'asc',
                columnsresize: false,
				selectionmode: 'singlerow',
				autoheight: true,
				enabletooltips: true,
				pageable: true,
				sortable: true,
		columns: [
                           { text: 'CustomerID', datafield: 'CustomerID', width: '100%', cellsrenderer: mouseoverrender, height:10 },
						   
					
						   
                ]
            });

Make sure the input is ValueInTextbox;ValueInToolTip

Author

Posts

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