jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 4 months ago.

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

Author

Select Event on dropDownList column in jqxGrid Posts

February 28, 2014 at 7:43 pm Select Event on dropDownList column in jqxGrid #50325

Participant

Hello,

I have searched and have not been able to find the answer I am looking for: I have a jqxGrid with 3 columns. The first is a checkbox column and the other two are dropdownlist columns. My objective is to add a new blank row when a row is completed. A user should select from one dropdown, then the other, then a new row should appear. I have accomplished this using ‘cellendedit’, but I am not satisfied as this event is called after the cell is no longer focused on. The new row should appear as soon as a new item is selected in the list. My question is this: which event should I use to accomplish this?

Thank you in advance for your help.

March 1, 2014 at 3:37 pm Select Event on dropDownList column in jqxGrid #50344

Peter Stoev

Keymaster

Hi alex.chap,

That is not supported out of the box by jqxGrid, but you can find below a simple way to add a new row after a DropDownList value is selected.

<!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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.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
            });

            // prepare the data
            var gridSource =
            {
                datatype: "array",
                localdata: 
                [
                    { countryCode: "UK" },
                    { countryCode: "US" },
                    { countryCode: "DE" },
                    { countryCode: "FR" },
                    { countryCode: "IN" },
                    { countryCode: "HK" }
                ],
                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'}
                ]
            };
            var gridAdapter = new $.jqx.dataAdapter(gridSource);

            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: gridAdapter,
                selectionmode: 'singlecell',
                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' });
                            editor.on('change', function (event) {
                                if (event.args.type != 'api') {
                                    $("#jqxgrid").jqxGrid('endcelledit', null, null, false);
                                    $("#jqxgrid").jqxGrid('addrow', null, {}, 'last');
                                }
                            });
                        }
                    }                    
                ]
            });

            $("#jqxgrid").on('cellselect', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);

                $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
            });

            $("#jqxgrid").on('cellendedit', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                if (column.displayfield != column.datafield) {
                    $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label
                        + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>"
                        );
                }
                else {
                    $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value
                        + "<br/>Old Value: " + event.args.oldvalue + "</div>"
                        );
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    </div>
</body>
</html>

Hope this helps

Best Regards,
Peter Stoev

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.