jQWidgets Forums

Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 30, 2014 at 8:15 am in reply to: Changing zoom factor let the grid disappear Changing zoom factor let the grid disappear #48660

    Markus
    Participant

    Hi Peter,
    thank you for your explanation. Now it works fine.

    Greetings
    Markus

    January 29, 2014 at 12:41 pm in reply to: Changing zoom factor let the grid disappear Changing zoom factor let the grid disappear #48605

    Markus
    Participant

    Hi Peter,

    originally we’re using our HTML and Javascript Code inside a Website which is hosted by SharePoint. So it is a bit difficult to extract a sample.
    But I have reproduced the issue in a single html file.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This example shows how to create a Grid from JSON string.</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../scripts/gettheme.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var theme = “”;

    var data = ‘[{ “ID”: 1, “Name”: “Item 1”, “Description”: “Item 1 Description” }, { “ID”: 2, “Name”: “Item 2”, “Description”: “Item 2 Description” }, { “ID”: 3, “Name”: “Item 3”, “Description”: “Item 3 Description” }]’;
    var dataFields = [
    {name: ‘ID’,label: ‘ID’,type: ‘integer’,value: ‘ID’,text: ‘ID’,datafield: ‘ID’,width: 35,checked: false,cellsalign: ‘right’},
    {name: ‘Name’,label: ‘Name’,type: ‘string’,value: ‘Name’,text: ‘Name’,datafield: ‘Name’,width: 100,checked: false},
    {name: ‘Description’,label: ‘Description’,type: ‘string’,value: ‘Description’,text: ‘Description’,datafield: ‘Description’,width: 200,checked: false}
    ]

    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: dataFields,
    localdata: data
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#jqxgrid”).jqxGrid(
    {
    width: ‘100%’,
    height: ‘100%’,
    source: dataAdapter,
    theme: ‘metro’,
    columnsresize: true,
    columns: dataFields
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”></div>
    </div>
    </body>
    </html>

    To be exact, the above mentioned behaviour inside a browser concerns Google Chrome. In IE 9 it behaves a litte bit different.

    Greetings
    Markus

    January 29, 2014 at 11:55 am in reply to: Changing zoom factor let the grid disappear Changing zoom factor let the grid disappear #48601

    Markus
    Participant

    Hi Peter,
    thank you for reply. In the meantime I figured out what the problem is.
    We’re using the following grid initilization:

    $(‘#grid’).jqxgrid({
    width: ‘100%’,
    heigth: ‘100%’,
    …
    });

    We changed the percent values in fixed values and now it works fine.

    Conspicuous is the fact, that the grid with a zoom factor of 50%, 100% and 200% appears. Other zoom factors than the mentioned let the grid disappear.

    Greetings
    Markus

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