jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 145 total)

1 2 … 10 →

Author

Posts

June 21, 2013 at 11:49 am in reply to: Horizontal menu not showing all options if screen not wide enough Horizontal menu not showing all options if screen not wide enough #23577

support

Participant

Hi khaldryck,

Please take a look at the following example:

<!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>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: '100%', theme: theme });
                $("#jqxMenu").css('visibility', 'visible');
            });
        </script>
          <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'>
                <ul>
                    <li><a href="#Home">Home</a></li>
                    <li>Solutions
                        <ul style='width: 250px;'>
                            <li><a href="#Education">Education</a></li>
                            <li><a href="#Financial">Financial services</a></li>
                            <li><a href="#Government">Government</a></li>
                            <li><a href="#Manufacturing">Manufacturing</a></li>
                            <li type='separator'></li>
                            <li>Software Solutions
                                <ul style='width: 220px;'>
                                    <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                                    <li><a href="#Mobile">Mobile</a></li>
                                    <li><a href="#RIA">Rich Internet applications</a></li>
                                    <li><a href="#TechnicalCommunication">Technical communication</a></li>
                                    <li><a href="#Training">Training and eLearning</a></li>
                                    <li><a href="#WebConferencing">Web conferencing</a></li>
                                </ul>
                            </li>
                            <li><a href="#">All industries and solutions</a></li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li><a href="#PCProducts">PC products</a></li>
                            <li><a href="#MobileProducts">Mobile products</a></li>
                            <li><a href="#AllProducts">All products</a></li>
                        </ul>
                    </li>
                    <li>Support
                        <ul style='width: 200px;'>
                            <li><a href="#SupportHome">Support home</a></li>
                            <li><a href="#CustomerService">Customer Service</a></li>
                            <li><a href="#KB">Knowledge base</a></li>
                            <li><a href="#Books">Books</a></li>
                            <li><a href="#Training">Training and certification</a></li>
                            <li><a href="#SupportPrograms">Support programs</a></li>
                            <li><a href="#Forums">Forums</a></li>
                            <li><a href="#Documentation">Documentation</a></li>
                            <li><a href="#Updates">Updates</a></li>
                        </ul>
                    </li>
                    <li>Communities
                        <ul style='width: 200px;'>
                            <li><a href="#Designers">Designers</a></li>
                            <li><a href="#Developers">Developers</a></li>
                            <li><a href="#Educators">Educators and students</a></li>
                            <li><a href="#Partners">Partners</a></li>
                            <li type='separator'></li>
                            <li>By resource
                                <ul>
                                    <li><a href="#Labs">Labs</a></li>
                                    <li><a href="#TV">TV</a></li>
                                    <li><a href="#Forums">Forums</a></li>
                                    <li><a href="#Exchange">Exchange</a></li>
                                    <li><a href="#Blogs">Blogs</a></li>
                                    <li><a href="#Experience Design">Experience Design</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Company
                        <ul style='width: 180px;'>
                            <li><a href="#About">About Us</a></li>
                            <li><a href="#Press">Press</a></li>
                            <li><a href="#Investor">Investor Relations</a></li>
                            <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                            <li><a href="#Careers">Careers</a></li>
                            <li><a href="#Showcase">Showcase</a></li>
                            <li><a href="#Events">Events</a></li>
                            <li><a href="#ContactUs">Contact Us</a></li>
                            <li><a href="#Become an affiliate">Become an affiliate</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
      </div>
</body>
</html>

If you do not set the ‘height’ property of the jqxMenu all the options would appear properly. The menu’s height would be auto adjusted.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 11:01 am in reply to: how to check input validation with ajax? how to check input validation with ajax? #23573

support

Participant

Hi snowyl,

If you want to submit after validate you can by using ‘validate’ function as shown:

$('#testForm').jqxValidator('validate', function (result) {
                    alert(result);
                }
                );

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 10:02 am in reply to: Dynamic Radio Button Group Dynamic Radio Button Group #23569

support

Participant

Hi rskbuvan,

It is not possible to convert a radiobutton input tag into jqxRadioButton.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 21, 2013 at 9:17 am in reply to: Dynamic Radio Button Group Dynamic Radio Button Group #23564

support

Participant

Hi rskbuvan,

The ‘loadFromSelect’ method is used when you want to load items from a select tag and the parameter that you should use is the id of the select tag.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 12:04 pm in reply to: catch past event catch past event #23435

support

Participant

Hi David,

Please take a look at the following example:

<!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.9.0.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = '../sampledata/nasdaq_vs_sp500.txt';
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date', type: 'date' },
                    { name: 'S&P 500', type: 'float' },
                    { name: 'NASDAQ', type: 'float' }
                ],
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,   
                columnsresize: true,
                editable: true,
                ready: function()
                {
                    $("#jqxgrid").jqxGrid('focus');
                },
                editmode: 'selectedcell',
                selectionmode: 'singlecell',
                handlekeyboardnavigation: function(event)
                {
                    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                    if (key == 86 && event.ctrlKey) {
                        alert('Pressed ctrl+V Key.');
                        return true;
                    }
                },
                columns: [
                  { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250},
                  { text: 'S&P 500', datafield: 'S&P 500', width: 200, cellsformat: 'f' },
                  { text: 'NASDAQ', datafield: 'NASDAQ', width: 200, cellsformat: 'f' }         
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 11:55 am in reply to: How to send data to server when bind data source How to send data to server when bind data source #23434

support

Participant

Hi snowyl,

Actiondata is not passed to the server because the expected field name is data instead of date. If you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 11:49 am in reply to: bind grid to mysql database bind grid to mysql database #23431

support

Participant

Hi Jack,

Thank you for your interest in jqxGrid. Please take a look at the provided example at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/customcolumn.htm.The sample demonstrates how to add a custom column with links. In your code you may specify each link to point to a different php page.If you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 8:25 am in reply to: How to confirm before updaterow? How to confirm before updaterow? #23401

support

Participant

Hi Mark,

In order to show prompt before the update, in the Grid source object’s updaterow callback, add your prompt code. Then, depending on the result of the user action, call commit with true or false.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 7:29 am in reply to: Get selected row data Get selected row data #23398

support

Participant

Hi Shardik,

Please take a look at the following example:

<!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.9.0.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            $("#jqxButton").jqxButton({ width: '150' });
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
       
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
         
            $("#jqxButton").on('click', function () {
                var getselectedrowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
                if (getselectedrowindexes.length > 0)
                {
                    // returns the selected row's data.
                    var selectedRowData = $('#jqxgrid').jqxGrid('getrowdata', getselectedrowindexes[0]);
                }
             });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
       
         <div>
                <input type="button" value="Button" id='jqxButton' />
            </div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 6:47 am in reply to: catch past event catch past event #23390

support

Participant

Hi pyrobel,

Thank you for your interest in jqxGrid. Please provide us with more details about what you understand as a catch event.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 6:38 am in reply to: jqx Grid jqx Grid #23386

support

Participant

Hi priyankajain,

If you want to copy the data from two jqxGrid there is no need of selecting the rows. The approach is the same as the sample I sent you.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 19, 2013 at 6:37 am in reply to: searching remotely & getdatainformation searching remotely & getdatainformation #23385

support

Participant

Hi rrust,

Please take a look at the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example the Grid is bound to a Remote Data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                async: false,
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 20
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );
            $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: dataAdapter,
                theme: theme,
                columns: [
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ],
                showtoolbar: true,
                autoheight: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>");
                    var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                    toolbar.append(container);
                    container.append(span);
                    container.append(input);
                    if (theme != "") {
                        input.addClass('jqx-widget-content-' + theme);
                        input.addClass('jqx-rc-all-' + theme);
                    }
                    var oldVal = "";
                    input.on('keydown', function (event) {
                        if (input.val().length >= 2) {
                            if (me.timer) {
                                clearTimeout(me.timer);
                            }
                            if (oldVal != input.val()) {
                                me.timer = setTimeout(function () {
                                    $("#jqxgrid").jqxGrid('updatebounddata');
                                }, 1000);
                                oldVal = input.val();
                            }
                        }
                    });
                }
            });

});

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 18, 2013 at 2:22 pm in reply to: searching remotely & getdatainformation searching remotely & getdatainformation #23354

support

Participant

Hi rrust,

Please take a look at the following example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm
If you have any further questions, please do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 18, 2013 at 12:29 pm in reply to: jqx Grid jqx Grid #23349

support

Participant

Hi priyankajain,

Please take a look at the following example:

<!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.9.0.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            $("#jqxButton").jqxButton({ width: '150' });
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
       
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
            $("#jqxgrid2").jqxGrid(
           {
               width: 670,
               theme: theme,
               columnsresize: true,
               columns: [
                 { text: 'Name', dataField: 'firstname', width: 100 },
                 { text: 'Last Name', dataField: 'lastname', width: 100 },
                 { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                 { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                 { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                 { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
               ]
           });
            $("#jqxButton").on('click', function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
                var source =
               {
                   localdata: rows,
                   datatype: "array",
                   datafields:
                   [
                       { name: 'firstname', type: 'string' },
                       { name: 'lastname', type: 'string' },
                       { name: 'productname', type: 'string' },
                       { name: 'quantity', type: 'number' },
                       { name: 'price', type: 'number' },
                       { name: 'total', type: 'number' }
                   ]
               };
                var dataAdapter2 = new $.jqx.dataAdapter(source);
                $("#jqxgrid2").jqxGrid({ source: dataAdapter2 });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div id="jqxgrid2">
        </div>
         <div>
                <input type="button" value="Copy" id='jqxButton' />
            </div>
    </div>
</body>
</html>

In order to copy the whole data you can use the getrows method and than create a dataAdapter using the data returned by the getrows method.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

June 18, 2013 at 11:34 am in reply to: Group aggregate result under column header Group aggregate result under column header #23336

support

Participant

Hi Abdul,

Unfortunately it is not possible to display the sum as wanted.
When multiple columns are grouped, the Grid automatically adds Pinned columns with Toggle buttons to expand/collapse the groups. The rest of the columns which are not pinned are scrollable. Example: You have a Grid with 3 columns like in our Grouping demo and grouped the Grid by City, Company Name and Country. The Grid will have 6 columns – 3 with Toggle buttons and 3 with data. Scrollable will be only the columns with Data.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 15 posts - 1 through 15 (of 145 total)

1 2 … 10 →