jQWidgets Forums

Tagged: copy, grid, jqxgrid, jqxTabs, paste, tab, Tabs

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 1 month ago.

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

Author

Copy Paste Posts

April 18, 2014 at 10:27 am Copy Paste #53283

Participant

Suppose i copy from 1 grid why am i not able to paste in some other grid? In JQxTabs only cant i copy from 1 tab and paste in another tab?

April 22, 2014 at 6:40 am Copy Paste #53390

Dimitar

Participant

Hello Akshar AK,

Here is an example which shows grids in two tabs. Copy/paste from the first to the second and vice versa is supported.

<!DOCTYPE html>
<html lang="en">
<head>
    <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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initGrid1 = function () {
                var source =
               {
                   datatype: "csv",
                   datafields: [
                        { name: 'Date' },
                        { name: 'S&P 500' },
                        { name: 'NASDAQ' }
                    ],
                   url: '../sampledata/nasdaq_vs_sp500.txt'
               };

                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

                $("#jqxGrid1").jqxGrid(
                {
                    width: '100%',
                    height: '84%',
                    source: dataAdapter,
                    columns: [
                        { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
                        { text: 'S&P 500', datafield: 'S&P 500', width: 150 },
                        { text: 'NASDAQ', datafield: 'NASDAQ' }
                    ]
                });
            }

            var initGrid2 = function () {
                var source =
               {
                   datatype: "csv",
                   datafields: [
                        { name: 'Date' },
                        { name: 'S&P 500' },
                        { name: 'NASDAQ' }
                    ],
                   url: '../sampledata/nasdaq_vs_sp500.txt'
               };

                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

                $("#jqxGrid2").jqxGrid(
                {
                    width: '100%',
                    height: '84%',
                    source: dataAdapter,
                    columns: [
                        { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250 },
                        { text: 'S&P 500', datafield: 'S&P 500', width: 150 },
                        { text: 'NASDAQ', datafield: 'NASDAQ' }
                    ]
                });
            }

            // init widgets.
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        initGrid1();
                        break;
                    case 1:
                        initGrid2();
                        break;
                }
            }

            $('#jqxTabs').jqxTabs({ width: 600, height: 560, initTabContent: initWidgets });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/catalogicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            Grid 1</div>
                    </div>
                </li>
                <li>
                    <div style="height: 20px; margin-top: 5px;">
                        <div style="float: left;">
                            <img width="16" height="16" src="../../images/catalogicon.png" />
                        </div>
                        <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                            Grid 2</div>
                    </div>
                </li>
            </ul>
            <div style="overflow: hidden;">
                <div id="jqxGrid1">
                </div>
            </div>
            <div style="overflow: hidden;">
                <div id="jqxGrid2">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.