jQWidgets Forums

Tagged: datagrid, javascript datagrid, jquery datagrid, jqxGrid ;

This topic contains 2 replies, has 3 voices, and was last updated by omnisri 7 years, 1 month ago.

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

Author

Display Drop Down List Column In Edit Mode By Default Posts

August 29, 2012 at 4:00 pm Display Drop Down List Column In Edit Mode By Default #7261

Member

Hello. I am currently evaluating the JQWidgets for a client project. I really like the grid control so far, however it is very important to the client that the drop down control appears in the grid column by default. In other words, they do not want to have to double click on the cell in order to see the control to select a new value. Is there a way to do this? If not I’ll need to find a control that does.

Thanks in advance.

August 30, 2012 at 5:18 am Display Drop Down List Column In Edit Mode By Default #7267

Peter Stoev

Keymaster

Hi rshelby,

I’ve prepared a sample for you with the standard Select tag which is always visible in the column.

Here’s the sample’s code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.0.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="../../jqwidgets/jqxgrid.edit.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            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"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var listItems = [];
            var renderlist = function (row, column, value) {
                var buildList = '<select id="Select' + row + '" onChange="selectionChanged(event)">';
                for (var i = 0; i < productNames.length; i++) {
                    if (value == productNames[i]) {
                        buildList += '<option selected="true">' + productNames[i] + '</option>';
                    }
                    else {
                        buildList += '<option>' + productNames[i] + '</option>';
                    }
                }
                buildList += '</select>';
                return buildList;
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                editable: true,
                selectionMode: 'singlecell',
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { 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' },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180, cellsrenderer: renderlist }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
            <script type="text/javascript">
                var selectionChanged = function (event) {
                    var id = event.target.id;
                    var rowIndex = parseInt(id.toString().substring(6));
                    var value = event.target.value;
                    $("#jqxgrid").jqxGrid('setcellvalue', rowIndex, 'productname', value);
                }
            </script>
        </div>
    </div>
</body>
</html>

The cellsrenderer function associated to the last column allows you to customize the display of the Grid cells and I use it to display the Select element. In the function, I bind to the onChange event and update the cell’s value when the selection is changed.

Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 15, 2018 at 4:59 pm Display Drop Down List Column In Edit Mode By Default #98733

omnisri

Participant

Hello Peter,

I have used the above example to implement drop down column in my Angular 2 project. When I try to change the options from the drop=down, I get the below error, for some reason.

:1 Uncaught ReferenceError: selectionChanged is not defined
at HTMLSelectElement.onchange

I tried putting the selectionChanged function inside construction and outside as well in the component.ts file, but get the same error for both. Can you please direct me to how to use these html functions equivalent into typesecript component file? Kind of stuck on this for sometime now!

thank you,
Omnisri

Author

Posts

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

You must be logged in to reply to this topic.