jQuery UI Widgets Forums DataTable DataTable and drop down list

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 2 weeks, 2 days ago.

Viewing 2 posts - 1 through 2 (of 2 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

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

You must be logged in to reply to this topic.