jQWidgets Forums

This topic contains 6 replies, has 3 voices, and was last updated by mbmleone 10 years, 3 months ago.

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

Author

CSS transform on jqxGrid Posts

January 26, 2015 at 12:54 pm CSS transform on jqxGrid #66011

Participant

Hello,

I’m trying to use jqxGrid with a CSS transform, but to my surprise it’s not working correctly.
All other components work fine, only jqxGrid shows problems.
The cells are resized correctly, but the click/mouseover areas are not aligned with the cells anymore.
Also the border around the grid is not aligned anymore.

Here is an example of that:
http://marco.leone.nl/test/
When you load the page it works fine, mouseover/click selects the correct cell.
However when you enable the “scaling” button then it’s selecting another cell with mouseover/click.
Also you can see the border around the grid disappears.

I suspect this is a small problem with the layer that makes this functionality possible.
Maybe it’s using percentages instead of pixels, that would explain this behavior.
Could this please be checked?
Or does someone else know a way I can compensate this?

Thanks!

Best regards,
Marco

January 27, 2015 at 7:25 am CSS transform on jqxGrid #66046

Nadezhda

Participant

Hello Marco,

Here is an example which shows how to dynamically scale the jqxGrid with width and height in percentages.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: "60%",
                height: "85%",
                source: dataAdapter,
                pageable: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: "50%", height: "100%" },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: "50%", height: "100%" }
                ]
            });
            $('#jqxButton').jqxButton({
            });
            $('#jqxButton').on('click', function () {
                $("#jqxgrid").jqxGrid({
                    width: "40%",
                    height: "55%",
                    columns: [
                      { text: 'Product Name', datafield: 'ProductName', width: "50%" },
                      { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: "50%" },
                    ]
                });
            });
        });
    </script>
</head>
<body>
    <div id="jqxgrid">
    </div>
    <input type="button" value="Scaling" id='jqxButton' />
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

January 31, 2015 at 2:26 pm CSS transform on jqxGrid #66253

mbmleone

Participant

Hello Nadezhda,

Thanks for the suggestion.
This would however not fully work as it would not scale the fonts.
Also it’s not easy to combine with the transform scaling and we need that for other parts of the page.
Could you please check why transform scaling is not working correctly?
That would be the best solution for us.

Thanks!

Best regards,
Marco

February 2, 2015 at 11:32 am CSS transform on jqxGrid #66301

Nadezhda

Participant

Hi Marco,

We will investigate why it occurs.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

February 12, 2015 at 12:45 pm CSS transform on jqxGrid #67006

mbmleone

Participant

Hello Nadezhda,

We would appreciate that.
Any updates on this investigation?

Best regards,
Marco

February 12, 2015 at 12:52 pm CSS transform on jqxGrid #67009

Peter Stoev

Keymaster

Hi Marco,

Unfortunately, we don’t have updates. The item is with low priority. You may not use transform for now.

Best regards,
Peter Stoev

February 23, 2015 at 12:06 pm CSS transform on jqxGrid #67508

mbmleone

Participant

Hello Peter,

No problem, I’m investigating this problem myself and already know the basic problem.
The basic problem is that Javascript itself doesn’t give the right X and Y-coordinates, these need to be converted.
I have reviewed some of the code and suspect you use the plain Javascript mouse events.
Is this correct? Or is also the JQuery event handling used?
Please let me know as then I can check how to add conversion of the X and Y-coordinates of events.
Thanks!

Best regards,
Marco

Author

Posts

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

You must be logged in to reply to this topic.