Edit with dialog box: DropdownList problem

[tranenParticipant]

Hi,

I have a datatable that I would like to edit thanks to a dialog box.
In the dialog box I have a dropdownlist but i can’t set the value of the dropdownlist with the value of the row.

Here is my code:

    var source =
        {
            dataType: "json",
            datafields: [
                { name: 'brand', type: 'string' }
            ],
            localData: Branddata,
            async: false
        };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var sourceTable =
               {
                   dataType: "array",
                   dataFields: [
                       { name: 'ID', type: 'string' },
                       { name: 'Company', type: 'string' }
                   ],
                   id: 'ID',
                   localData: data,
                   updateRow: function (rowID, rowData, commit) {
                       commit(true);
                   }
               };

        var dataAdapterTable = new $.jqx.dataAdapter(sourceTable);
  
        $("#dataTable").jqxDataTable(
        {
            source: dataAdapterTable,
            editable: true,
            ready: function () {
                $("#ID").jqxInput({ disabled: true, width: 150, height: 30 });
                $("#Company").jqxDropDownList({
                    theme: 'bootstrap',
                    source: dataAdapter,
                    displayMember: "brand",
                    valueMember: 'ID',
                    width: 100,
                    height: 25,
                    autoDropDownHeight: true
                });
 
                $("#save").jqxButton({ height: 30, width: 80 });
                $("#cancel").jqxButton({ height: 30, width: 80 });
                $("#cancel").mousedown(function () {
                    // close jqxWindow.
                    $("#dialog").jqxWindow('close');
                });
                $("#save").mousedown(function () {
                    // close jqxWindow.
                    $("#dialog").jqxWindow('close');
                    // update edited row.
                    var editRow = parseInt($("#dialog").attr('data-row'));
                    var rowData = {
                        ID: $("#ID").val(), Company: $("#Company").val()
                    };
                    $("#dataTable").jqxDataTable('updateRow', editRow, rowData);
                });
                $("#dialog").on('close', function () {
                    // enable jqxDataTable.
                    $("#dataTable").jqxDataTable({ disabled: false });
                });
                $("#dialog").jqxWindow({
                    resizable: false,
                    position: { left: $("#dataTable").offset().left + 200, top: $("#dataTable").offset().top + 400 },
                    width: 370, height: 330,
                    autoOpen: false
                });
                $("#dialog").css('visibility', 'visible');
            },

            columns: [
              { text: 'ID', dataField: 'ID', editable: false, align: 'center', cellsAlign: 'center' },
              { text: 'Company', dataField: 'Company', align: 'center', cellsAlign: 'center'}
            ]
        });
        $("#dataTable").on('rowDoubleClick', function (event) {
            var args = event.args;
            var index = args.index; 
            var row = args.row;
            $("#dialog").jqxWindow('setTitle', "Edit Row: " + row.ID);
            $("#dialog").jqxWindow('open');
            $("#dialog").attr('data-row', index);
            $("#dataTable").jqxDataTable({ disabled: true });
            $("#ID").val(row.ID);
            $("#Company").val(row.Company);
        });

<div id="dialog">
            <div>Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">ID:</td>
                        <td align="left"><input id="ID" /></td>
                    </tr>
                    <tr>
                        <td align="right">Company:</td>
                        <td align="left"><div id="Company"></div></td>
                    </tr>                   
                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="save" value="Save" /><input id="cancel" type="button" value="Cancel" /></td>
                    </tr>
                </table>
            </div>
       </div>

Could you help to see where is the error?
Thanks

[ivailoParticipant]

Hi tranen,

In your dataAdapter’s source you don’t have datafield named ID, used like a valueMember.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts