jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by dmshort32 12 years, 3 months ago.

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

Author

Grid with Array datasource and combobox cell editor Posts

January 18, 2013 at 5:09 pm Grid with Array datasource and combobox cell editor #13870

Member

I’m trying to prototype for a project. I want to use an array as the datasource for my grid. I also want to use a combobox to allow the user to change the value in one of the fields. I borrowed from the Demos and put together the following code.

I get an error in the jQuery code when creating the editor:
Line: 5779
Error: Unexpected call to method or property access.

line 5779 is “this.appendChild(elem);
that section of jQuery looks like this :

append: function() { return this.domManip(arguments, true, function( elem ) { if ( this.nodeType === 1 || this.nodeType === 11 ) { this.appendChild( elem ); } }); }

If I use XML for the datasource of the grid, I do not get this error.

My page:


    This example shows how to create a Grid from Array data.
        $(document).ready(function () {

            //var theme = getTheme();

            // prepare the data

            var data = new Array();

            var firstNames =

              [

              "Andrew", "Nancy", "Shelley", "Regina", "Yoshi"];

            var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase"];

            //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 productNames = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];

            var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", ];

            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,

                    editable: true,

                    editmode: 'click',

                    columnsresize: true,

                    columns: [

                { text: 'Name', dataField: 'firstname', width: 100 },

                { text: 'Last Name', dataField: 'lastname', width: 100 },

                { text: 'Product', dataField: 'productname', width: 180, columntype: 'combobox',

                    createeditor: function (row, column, editor) {

                        // assign a new data source to the combobox.

                        var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];

                        editor.jqxComboBox({ source: list, promptText: "Please Choose:" });

                    },

                    // update the editor's value before saving it.

                    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {

                        // return the old value, if the new value is empty.

                        if (newvalue == "") return oldvalue;

                    }

                },

                { 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'}]

                });
        });

January 18, 2013 at 5:36 pm Grid with Array datasource and combobox cell editor #13872

Peter Stoev

Keymaster

Hi dmshort32,

Which version of the jQuery Framework and jQWidgets do you use? jQWidgets requires jQuery 1.6+.
Which browser do you use?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 18, 2013 at 6:15 pm Grid with Array datasource and combobox cell editor #13875

dmshort32

Member

jQuery: 1.8.3
jQWidgets: 2.4.2 (I think I can update though)

And unfortunately, I’m stuck with IE8.

January 18, 2013 at 9:14 pm Grid with Array datasource and combobox cell editor #13888

Peter Stoev

Keymaster

Hi dmshort32,

The provided sample works on my side with the latest version of jQWidgets.

Here’s the test code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).ready(function () {
                //var theme = getTheme();
                // prepare the data
                var data = new Array();
                var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi"];
                var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase"];
                //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 productNames = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
                var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", ];
                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,
    editable: true,
    editmode: 'click',
    columnsresize: true,
    columns: [
{ text: 'Name', dataField: 'firstname', width: 100 },
{ text: 'Last Name', dataField: 'lastname', width: 100 },
{ text: 'Product', dataField: 'productname', width: 180, columntype: 'combobox',
    createeditor: function (row, column, editor) {
        // assign a new data source to the combobox.
        var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
        editor.jqxComboBox({ source: list, promptText: "Please Choose:" });
    },
    // update the editor's value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
        // return the old value, if the new value is empty.
        if (newvalue == "") return oldvalue;
    }
},
{ 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'}]
});
            }); 
        });
    </script>
</head>
<body class='default'>
      <div id="jqxgrid"></div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 18, 2013 at 9:17 pm Grid with Array datasource and combobox cell editor #13889

dmshort32

Member

I updated to jqWidgets 2.5 and it started working.

Author

Posts

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

You must be logged in to reply to this topic.