jQWidgets Forums

Tagged: grid, jqwidgets grid

This topic contains 6 replies, has 2 voices, and was last updated by Markus 11 years, 3 months ago.

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

Author

Changing zoom factor let the grid disappear Posts
January 28, 2014 at 11:45 am Changing zoom factor let the grid disappear #48515

Markus
Participant

Hi,
I discovered that the grid suddenly disappears when the zoom factor of the browser window is changed. But it is visible when the zoom factor is set to 50, 100 oder 200%. The behaviour is similar in Chrome and IE9.
We have version 3.0.3 in use.

Whar can I do to avoid this strange behaviour?

Greetings
Markus

January 28, 2014 at 11:55 am Changing zoom factor let the grid disappear #48518

Peter Stoev
Keymaster

Hi Markus,

The default zoom factor as far as I know is 100%. If you experience some zooming issue, then please provide a sample which demonstrates it and we will test it with the latest version which is 3.1.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 29, 2014 at 11:55 am 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

January 29, 2014 at 12:24 pm Changing zoom factor let the grid disappear #48604

Peter Stoev
Keymaster

Hi Markus,

Unfortunately, the provided information is not enough for reproducing such behavior. We are not aware where the Grid is placed, whether it is in a container or not, what are its container’s settings if there is such, what are your page’s settings, etc. If you wish from us to test your scenario, then please provide a sample which demonstrates the behavior which you’re writing about.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 29, 2014 at 12:41 pm 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 12:45 pm Changing zoom factor let the grid disappear #48607

Peter Stoev
Keymaster

Hi Markus,

I think that I understand what is the problem. The Grid’s size is set to 100%. The size of its container – ‘jqxWidget’ is not set which means that the Grid tries to expand itself to something without size. In addition, the Document’s Body tag is not styled, too i.e it would not expand its height to 100% as well. Here’s a sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 30, 2014 at 8:15 am Changing zoom factor let the grid disappear #48660

Markus
Participant

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

Greetings
Markus
Author

Posts

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

You must be logged in to reply to this topic.