jQWidgets Forums

This topic contains 13 replies, has 2 voices, and was last updated by ziyahan 10 years, 11 months ago.

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

Author

Label-value problem when using combobox in Grid. Posts

March 17, 2014 at 9:02 am Label-value problem when using combobox in Grid. #51161

Participant

Hi All;
We are using combobox in Grid. However, when refocus an element in combobox column, only id shows in it. how can I fix this problem.
Thanks in advance.

March 17, 2014 at 9:22 am Label-value problem when using combobox in Grid. #51165

Peter Stoev

Keymaster

Hi ziyhan,

To learn how to create such column, please look this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 19, 2014 at 11:05 am Label-value problem when using combobox in Grid. #51381

ziyahan

Participant

But this is not combobox. This is dropdownlist element.

March 19, 2014 at 11:16 am Label-value problem when using combobox in Grid. #51384

Peter Stoev

Keymaster

Hi ziyahan,

The approach is the same. You should change only the columntype. DropDownList and ComboBox are identical widgets with the only difference that ComboBox has Input field, DropDownList has not input field.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 19, 2014 at 11:25 am Label-value problem when using combobox in Grid. #51387

ziyahan

Participant

Hi again,
Thanks for your answer.
We create and edit some columns programatically.

`columns[value[“columnIndex”]].createeditor= function (row, cellvalue, editor) {
parent.globalEditor = editor;
editor.jqxComboBox({
source: value[“elements”],
displayMember: ‘code’,
valueMember: ‘id’,
autoComplete: true,
enableSelection:true,
autoOpen:true,
enableBrowserBoundsDetection:true
});
});

It works, but, when we blur the element, Element shows valueMember, not displayMember.

March 19, 2014 at 11:35 am Label-value problem when using combobox in Grid. #51389

ziyahan

Participant

We could not keyboard navigation in dropdownlist, and combobox showed only valueMember when it blured.

March 19, 2014 at 11:58 am Label-value problem when using combobox in Grid. #51392

Peter Stoev

Keymaster

Hi ziyahan,

You can try it with ComboBox editor in the sample below. It does not change the value on blur. At least in jQWidgets 3.2.1 which is the current version.

<!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.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: 850,
                source: ordersAdapter,
                selectionmode: 'singlecell',
                pageable: true,
                autoheight: true,
                editable: true,
                columns: [
                    { text: 'Employee Name', datafield: 'EmployeeID', displayfield: 'EmployeeName', columntype: 'combobox', 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>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 19, 2014 at 12:38 pm Label-value problem when using combobox in Grid. #51396

ziyahan

Participant

I am sorry. I did not work. We tried same solution. We are using your grid with Knockout together.

March 20, 2014 at 10:14 am Label-value problem when using combobox in Grid. #51486

ziyahan

Participant

Peter,
I am sorry so, I could not tell completely.
When we create combobox in createeditor function, it works, but the combobox returns id (valueMember, not displayMember) as cellvalue. Cellvalue takes “id” (valueMember of combobox) after cell end edit.
I think, this is a bug.

March 20, 2014 at 12:41 pm Label-value problem when using combobox in Grid. #51506

Peter Stoev

Keymaster

Hi ziyahan,

That does not happen with the current version. Please, ensure that you use jQWidgets 3.2.1 and not something else.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 21, 2014 at 7:24 am Label-value problem when using combobox in Grid. #51544

ziyahan

Participant

The expected answer thank you Peter.
It works fine.

June 18, 2014 at 7:14 am Label-value problem when using combobox in Grid. #56011

ziyahan

Participant

Hi again;
I am using latest Jqxwidget version. Same error is occuring still. Please check it.

June 18, 2014 at 9:19 am Label-value problem when using combobox in Grid. #56019

Peter Stoev

Keymaster

Hi ziyahan,

You may check your initialization code and especially for missing initialization code. If you want an editor to return Label and Value, you should have set displayfield, datafield of your column and you should have created a custom editor and set its displayMember and valueMember and source properties.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 19, 2014 at 6:35 am Label-value problem when using combobox in Grid. #56065

ziyahan

Participant

Peter Hi;
Thanks for your reply.

I do such as you said.

columns[value[“columnIndex”]].createeditor = function (row, cellvalue, editor) {
editor.jqxComboBox({
source: value[“elements”],
displayMember: ‘code’,
valueMember: ‘id’,
autoComplete: true,
searchMode: ‘containsignorecase’
});

Author

Posts

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

You must be logged in to reply to this topic.