jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid X-Y selections incorrect after css transform scale
This topic contains 9 replies, has 3 voices, and was last updated by Hristo 5 years ago.
-
Author
-
When having a grid in a html page with the settings below, the cursor for mouse over a cell for both X and Y is not on the correct target cell.
This is not desired. What is desired is the cell is highlighted when it is moused over. Depending on the browser resize (try zoom in or out using the HTML provided, or resize the render/result pane of the JSFiddle link provided.
With a body width of 1900, and:
css for the html body of:
transformOrigin = “top left”;
transform = “scale({calculated scale, based on html width vs 1900 });”Note: {calculated scale, based on html width vs 1900 } =
$(‘html’).innerWidth() > 1900 ? 1 : $(‘html’).innerWidth() / 1900I have created the https://jsfiddle.net/ufLeom7n/1/ where you can see this.
full HTML listed below
===========================================================
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<script src=”http://code.jquery.com/jquery-1.9.1.js” integrity=”sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA=” crossorigin=”anonymous”></script>
<script src=”https://jqwidgets.com/public/jqwidgets/jqx-all.js”></script>
<link href=”https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css” rel=”stylesheet” />
<link href=”https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css” rel=”stylesheet” />
<script src=”https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js”></script>
<script type=”text/javascript”>
function Rescale() {
htmlWidth = $(‘html’).innerWidth();
bodyWidth = 1900;
scale = htmlWidth > bodyWidth ? 1 : htmlWidth / bodyWidth;
document.body.style.transformOrigin = ‘top left’;
document.body.style.transform = ‘scale(‘ + scale + ‘)’;
}
var data = generatedata(500);
var source = { localdata: data, datafields: [{ name: ‘firstname’, type: ‘string’ }, { name: ‘lastname’, type: ‘string’ }, { name: ‘productname’, type: ‘string’ }
, { name: ‘date’, type: ‘date’ }, { name: ‘quantity’, type: ‘number’ }, { name: ‘price’, type: ‘number’ }]
, datatype: “array” };
$(document).ready(function() {
Rescale();
$(window).resize(function () {
Rescale();
});
var adapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid({ width: 900, theme: ‘energyblue’, source: adapter, sortable: true, selectionmode: ‘singlecell’
, columns: [{ text: ‘First Name’, datafield: ‘firstname’, columngroup: ‘Name’, width: 90 }
, { text: ‘Last Name’, columngroup: ‘Name’, datafield: ‘lastname’, width: 90 }
, { text: ‘Product’, datafield: ‘productname’, width: 170 }
, { text: ‘Order Date’, datafield: ‘date’, width: 160, cellsformat: ‘dd-MMMM-yyyy’ }
, { text: ‘Quantity’, datafield: ‘quantity’, width: 80, cellsalign: ‘right’ }
, { text: ‘Unit Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2′ }]
});
});
</script>
</head>
<body>
<div style=”background: blue; position: absolute; top: 0px; left: 0px; width: 1900px;height:100px;”></div>
<div style=”background: green; position: absolute; top: 100px; left: 0px; width: 300px;height:600px;”></div>
<div id=’jqxWidget’ style=”position:absolute; top:100px;left:300px;”>
<div id=”jqxgrid”></div>
</div>
</body>
</html>Hello jimbears,
I would like to mention that these settings are CSS style settings that are not described in our documentation.
This is a personal choice.
You could take a look at the “Styling and Appearance” page, you could use the public classes to stylizing.
Also, I would like to suggest you contact the Sales Department (sales@jqwidgets.com) with a request for custom development.On the other side, if you want the jqxGrid to resize with the window then you could use the approach from the “Fluid Size” demo.
Only, change the size of the font depends on the size (also, some of the other settings) – this will be an easier and sure way to achieve such behavior.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHristo,
The resize works just fine in demo I provided, the issue I have is the mouse x/y position vs the grid highlighted position.
While I did not see this in your documentation for the CSS style settings we are using, I am just looking to solve the issue of being able to select an item on the grid correctly. Can you provide some guidance on this?
Thanks in advance,
Jim
Hello Jim,
You could try to use the
cellhovercallback to get the “x” and “y” coordinates.
More details about this you could find in the API Documentation page.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHristo,
The problem in the X-Y issue is the is still a problem, and the grid is unusable for selection as the X-Y is completely off. So is the cell hover. So is the row hover. I have revised the jsfiddle to make this clear. https://jsfiddle.net/0a9r6upo/
You will find there are 3 buttons on the left side (Scale 1.5/Scale 1/Scale 0.5. Perhaps you can tell me how to correctly get the X-Y from a cell hover after clicking either Scale 1.5 or Scale 0.5. The highlighted cell is completely off. I would appreciate some help on this.
Thanks in advance,
Jim
Hi Jim,
We cannot guarantee that coordinates will be correct when you scale the component. We use pageX, pageY, clientX, clientY event coordinates quite extensively in the Grid. My suggestion is to avoid using transform: scale for components such as Grid, Scheduler.
Regards,
PeterPeter,
Where in the code would you suggest we start looking in the grid, so that we can resolve this on our side, since we need both the grid and the transform: scale? Do you think you can point us down the right direction?
Thanks in advance,
JimHello Jim,
My colleague provides you a suggestion.
It will be better if you change the size of the jqxGrid with the three different options that you use.
With the initial state (when scaling is set “1“) then the jqxGrid will take default font size, columns, and the height of the rows.
After that with changed scale factor just change its sizes multiplied with it.
Please, take a look at this approach:
http://jsfiddle.net/785pn9qe/2/
I hope this will help.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comHristo,
I am not clear how this solved the problem of:
Cell hover does not hover over the correct cell when resized using either css zoom(x), or transform: scale(x).Nonetheless, to try your solution I provided the https://jsfiddle.net/y3nbrumj/ JSFiddle. I am not seeing how this applies to the problem we submitted. If this does, can you please elucidate further.
To be clear: We are not looking at scaling to 3 different sizes. We provided those buttons so you can quickly see, in a multi-pane fiddle, how far off the mouse and highlighted cell are when at scales 0.5 and 1.5. These buttons are not in our application. We are looking to have the scale adjusted by the window size, just like the example we provided.
Can you please provide guidance on how we can solve the X-Y, mouse location issue?
Absent a solution, as previously requested, are there places in the code we should look at?
Thanks in advance,
Jim
Hello Jim,
My idea was to use the API of the jqxGrid.
Just change it depends on the current scale factor.
In that way, it shows the correct hovering of the cells.
I would like to suggest you another widget created from us – Smart Grid.
Please, take a look at this demo.
You could try the transform settings on it.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.