jQWidgets Forums

jQuery UI Widgets Forums Grid 2 problems with the grid.

Tagged: 

This topic contains 11 replies, has 2 voices, and was last updated by  JohnD 11 years, 8 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • 2 problems with the grid. #31750

    JohnD
    Member

    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 },

    ]
    });

    }

    2 problems with the grid. #31922

    JohnD
    Member

    Any solution ?

    2 problems with the grid. #31924

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    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.

    2 problems with the grid. #31932

    Peter Stoev
    Keymaster

    Hi JohnD,

    Where’s the DOCTYPE on that page? Are your SCRIPT in the page’s HEAD section?

    Best Wishes,
    Peter Stoev

    2 problems with the grid. #31938

    Peter Stoev
    Keymaster

    Hi 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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    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>
    2 problems with the grid. #32139

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    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

    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.

    2 problems with the grid. #32158

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    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.

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

You must be logged in to reply to this topic.