jQWidgets Forums

Tagged: DropDownList, grid, initeditor, jqxDropDownList, jqxgrid

This topic contains 4 replies, has 2 voices, and was last updated by btpy 12 years, 1 month ago.

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

Author

cell – dropdownlist issue Posts

April 3, 2013 at 12:51 pm cell – dropdownlist issue #18508

btpy

Member

Hello!
in this tutorial there is a DDlist in every cell of a certain column
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?classic
How can I, for example, on cellclick get to the list?

$(“#jqxgrid”).on(‘cellclick’, function (event) {
// cell contains the list
var column = event.args.column;
var rowindex = event.args.rowindex;

// and here I need to access the list to disable/edit some values – get an array of all values or smth
// or to destroy it and load again from dataadapter
})

Thank you!

April 3, 2013 at 1:08 pm cell – dropdownlist issue #18510

Dimitar

Participant

Hello btpy,

You can access the dropdown list with the callback function initeditor. Here is an excerpt from the API Documentation on the matter:

initeditor – sets a custom function which is called when the cells editor is opened. The Grid passes 3 parameters to it – row index, cell value and the editor element. The function can be used for adding some custom parameters to the editor.

{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    initeditor: function (row, cellvalue, editor) {
        editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
}

Best Regards,
Dimitar

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

April 3, 2013 at 1:34 pm cell – dropdownlist issue #18515

btpy

Member

So, do I need to include to that function all possible work with the list?
And, for example, if I need to block certain element in the next few cells depending on the element I’ve chosen in this cell?
e.g.:
on.(‘cellclick’, function(event){
$(this).jqxDropDownList(‘selectItem’, item)
})
and after I set this item I need either to destroy all other lists in a column or to disable some elements
I just don’t know ho to perform this stuff

April 4, 2013 at 9:43 am cell – dropdownlist issue #18590

Dimitar

Participant

Hi btpy,

Here is an example on the matter. The first row indicates which of the other rows is disabled. If its value is 0, all the rows are enabled for editing.

<!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.8.3.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var countries = [
                 { value: 0, label: "0" },
                 { value: 1, label: "1" },
                 { value: 2, label: "2" },
                 { value: 3, label: "3" },
                 { value: 4, label: "4" },
                 { value: 5, label: "5" }
            ];
            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: "0" },
                    { countryCode: "1" },
                    { countryCode: "2" },
                    { countryCode: "3" },
                    { countryCode: "4" },
                    { countryCode: "5" }
                ],
                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);
            var disabledRow;
            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: gridAdapter,
                theme: theme,
                selectionmode: 'singlecell',
                autoheight: true,
                editable: true,
                columns: [
                    {
                        text: 'Sample column', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
                        }, cellbeginedit: function (row, datafield, columntype) {
                            if (row == disabledRow) {
                                return false;
                            };
                        }, cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
                            if (row == 0) {
                                if (newvalue.value != 0) {
                                    disabledRow = newvalue.value;
                                } else {
                                    disabledRow = null;
                                };
                            };
                        }
                    },
                ]
            });
            $("#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>

Best Regards,
Dimitar

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

April 4, 2013 at 12:05 pm cell – dropdownlist issue #18597

btpy

Member

Thank you, I’ll try this way!

Author

Posts

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

You must be logged in to reply to this topic.