jQuery UI Widgets Forums DataTable DataTable and drop down list

This topic contains 5 replies, has 4 voices, and was last updated by  admin 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • DataTable and drop down list #107418

    Bobo
    Participant

    I have a data table, with its source adapter; one of the columns is a drop down list, with another source adapter.
    When i close drop down, choosing an item, the value does not appear on the table cell, the cell is blank.
    Anyone can help me?? Where is the error?? Below my code (copy/past from the example of this site):

    $(document).ready(function () {
    <?php buildMenu(1) ?>
    var mat = {
    type: ‘POST’,
    data:{Qry: ‘ELE_MAT’, SS: anno},
    url: ‘DataAccess/DA_GestMag.php’,
    datatype: “json”,
    datafields: [
    { name: ‘ID_MATERIALE’, type: ‘int’ },
    { name: ‘DS_MATERIALE’, type: ‘string’ }
    ]
    };
    var matAdapter = new $.jqx.dataAdapter(mat, { uniqueDataFields: [‘ID_MATERIALE’] });

    var matDett = {
    type: ‘POST’,
    data:{Qry: ‘ELE_DETT’, SS: anno},
    url: ‘DataAccess/DA_GestMag.php’,
    datatype: “json”,

    datafields: [
    { name: ‘ID_MATERIALE’, type: ‘int’ },
    { name: ‘DS_MATERIALE’, type: ‘string’ },
    { name: ‘CD_COLORE’, type: ‘string’ },
    { name: ‘CD_TAGLIA’, type: ‘string’ }
    ]
    };
    var matDettAdapter = new $.jqx.dataAdapter(matDett);

    $(“#tabMaterialiDett”).jqxDataTable({
    width: ‘100%’,
    height: 200,
    theme: style,
    source: matDettAdapter,
    editable: true,
    columns: [
    { text: ‘IdMat’, dataField: ‘ID_MATERIALE’, width: ‘25%’, hidden: false },
    { text: ‘Materiale’, dataField: ‘DS_MATERIALE’, cellsAlign: ‘center’, align: ‘center’, width: ‘33%’, editable: true,
    columntype: ‘template’,
    createEditor: function (row, cellvalue, editor, cellText, width, height) {
    // construct the editor.
    editor.jqxDropDownList({
    source: matAdapter, displayMember: ‘DS_MATERIALE’, width: width, height: height
    });
    },
    initEditor: function (row, cellvalue, editor, celltext, width, height) {
    editor.jqxDropDownList({ width: width, height: height });
    editor.val(cellvalue);
    },
    getEditorValue: function (row, cellvalue, editor) {
    return editor.val();
    }
    },
    { text: ‘Taglia’, dataField: ‘CD_TAGLIA’, cellsAlign: ‘center’, align: ‘center’, width: ‘34%’ },
    { text: ‘Colore’, dataField: ‘CD_COLORE’, cellsAlign: ‘center’, align: ‘center’, width: ‘33%’ }
    ],
    showToolbar: true,
    toolbarHeight: 35,
    renderToolbar: function(toolBar)
    {
    var toTheme = function (className) {
    if (style == “”) return className;
    return className + ” ” + className + “-” + style;
    }
    // appends buttons to the status bar.
    var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
    var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
    var addButton = $(buttonTemplate);
    var editButton = $(buttonTemplate);
    var deleteButton = $(buttonTemplate);
    var cancelButton = $(buttonTemplate);
    var updateButton = $(buttonTemplate);
    container.append(addButton);
    container.append(editButton);
    container.append(deleteButton);
    container.append(cancelButton);
    container.append(updateButton);
    toolBar.append(container);
    addButton.jqxButton({cursor: “pointer”, enableDefault: false, height: 25, width: 25 });
    addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
    addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
    editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
    editButton.jqxTooltip({ position: ‘bottom’, content: “Edit”});
    deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));
    deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete”});
    updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
    updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
    cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
    cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
    cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
    var updateButtons = function (action) {
    switch (action) {
    case “Select”:
    addButton.jqxButton({ disabled: false });
    deleteButton.jqxButton({ disabled: false });
    editButton.jqxButton({ disabled: false });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    case “Unselect”:
    addButton.jqxButton({ disabled: false });
    deleteButton.jqxButton({ disabled: true });
    editButton.jqxButton({ disabled: true });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    case “Edit”:
    addButton.jqxButton({ disabled: true });
    deleteButton.jqxButton({ disabled: true });
    editButton.jqxButton({ disabled: true });
    cancelButton.jqxButton({ disabled: false });
    updateButton.jqxButton({ disabled: false });
    break;
    case “End Edit”:
    addButton.jqxButton({ disabled: false });
    deleteButton.jqxButton({ disabled: false });
    editButton.jqxButton({ disabled: false });
    cancelButton.jqxButton({ disabled: true });
    updateButton.jqxButton({ disabled: true });
    break;
    }
    }
    var rowIndex = null;
    $(“#tabMaterialiDett”).on(‘rowSelect’, function (event) {
    var args = event.args;
    rowIndex = args.index;
    updateButtons(‘Select’);
    });
    $(“#tabMaterialiDett”).on(‘rowUnselect’, function (event) {
    updateButtons(‘Unselect’);
    });
    $(“#tabMaterialiDett”).on(‘rowEndEdit’, function (event) {
    updateButtons(‘End Edit’);
    });
    $(“#tabMaterialiDett”).on(‘rowBeginEdit’, function (event) {
    updateButtons(‘Edit’);
    });
    addButton.click(function (event) {
    if (!addButton.jqxButton(‘disabled’)) {
    // add new empty row.
    $(“#tabMaterialiDett”).jqxDataTable(‘addRow’, null, {}, ‘first’);
    // select the first row and clear the selection.
    $(“#tabMaterialiDett”).jqxDataTable(‘clearSelection’);
    $(“#tabMaterialiDett”).jqxDataTable(‘selectRow’, 0);
    // edit the new row.
    $(“#tabMaterialiDett”).jqxDataTable(‘beginRowEdit’, 0);
    updateButtons(‘add’);
    }
    });
    cancelButton.click(function (event) {
    if (!cancelButton.jqxButton(‘disabled’)) {
    // cancel changes.
    $(“#tabMaterialiDett”).jqxDataTable(‘endRowEdit’, rowIndex, true);
    }
    });
    updateButton.click(function (event) {
    if (!updateButton.jqxButton(‘disabled’)) {
    // save changes.
    $(“#tabMaterialiDett”).jqxDataTable(‘endRowEdit’, rowIndex, false);
    }
    });
    editButton.click(function () {
    if (!editButton.jqxButton(‘disabled’)) {
    $(“#tabMaterialiDett”).jqxDataTable(‘beginRowEdit’, rowIndex);
    updateButtons(‘edit’);
    }
    });
    deleteButton.click(function () {
    if (!deleteButton.jqxButton(‘disabled’)) {
    $(“#tabMaterialiDett”).jqxDataTable(‘deleteRow’, rowIndex);
    updateButtons(‘delete’);
    }
    });
    }
    });
    })

    DataTable and drop down list #107445

    Hristo
    Participant

    Hello Bobo,

    I tested this example and it seems to work fine:
    http://jsfiddle.net/wrkc3xq8/
    Could you clarify it?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    DataTable and drop down list #108338

    lucoe
    Participant

    I’m using a dataTable which has a dropDownList as a column. I would like that when it chosen a item in the dropDownList it was removed form the list, leaving in the list only those not chosen yet. This doesn’t work. I’ve tryed the following solutions, but none successful.
    1 – to directly remove the item from dataAdapter.records
    2 – to remove the item from the object used to assign source.localData and I’ve after create the dataAdapter with this source, assigning it to same initial reference.
    3 – to recreate the source with a new data in localData, and I’ve after create the dataAdapter with this source, assigning it to same initial reference.

    DataTable and drop down list #108363

    Hristo
    Participant

    Hello lucoe,

    I would like to ask you for more details.
    What do you want to achieve?
    If you want to update the values of the editor in the edit mode then you should change it dynamically.
    For this purpose, the createEditor and initEditor callbacks will be helpful.
    Please, take a look at this demo.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    DataTable and drop down list #108379

    lucoe
    Participant

    Hi, Hristo.
    Thank you for your attention.

    What I need is to refresh the dropDownList records after a choice, so that the chosen item is no longer displayed in the list so that the user does not choose it twice.

    I don’t know how to use the createEditor or initEditor to refresh the dropDownList items. I did not understand seeing your example. Could you give a more didactic example, please.

    If necessary, I can send the code.

    Thanks.

    DataTable and drop down list #111436

    admin
    Keymaster

    Hi,

    I think you need to implement getEditorValue of the columns, too and debug the result of the val method in this case. For ex: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-custom-editors.htm?light

    Regards,
    Peter

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

You must be logged in to reply to this topic.