jQWidgets Forums

jQuery UI Widgets › Forums › Grid › jqxGrid problem with columntype dropdownlist

Tagged: 

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    jqxGrid problem with columntype dropdownlist Posts
  • March 25, 2014 at 7:38 am jqxGrid problem with columntype dropdownlist #51810

    moomoo
    Participant

    Hi,

    I am trying to create a jqxGrid which contain a column type dropdownlist. I am referring to example gridkeyvaluescolumnwitharray.htm
    However when i set the jqxGrid editmode to ‘selectedrow’ and added another string column to perform full row edit. It hit a javascript error during row editing.

    Uncaught TypeError: Cannot read property ‘0’ of undefined
    the javascript debugger show the code below causing the error
    e.editcell.editor.jqxDropDownList("container")[0].style.display=="block"

    this can be simulate by changing the example code to the code below

    // prepare the data
		    	            var gridSource =
		    	            {
		    	                datatype: "array",
		    	                 localdata: 
		    	                [
		    	                    { countryCode: "UK", description:"11111" },
		    	                    { countryCode: "US", description:"22222"  },
		    	                    { countryCode: "DE", description:"33333"  },
		    	                    { countryCode: "FR", description:"44444"  },
		    	                    { countryCode: "IN", description:"55555"  },
		    	                    { countryCode: "HK", description:"66666"  }
		    	                ], 
		    	                datafields: [
		    	                    // name - determines the field's name.
		    	                    // value - the field's value in the data source.
		    	                    // values - specifies the field's values.
		    	                    // values.source - specifies the foreign source. The expected value is an array.
		    	                    // values.value - specifies the field's value in the foreign source. 
		    	                    // values.name - specifies the field's name in the foreign source. 
		    	                    // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
		    	                    { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
		    	                    { name: 'countryCode', type: 'string'},
		    	                    { name: 'description', type: 'string'}
		    	                ]
		    	            };
		    	            var gridAdapter = new $.jqx.dataAdapter(gridSource);

		    	            $("#jqxgrid").jqxGrid(
		    	            {
		    	                width: 400,
		    	                source: gridAdapter,
		    	                selectionmode: 'singlerow',
		    	                editmode: 'selectedrow',
		    	                autoheight: true,
		    	                editable: true,
		    	                columns: [
		    	                    {
		    	                        text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
		    	                        createeditor: function (row, value, editor) {
		    	                            editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
		    	                        }
		    	                    }
		    	                    ,{ text: 'Description', datafield: 'description', columntype: 'textbox', width: 150 }                    
		    	                ]
		    	            });

    hope someone can enlighten me here.

    thanks

    March 25, 2014 at 7:43 am jqxGrid problem with columntype dropdownlist #51813

    Peter Stoev
    Keymaster

    Hi moomoo,

    Please check whether you use jQWidgets ver. 3.2.2.

    Working example based on your code and tested with ver. 3.2.2

    <!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.edit.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var countries = [
            { value: "AF", label: "Afghanistan" },
            { value: "AL", label: "Albania" },
            { value: "DZ", label: "Algeria" },
            { value: "AR", label: "Argentina" },
            { value: "AM", label: "Armenia" },
            { value: "AU", label: "Australia" },
            { value: "AT", label: "Austria" },
            { value: "AZ", label: "Azerbaijan" },
            { value: "BS", label: "Bahamas" },
            { value: "BH", label: "Bahrain" },
            { value: "BD", label: "Bangladesh" },
            { value: "BB", label: "Barbados" },
            { value: "BY", label: "Belarus" },
            { value: "BE", label: "Belgium" },
            { value: "BZ", label: "Belize" },
            { value: "BJ", label: "Benin" },
            { value: "BM", label: "Bermuda" },
            { value: "BR", label: "Brazil" },
            { value: "BN", label: "Brunei" },
            { value: "BG", label: "Bulgaria" },
            { value: "CM", label: "Cameroon" },
            { value: "CA", label: "Canada" },
            { value: "CL", label: "Chile" },
            { value: "CN", label: "China" },
            { value: "CO", label: "Columbia" },
            { value: "CR", label: "Costa Rica" },
            { value: "HR", label: "Croatia (Hrvatska)" },
            { value: "CU", label: "Cuba" },
            { value: "CY", label: "Cyprus" },
            { value: "CZ", label: "Czech Republic" },
            { value: "DK", label: "Denmark" },
            { value: "TP", label: "East Timor" },
            { value: "EC", label: "Ecuador" },
            { value: "EG", label: "Egypt" },
            { value: "ER", label: "Eritrea" },
            { value: "EE", label: "Estonia" },
            { value: "ET", label: "Ethiopia" },
            { value: "FI", label: "Finland" },
            { value: "FR", label: "France" },
            { value: "DE", label: "Germany" },
            { value: "GR", label: "Greece" },
            { value: "HK", label: "Hong Kong" },
            { value: "HU", label: "Hungary" },
            { value: "IS", label: "Iceland" },
            { value: "IN", label: "India" },
            { value: "ID", label: "Indonesia" },
            { value: "IR", label: "Iran" },
            { value: "IQ", label: "Iraq" },
            { value: "IE", label: "Ireland" },
            { value: "IL", label: "Israel" },
            { value: "IT", label: "Italy" },
            { value: "JM", label: "Jamaica" },
            { value: "JP", label: "Japan" },
            { value: "MX", label: "Mexico" },
            { value: "MC", label: "Monaco" },
            { value: "MA", label: "Morocco" },
            { value: "NL", label: "Netherlands" },
            { value: "NZ", label: "New Zealand" },
            { value: "NE", label: "Niger" },
            { value: "NG", label: "Nigeria" },
            { value: "KP", label: "North Korea" },
            { value: "NO", label: "Norway" },
            { value: "PA", label: "Panama" },
            { value: "PE", label: "Peru" },
            { value: "PH", label: "Philippines" },
            { value: "PL", label: "Poland" },
            { value: "PT", label: "Portugal" },
            { value: "RO", label: "Romania" },
            { value: "RU", label: "Russia" },
            { value: "SA", label: "Saudi Arabia" },
            { value: "SK", label: "Slovak Republic" },
            { value: "SI", label: "Slovenia" },
            { value: "ZA", label: "South Africa" },
            { value: "KR", label: "South Korea" },
            { value: "ES", label: "Spain" },
            { value: "SE", label: "Sweden" },
            { value: "CH", label: "Switzerland" },
            { value: "TN", label: "Tunisia" },
            { value: "TR", label: "Turkey" },
            { value: "UA", label: "Ukraine" },
            { value: "AE", label: "United Arab Emirates" },
            { value: "UK", label: "United Kingdom" },
            { value: "US", label: "United States" }
            ];

            var countriesSource =
            {
                datatype: "array",
                datafields: [
                    { name: 'label', type: 'string' },
                    { name: 'value', type: 'string' }
                ],
                localdata: countries
            };

            var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true
            });

            var gridSource =
            {
                datatype: "array",
                localdata:
               [
                   { countryCode: "UK", description: "11111" },
                   { countryCode: "US", description: "22222" },
                   { countryCode: "DE", description: "33333" },
                   { countryCode: "FR", description: "44444" },
                   { countryCode: "IN", description: "55555" },
                   { countryCode: "HK", description: "66666" }
               ],
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's value in the foreign source. 
                    // values.name - specifies the field's name in the foreign source. 
                    // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
                    { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                    { name: 'countryCode', type: 'string' },
                    { name: 'description', type: 'string' }
                ]
            };
            var gridAdapter = new $.jqx.dataAdapter(gridSource);

            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: gridAdapter,
                selectionmode: 'singlerow',
                editmode: 'selectedrow',
                autoheight: true,
                editable: true,
                columns: [
                    {
                        text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
                        }
                    }
                    , { text: 'Description', datafield: 'description', columntype: 'textbox', width: 150 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    March 25, 2014 at 8:55 am jqxGrid problem with columntype dropdownlist #51823

    moomoo
    Participant

    Hi Peter,

    Thanks for your prompt reply.
    I had tried with version3.2.2, the error still shown in chrome console.

    The error can be simulated by activate the row edit and then click at the blank area outside of the grid. Normally when we click at the blank area outside of the grid, row editing will be terminated. At this case the javascript error shown up.

    Hope you able to simulate it.

    thanks.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.