Exception on filtering a columntype : 'combobox' - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 2 voices, and was last updated by pascalme 12 years ago.

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

Author

Exception on filtering a columntype : 'combobox' Posts

November 8, 2013 at 4:34 pm Exception on filtering a columntype : 'combobox' #32278

Member

Hello,

I would like set a filter on column where the editor is a combobox. The column’s datafield and displayfield propeties are different. I use the row filter (showfilterrow: true). Unfortunately, as I set the filter value, I’v got the following exception :

Unhandled exception at line 7, column 28396 in http://localhost:39773/Scripts/jqwidgets/jqxgrid.filter.js
0x800a138f – JavaScript runtime error: Unable to set property ‘filter’ of undefined or null reference

the column is defined as the following :

{
              text: 'Consultant', datafield: 'Consultant', displayField: 'ConsultantName', minwidth: 150, columntype: 'combobox',
              filterable: true, filtertype: 'checkedlist', filteritems : sourceConsultant,
              createeditor: function (row, column, editor) {
                  editor.jqxComboBox({
                      source: daConsultant,
                      displayMember: "FullName", valueMember: "ID",
                      searchMode: 'containsignorecase', autoComplete: true
                  });
              }
              ,
              geteditorvalue: function (row, cellvalue, editor) {
                  var item = editor.jqxComboBox('getSelectedItem');
                  return item;
              }
          },

Is the filtering feature supports combobox column type ?

thanks for your help.

Pascal

November 8, 2013 at 5:11 pm Exception on filtering a columntype : 'combobox' #32283

Peter Stoev

Keymaster

Hi Pascal,

Thanks for reporting it. We will definitely investigate that behavior, but before that I would like to ask you which version of jQWidgets do you use?

I have tried to reproduce it, but without avail.

Here’s my test sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create a Grid Column with two fields for the cell values and cell labels. Click on a cell in the "Employee Name" column. The cell's label and value will be displayed below the Grid.</title>
    <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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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 employeesSource =
             {
                 datatype: "xml",
                 datafields: [
                     { name: 'FirstName', type: 'string' },
                     { name: 'LastName', type: 'string' }
                 ],
                 root: "Employees",
                 record: "Employee",
                 id: 'EmployeeID',
                 url: "../sampledata/employees.xml",
                 async: false
             };
             var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
                autoBind: true,
                beforeLoadComplete: function (records) {
                    var data = new Array();
                    // update the loaded records. Dynamically add EmployeeName and EmployeeID fields. 
                    for (var i = 0; i < records.length; i++) {
                        var employee = records[i];
                        employee.EmployeeName = employee.FirstName + " " + employee.LastName;
                        employee.EmployeeID = employee.uid;
                        data.push(employee);
                    }
                    return data;
                }
            });
            // prepare the data
            var ordersSource =
            {
                datatype: "xml",
                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 name in the foreign source. 
                    // values.name - specifies the field's value in the foreign source. 
                    // When the ordersAdapter is loaded, each record will have a field called "EmployeeName". The "EmployeeName" for each record comes from the employeesAdapter where the record's "EmployeeID" from orders.xml matches to the "EmployeeID" from employees.xml. 
                    { name: 'EmployeeName', value: 'EmployeeID', values: { source: employeesAdapter.records, value: 'EmployeeID', name: 'EmployeeName' } },
                    { name: 'EmployeeID', map: 'm\\:properties>d\\:EmployeeID' },
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: "../sampledata/orders.xml",
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
            var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: ordersAdapter,
                selectionmode: 'singlecell',
                pageable: true,
                autoheight: true,
                filterable: true,
                showfilterrow: true,
                editable: true,
                columns: [
                    {
                        text: 'Employee Name', filtertype: 'checkedlist', datafield: 'EmployeeID', displayfield: 'EmployeeName', columntype: 'combobox',
                        createeditor: function (row, column, editor) {
                            editor.jqxComboBox({
                                searchMode: 'containsignorecase', autoComplete: true
                            });
                        }
              ,
                        geteditorvalue: function (row, cellvalue, editor) {
                            var item = editor.jqxComboBox('getSelectedItem');
                            return item;
                        },
                        width: 150
                    },
                    { text: 'Ship City', datafield: 'ShipCity', width: 150},
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Ship Name', datafield: 'ShipName'}
                ]
            });
            $("#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>

Looking forward to your reply.

Best Regards,
Peter Stoev

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

November 9, 2013 at 12:59 am Exception on filtering a columntype : 'combobox' #32298

pascalme

Member

Hi Peter,

Thanks for your quick answer. I’m using the version 3.0.3 of jQWidgets.

Eventually, I found the solution of my issue. I used in my columns definition “displayField” instead of “displayfield”, the “F” is in uppercase in my code. Grrrrr! I am the guilty !

So, it is ok now, it works like a charm !

thanks a lot.

Pascal

Author

Posts

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

You must be logged in to reply to this topic.