jQWidgets Forums
jQuery UI Widgets › Forums › Grid › 2 problems with the grid.
Tagged: grid
This topic contains 11 replies, has 2 voices, and was last updated by JohnD 11 years, 8 months ago.
-
Author
-
Hi,
I got 2 problems with the code below.
1. When i fill the first block with a image and i want to scroll with the scroll bar it will not scroll. (scrolling wit the mouse works perfectly)
2. When i want to fill the 2 divs 1 div Always is empty, the file that needs to be loaded will not load except if i put an alert before the second function.The data that i am requesting is a php file that is connected to mysql database and is delivering xml files.
How can i fix these 2 issues ? (I got this issue on ie and Firefox)
Jqwidets version 3.0.3:
$(document).ready(function(){
StartLoadApplicaties();
StartLoadApplicaties2();
})function StartLoadApplicaties()
{var theme = “”;
var url = http://SERVERNAME/Functies/GenXMLMain.php;
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘admindescription’, map: ‘m\\:properties>d\\:description’ },
{ name: ‘name’, map: ‘m\\:properties>d\\:name’ },
{name: ‘prop2’, map: ‘m\\:properties>d\\:prop2’ },
{name: ‘username’, map: ‘m\\:properties>d\\:username’ },
{name: ‘Department’, map: ‘m\\:properties>d\\:Department’ }],
root: “entry”,
record: “content”,
id: ‘m\\:properties>d\\:CustomerID’,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);// Create jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,columnsresize: true,
columns: [
{ text: ‘Toegekent’, datafield: ‘description’, width: 300 },
{ text: ‘A’, datafield: ‘prop2’, width: 300 },
{ text: ‘B’, datafield: ‘admindisplayname’, width: 300 },
{ text: ‘C’, datafield: ‘username’, width: 300 },
{ text: ‘D’, datafield: ‘Department’, width: 300 },]
});}
function StartLoadApplicaties2()
{var theme = “”;
var url = http://SERVERNAME/Functies/GenXMLMain.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: 670,
source: dataAdapter,
theme: theme,
scrollmode: ‘default’,
columnsresize: true,
columns: [
{ text: ‘A’, datafield: ‘CompanyName’, width: 670 },]
});}
Any solution ?
Hi JohnD,
Unfortunately, from the provided code and explanation we cannot understand what is the problem or how we can reproduce it. The provided code in this post is not sufficient for testing.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comGrid 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.
Hi JohnD,
Where’s the DOCTYPE on that page? Are your SCRIPT in the page’s HEAD section?
Best Wishes,
Peter StoevHi JohnD,
I also noticed another problem in that code. The following:
var gridCells = $('#grid1').find('.jqx-grid-cell');
will throw an error and will break further scripts to be executed. The reason is that there is no DIV tag with ID “grid1” on that page.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi 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>
Hi JohnD,
As I cannot test that code, because I do not have the data that you try to load into the Grids, I suggest you to look for samples about loading multiple Grids on the same web page like these: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/masterdetails.htm?arctic and http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdrop.htm?arctic
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi 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
The strange thing is or one grid is loaded or the other is loaded. never the same grid.
Hi JohnD,
Unfortunately, I cannot reproduce such behavior locally. Most probably the Server code is not capable of handling 2 simultaneous requests at the same time or something similar to that happens on your side.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi 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.
-
AuthorPosts
You must be logged in to reply to this topic.