jQWidgets Forums

Tagged: grid, iframe, jqxgrid, jqxTabs, tab, Tabs

This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 11 years, 7 months ago.

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

Author

jqxTab and iframe Posts

October 20, 2013 at 5:35 pm jqxTab and iframe #31064

neong

Participant

Hai, I have read the post you have added at http://www.jqwidgets.com/community/topic/tabs-iframes/#post-9204. I have a problem to get the iframe content which using syntax as

$('#jqxTabs').jqxTabs('addLast', label, '<div style="height: 100%;"><iframe src="' + src + '" height="100%" width="100%" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" /></div>');

Which the src content a ‘form’.

Failed to get the form data by using (‘#myFrameID’).contents().find(‘#myFormID’).serialize();

Do you have any suggestion to get the form data by this method? Thanks.

October 21, 2013 at 2:51 am jqxTab and iframe #31068

neong

Participant

Just ignore my post. I have found the solution.

October 21, 2013 at 3:40 am jqxTab and iframe #31069

neong

Participant

Now, I have another problem which I was failed to get the iframe content with jqxgrid.

Could you please teach me how to get the jqxgrid in iFrame? Thanks.

October 21, 2013 at 6:19 am jqxTab and iframe #31084

Dimitar

Participant

Hello neong,

There are no prerequisites for having a grid in an iframe. For exmple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <iframe src="defaultfunctionality.htm" style="width: 800px; height: 800px;"></iframe>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </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/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> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

The first page has an iframe with src pointing to the second page with a grid (the Default Functionality demo).

Best Regards,
Dimitar

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

October 21, 2013 at 6:23 am jqxTab and iframe #31085

neong

Participant

Hai Dimitar,

What I mean is, How to access the jqxgrid in iframe?

October 21, 2013 at 6:48 am jqxTab and iframe #31086

Dimitar

Participant

Hello neong,

Unfortunately, this is not possible.

Best Regards,
Dimitar

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

October 21, 2013 at 7:27 am jqxTab and iframe #31088

neong

Participant

Hai Dimitar,

Thanks for your reply. Have any plan to release this features in new version?

October 21, 2013 at 8:12 am jqxTab and iframe #31089

Dimitar

Participant

Hi neong,

This is not related to jqxGrid but to browser restrictions due to security reasons. Unfortunately, we cannot do anything on the matter.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.