jqxDropdownList not showing on all cells of the grid

[walker1234Participant]

I have added a jqxDropdownList for a column Year as shown in the JS Fiddle below (It only shows when you click on the cell of year column):

https://jsfiddle.net/walker123/peguh5rt/

However, it only got added for one cell. What can I do to achieve the following:

1. Display jqxDropdownList on the screen and not by just clicking the year column.

2. Is it going to get the year content when a user click get rows button?

[Yavor DashevParticipant]

Hi walker1234,

I have created a quick code example base on your enquiries using this demo for a base https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/bindingtocsv.htm?light.
When you select a row you can choose a year to be set on the Date column.
Code snippet

 <script type="text/javascript">
        $(document).ready(function () {
            var url = '../../sampledata/nasdaq_vs_sp500.txt';

            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date', type: 'date' },
                    { name: 'S&P 500', type: 'float' },
                    { name: 'NASDAQ', type: 'float' }
                ],
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                columns: [
                  { text: 'Date', datafield: 'Date', cellsformat: 'd', width: 250,
                    columntype: 'dropdownlist', editable: true,
                        createeditor: function (row, column, editor) {
                            var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
                            editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
                    }
                    },
                  { text: 'S&P 500', datafield: 'S&P 500', width: 300, cellsformat: 'f' },
                  { text: 'NASDAQ', datafield: 'NASDAQ', cellsformat: 'f' }         
                ]
            });

            $("#grid").bind('cellendedit', function (event) {
                if (event.args.value) {
                    $("#grid").jqxGrid('selectrow', event.args.rowindex);
                }
                else {
                    $("#grid").jqxGrid('unselectrow', event.args.rowindex);
                }
            });

            $('#jqxbutton').click(function () {
                var rows = $('#grid').jqxGrid('getrows');
                console.log(rows);
                var selectedRows = rows.filter(x => x.NASDAQ)
                
                console.log(selectedRows)
            
          
            });
            var source = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
                // Create a jqxDropDownList
            $("#jqxWidget").jqxDropDownList({ source: source, placeHolder: "Select year for the date cell", width: 250, height: 30});

            let rowId= null;

            

            $('#grid').on('rowclick', function (event) 
                {
                    var args = event.args;
                    // row's bound index.
                    var boundIndex = args.rowindex;
                    // row's visible index.
                    var visibleIndex = args.visibleindex;
                 
                    rowId = boundIndex;
                }); 
            $('#jqxWidget').on('select', function (event)
            {
                var args = event.args;
                if (args && rowId !== null) {
                    var index = args.index;
                    var item = args.item;
                    var label = item.label;
                    var value = item.value;
                    $("#grid").jqxGrid('setcellvalue', rowId, "Date", value);
                }                        
            });
        });
    </script>
</head>
<body class='default'>
    <div style="display: flex;">
        <div id="grid"></div>
            &nbsp;
            &nbsp;
        <div id='jqxWidget'>
        </div>
    </div>
        
  
    <br><br><br>
    <input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi,

I didn’t quite get what you were trying to do. I tried to apply your stuff in my JS Fiddle which looks somewhat like this : https://jsfiddle.net/walker123/peguh5rt/35/

Please take a look.

It looks like you added a separate dropdown for the year.

I am looking for displaying the year dropdown in the grid which is hiding at the moment unless you click on the cell.

[Yavor DashevParticipant]

Hi walker1234,

Apologies for the inconvenience, but from the information from your first post I thought you want to have a dropdownlist outside the jqxGrid and to set the value of the cell from it.

Now with a bit more information/context, but unfortunately the jqxGrid doesn’t support the functionality you need because the editor is only initialized when you click on the cell, however we may consider this functionality for future development.

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts