jQWidgets Forums

Tagged: array, bind, grid, jqxgrid

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

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

Author

Using Hidden Field for population Posts

September 2, 2013 at 1:11 am Using Hidden Field for population #28123

trensic

Member

Newbie Question:

I am storing arrays in a hidden field and want to use that from populating data.

To save the array:
var myArray = new Array();
myArray[0] = “Nancy” ,
myArray[1] = “Andrew”,
myArray[2] = “Janet”,
myArray[3] = “Margaret”,
myArray[4] = “Steven”,
myArray[5] = “Michael”,
myArray[6] = “Robert”,
myArray[7] = “Laura”,
myArray[8] = “Anne”

document.getElementById(“firstname_ary”).value = JSON.stringify(myArray);

When I am calling the values:
var firstNames = document.getElementById(“firstname_ary”).value;
(so that looks like [“Nancy”, “Andrew”, “Janet”, ….”])

The First name field comes out with each character in the array apposed to the name so each row looks like this:
1:[
2:”
3:N
4:a
5:…you get the idea

Soooo how can I use the array in the hidden field?

September 2, 2013 at 6:02 am Using Hidden Field for population #28132

Dimitar

Participant

Hello trensic,

The issue comes from the stringify method, which turns the array into string when you actually need it to be an array. Here is an example, based on the demo Binding to Array, that shows you do not need the stringify:

<!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="../../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 = "";
            // prepare the data
            var data = new Array();
            var myArray = new Array();
            myArray[0] = "Nancy",
myArray[1] = "Andrew",
myArray[2] = "Janet",
myArray[3] = "Margaret",
myArray[4] = "Steven",
myArray[5] = "Michael",
myArray[6] = "Robert",
myArray[7] = "Laura",
myArray[8] = "Anne";
            var firstNames = new Array();
            firstNames = myArray;
            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' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

September 2, 2013 at 11:01 am Using Hidden Field for population #28154

trensic

Member

Thank you … I was not taking my hidden field value and turning it into an Array as well so that is fixed and fixed.

Author

Posts

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

You must be logged in to reply to this topic.