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 1 week, 1 day ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • jimbears
    Participant

    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() / 1900

    I 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>


    Hristo
    Participant

    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 Appearancepage, 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 Sizedemo.
    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com


    jimbears
    Participant

    Hristo,

    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


    Hristo
    Participant

    Hello Jim,

    You could try to use the cellhover callback to get the x” and “y” coordinates.
    More details about this you could find in the API Documentation page.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    jimbears
    Participant

    Hristo,

    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


    admin
    Keymaster

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


    jimbears
    Participant

    Peter,

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


    Hristo
    Participant

    Hello 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 Hristov

    jQWidgets team
    https://www.jqwidgets.com


    jimbears
    Participant

    Hristo,

    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


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.