jQWidgets Forums

jQuery UI Widgets Forums Grid Grid Editor using ComboBox and JSON

This topic contains 4 replies, has 3 voices, and was last updated by  DavidSimmons 12 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Grid Editor using ComboBox and JSON #9710

    DavidSimmons
    Participant

    Love the new feature just trying to figure them out.

    I have part of this working but can alert the index of the combo box. When I alert(newvalue) from the cellvaluechanging it show the state Label not the state index. What am I doing wrong.

    Also I would like to set selectedIndex to the current value in createeditor but not sure if I can get from the values passed into the function( (row, column, editor). Is this available at the point?

    I would appreciate any help

    StateJSON
    [{“StateID”:”1″,”0″:”1″,”StateName”:”Alabama”,”1″:”Alabama”},
    {“StateID”:”2″,”0″:”2″,”StateName”:”Alaska”,”1″:”Alaska”},
    {“StateID”:”3″,”0″:”3″,”StateName”:”Arizona”,”1″:”Arizona”},
    {“StateID”:”4″,”0″:”4″,”StateName”:”Arkansas”,”1″:”Arkansas”}]

    var sourceState = {
    datatype: “json”,
    datafields: [
    { name: ‘StateID’ },
    { name: ‘StateName’ }
    ],
    id: ‘id’,
    url: ‘StateJSON.php’,
    async: false
    };

    var dataAdapterState = new $.jqx.dataAdapter(sourceState, {
    autoBind: true,
    beforeLoadComplete: function (records) {
    var data = new Array();
    for (var i = 0; i < records.length; i++) {
    var state = records[i];
    data.push(state);
    }
    return data;
    }
    });

    { text: 'State', dataField: 'State', width: 200, editable: true, columntype: 'combobox',
    createeditor: function (row, column, editor) {
    editor.jqxComboBox({selectedIndex: 0, source: dataAdapterState, displayMember: "StateName", valueMember: "StateID", promptText: "Please Choose:" });
    },
    // update the editor's value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    alert(newvalue);

    if (newvalue == "") return oldvalue;
    }
    },

    Grid Editor using ComboBox and JSON #9747

    Dimitar
    Participant

    Hello DavidSimmons,

    1) The cellvaluechanging function has access to the cell’s old and new value, and not to the index of the selected item via the editor.

    2) To select an index in the editor initially, please use the initeditor function, i.e.:

                    columns: [
    {
    text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox',
    createeditor: function (row, column, editor) {
    // assign a new data source to the combobox.
    var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
    editor.jqxComboBox({ source: list, promptText: "Please Choose:" });
    },
    initeditor: function (row, column, editor) {
    editor.jqxComboBox('selectIndex', 2);
    },
    // update the editor's value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    if (newvalue == "") return oldvalue;
    }
    },

    Best Regards,
    Dimitar

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

    Grid Editor using ComboBox and JSON #9784

    DavidSimmons
    Participant

    I would really like to see more demos and possibility of database demos. If you are using a ComboBox to edit a cell in the grid, I would think the cell is a Foreign Key. So on the cellvaluechanging I would think the newValue should be the SelectedIndex value not the DisplayValue. But that brings up the next question which is before you edit the cell the grid values should be DisplayValue or the Foreign Key Value. Currently I am not sure if JQWidgets are designed to accomplish this. Maybe this is planed for a later release. But what I am trying to do seems like a very standard design and I would think many users would want the ability. All the current examples are dealing with list of strings or DisplayValues only, which I don’t see anyone using this in a database designed web app. I would love to talk to any using this for heavy database designed applications. I think the demos are a better way to convey JQWidget capabilities before someone understands all of the API.

    Currently this is the only area that keeps me lock into JQGrid. I really want to move to JQWidgets completely if I can understand Grid Foreign Key Display and ComboBox Editors….

    Grid Editor using ComboBox and JSON #9785

    Peter Stoev
    Keymaster

    Hi David,

    Let met try to explain how the editor and foreign key works:

    1. The Foreign Key functionality of jqxGrid allows you to display data(column) from a foreign data source within a Grid bound to one data source.

    2. What happens when a list editor is opened?

    – The ComboBox/DropDownList editor takes the unique values of the column and displays them in a popup. The user can choose a new value for the cell from the popup list. *Note that each column in jqxGrid is bound to only 1 data field. There are no displayMember/valueMember properties here.

    – Using the Grid’s API, you can change the ComboBox/DropDownList’s data source and set it to any other data source. However, you will have only displayMember. valueMember is not used because the column is bound and can be bound to only 1 data field.

    – the cellvaluechanging callback can be used to update the edited value and change it before closing the editor. I don’t know why you expect to have selectedIndex there, but what is passed to the function are the old and the new value of the edited cell. I would like to point again, that a Grid column can be bound to only 1 data field .

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Grid Editor using ComboBox and JSON #10008

    DavidSimmons
    Participant

    Ok I need to setcellvalue of a alternate column when editing the current column I am editing?

    { text: ‘State’, dataField: ‘State’, width: 150, editable: true, columntype: ‘combobox’,
    createeditor: function (row, column, editor) {
    editor.jqxComboBox({selectedIndex: 0, source: stateDataAdapter, autoComplete: true, displayMember: “State”, valueMember: “ID”, promptText: “Please Choose:” });

    *************************************************************
    On select how can I update a different column?
    This seem to be the code but does not work here. Is there a different way?
    *************************************************************
    editor.bind(‘select’, function (event) {
    var stateIndex = event.args.index;

    //$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, StateID”, stateIndex);

    });

    *************************************************************
    Then is possible will it produce a cellvaluechanged event on the updated column StateID?
    *************************************************************

    },
    initeditor: function (row, column, editor) {
    editor.jqxComboBox(‘selectIndex’, 0);
    },
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    if (newvalue == “”) return oldvalue;
    }
    },

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

You must be logged in to reply to this topic.