jQWidgets Forums

jQuery UI Widgets Forums Grid Set cell (not column) specific editor

This topic contains 9 replies, has 3 voices, and was last updated by  ioana 11 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • ioana
    Participant

    Hi,

    is it possible to set a specific editor pro cell, and not pro column?
    Assuming that not all cells in a column have the same type.

    Thanks,
    Ioana


    Peter Stoev
    Keymaster

    Hi,

    That is currently not supported functionality. We will implement it in a future version.

    Best Regards,
    Peter Stoev

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


    ioana
    Participant

    Hi again,

    could you please let me know for which future version (approximately release date) can we expect this functionality?

    Thank you

    Ioana


    Peter Stoev
    Keymaster

    Hi Ioana,

    The feature will be most probably available by the end of August with the release of ver. 3.0

    Best Regards,
    Peter Stoev

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


    ioana
    Participant

    Sounds good, thank you.

    Regards,
    Ioana


    Arthur
    Member

    Hi,

    do you have some more details about the planned features for 3.0? We have the requirement for a “real grid” i.e. a spreadsheet like component, that is: Cells need to be first class citizens inside the grid. Potentially it should be possible to configure each cell individually with different data types and different editors. Is this something v3.0 can address?

    Kind regards,
    Arthur


    Peter Stoev
    Keymaster

    Hi Arthur,

    Different cell data types is not in our plans.

    Best Regards,
    Peter Stoev

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

    Set cell (not column) specific editor #30203

    ioana
    Participant

    Hi Peter,

    I am using now the Grid version 3.0.2.
    As described in my initial question, I have a grid with different type of cell editors (string and dropdown).

    The data model for the dropdown is a complex structure, with value and label, similar to the structure found in gridkeyvaluescolumnwitharray.htm.

    Since our requirements are for a real grid, I can not set the value of the columntype to ‘dropdownlist’, but to “template” or “custom”.
    The grid works just fine, the editors are cell based. The only problem is that the dropdown displayes the values, and not the labels.

    I used the “gridkeyvaluescolumnwitharray.htm” example, since there I found a dropdown with complex data structure in grid. In this example I’ve changed the columntype from “dropdownlist” to “template”, and the result is that the dropdown labels are no longer displayed after select. Instead the value is displayed.

    Can you please provide me a solution to this problem, or an example with a grid containing a dropdown cell (not column, not row), where the dropdown model contains “label” and “value”?

    Thank you,

    Ioana

    Set cell (not column) specific editor #30358

    ioana
    Participant

    Below the source code:

    $(document).ready(function () {

    var column;

    var data = [{
    “firstname”: {
    “value”: “Ioana”
    }

    }, {
    “firstname”: {
    “value”: “Mary”
    }
    }, {
    “firstname”: {
    “values”: [{
    “labelKey”: “Firstname 1”,
    “value”: “firstname_1”
    }, {
    “labelKey”: “Firstname 2”,
    “value”: “firstname_2”
    }],
    “value”: “firstname_2”
    }
    }];

    var getCellValues = function (row, column) {
    var values = [];
    var rowObject = data[row];
    var cellData = rowObject[column];
    if (cellData.values != null) {
    values = cellData.values;
    }
    return values;
    }

    var getCellType = function (row, column) {
    var cellProperties = [{
    “0firstname”: {
    “cellType”: “string”
    },
    “1firstname”: {
    “cellType”: “string”
    },
    “2firstname”: {
    “cellType”: “dropdownlist”
    }
    }];

    var cellType = ‘string’;
    var key = row + column;
    var cellProp = cellProperties[0][key];
    cellType = cellProp.cellType;
    return cellType;
    };

    var source = {
    localdata: data,
    datatype: “json”,
    updaterow: function (rowid, rowdata, commit) {
    commit(true);
    },
    datafields: [{
    name: ‘firstname’,
    map: ‘firstname.value’
    }, {
    name: ‘lastname’,
    map: ‘lastname.value’
    },

    ]
    };

    var settings = {
    mapChar: ‘.’
    };

    var dataAdapter = new $.jqx.dataAdapter(source, settings);
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid({
    width: “100%”,
    source: dataAdapter,
    editable: true,
    theme: “”,
    selectionmode: ‘multiplecellsadvanced’,
    columns: [{
    text: ‘First Name’,
    datafield: ‘firstname’,
    columntype: ‘custom’,
    createeditor: function (row, cellValue, editor, cellText, width, height) {
    var cellType = getCellType(row, column);
    var cellValues = getCellValues(row, column);

    if (cellType === ‘dropdownlist’) {
    editor.jqxDropDownList({
    autoDropDownHeight: true,
    width: width,
    height: height,
    source: cellValues,
    displayMember: ‘labelKey’,
    valueMember: ‘value’
    });
    } else {
    var inputElement = $(“”).prependTo(editor);
    inputElement.jqxInput({
    displayMember: cellValue,
    width: width,
    height: height
    });

    }
    },
    initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
    var cellType = getCellType(row, column);
    if (cellType === ‘dropdownlist’) {
    editor.jqxDropDownList(‘selectItem’, cellvalue);
    } else {
    var inputField = editor.find(‘input’);
    if (pressedkey) {
    inputField.jqxInput(‘selectLast’);
    inputField.val(pressedkey);
    } else {
    inputField.val(cellvalue);
    inputField.jqxInput(‘selectAll’);
    }
    }
    },
    geteditorvalue: function (row, cellvalue, editor) {
    var cellType = getCellType(row, column);
    if (cellType === ‘dropdownlist’) {
    var optionValue = editor.val();
    return optionValue;
    } else {
    return editor.find(‘input’).val();
    }
    }
    }

    ]
    });
    // events
    $(“#jqxgrid”).on(‘cellbeginedit’, function (event) {
    var args = event.args;
    column = args.datafield;

    });

    });

     

    Set cell (not column) specific editor #30607

    ioana
    Participant

    Hi, can someone please answer my question?
    I would very much appreciate it.

    Thanks,
    Ioana

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

You must be logged in to reply to this topic.