Dropdown select shows value instead of showing text

Nwilliams8162 · July 2020

As you can see, when I filter in a list of options on a select field, It defaults to showing the value instead of the text. I want it to only ever show the text and i'll utilize the value when using ajax.

Thanks

colin · July 2020

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Nwilliams8162 · July 2020

Colin,

Here is the example:

https://codepen.io/nrwilliams/pen/NWxOgwz

colin · July 2020

Ah, I see, thanks for the test case. This thread here should help. The problem is that the value really is 1, so the table is displaying that. When the server responds to the update, it should send back the correct project name, probably with from a join (example here)

Colin

Nwilliams8162 · July 2020

I am not sure I follow one hundred percent. Are you saying I need to revise the way my select options are set up?

allan · July 2020

I'm afraid I'm not quite following either .

Going back to your screenshot - in the select you have a label, but the cell below shows what appears to be an id value rather than a label.

Generally I would expect the table to show the labels in the columns, and also in the select list. Is that not what you want - do you want to show the id value in the table?

The codepen example doesn't work because there are no matching values for the options in the table. e.g. take the Project column - it shows 8517, but there is no option for that in the PPA_VPPAProductOptions array (thus it defaults to 1 which is the first and only option in that array).

Could you clarify what behaviour it is you are looking for here?

Thanks,
Allan

Nwilliams8162 · July 2020

Allan,

Sorry about that. I just updated the first column on that codepen. So, when you click on the field it gives you a dropdown that has one option that says "Test". Then when you commit that field it shows you the id or whatever is the value. Instead I want it to display "Test" and not 8517.

Nwilliams8162 · July 2020

Any other guidance you can give?

allan · July 2020

Sorry - missed this one!

The problem you are having is that you are trying to have both the label and the value under a single parameter - project. It can't be both. Typically, what you would do is have (e.g.) projectId and projectName (or project.name if you are joining tables in the database which is most likely).

That way you can instruct DataTables to use the name for display and Editor to use the id as the value that is being edited.

If you have a look at this example you can see that in action. There I use users.site as the id, and sites.name as the label. So there are two different data points, although they are linked (through the database).

That's what Colin was driving at above - you need to separate the two so they can be used.

One way of doing that (if you can't include the project name in your data structure) is to use a client-side rendering function for your column. That could take the id of the project and look it up (ideally from another client-side array or object).

Allan

Nwilliams8162 · July 2020

Hm, I tried and no luck. Just got the following error:

DataTables warning: table id=proposals-table-ppavppa183562 - Requested unknown parameter 'projectname' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

Below is part of the group of data I am referencing. When I put project (which is the id number) in editor and projectname (Name of project) in the columns, that is when I was getting the error above.

project: result.getValue({name: 'custbody_pb_project'}),
projectname: result.getText({name: 'custbody_pb_project'}),

Also, here is what the editor side looks like:

{
type: 'select',
label: 'Project:',
name: 'project',
multiple: false,
//separator: ',',
options: jQuery(this).data('projectoptions')
}

Not sure what I am doing wrong as I noticed the example you sent did not have any options parameter, so not sure how those were coming in.

allan · July 2020

Are you able to update your Codepen example from above with the current state of play please? Are you getting the unknown parameter error on initial load of the table? That error means that projectname isn’t in the parameters available for the row (note that it is case sensitive - not sure if that is the issue or not).

Allan

Nwilliams8162 · July 2020

Okay I updated the pen after getting closer. It shows the names now but when you select the project to change, whenever you submit it, it submits the whole line and changes everything back to the value instead of the text.

allan · July 2020

Thanks for the update. The problem is you are still trying to use projectname as both the label and the value. The DataTable column should be showing projectname (it is), while the Editor field should be operating on the project id (it isn't - it is also using projectname).

So we need to update the Editor field to use project. You also need to tell Editor that when you activate an edit on the projectname column you actually want to edit project - you use columns.editField for that - e.g. editField: 'project'.

That gets us 90% of the way there. The final missing item is that the edit only edits the project value. DataTables is still showing the old projectname. There are two ways to address this:

If you know the list of project options - like you do in your example, then you could use a renderer to look up the project id and get the label.
If you don't have an easy to use static list, you'll need to get it from the server.

1 is obviously the easiest, but it will depend a little on how closely this example matches what you are using on your page.

This example might also be of some help as it achieves basically what you are looking to do: http://live.datatables.net/layonado/2/edit .

Allan

Nwilliams8162 · July 2020

Thanks!!! I got it working now. Only thing left though it seems to be submitting the whole line and autofilling some fields in that line vs just submitting the cell im editing. How can I fix that?

allan · July 2020

It should, by default, submit only the changed values (the question is normally how to make it submit all values!).

That it is submitting other values suggests that they are changing value for some reason?

Allan

Nwilliams8162 · July 2020

I know, but if you look at the codepen as well it is doing that and I don't know how to stop it. Any recommendations from looking at that?

Nwilliams8162 · July 2020

Really need help on this one. Can't get the form to stop submitting each row and just submit each cell as I edit.

Thanks

allan · July 2020

Hi,

If I add the following to your CodePen:

PPA_VPPAeditor.on('initEdit', function (e, node, data) {
  console.log('initEdit', JSON.stringify(data));
})
PPA_VPPAeditor.on('preSubmit', function (e, data, action) {
  console.log('preSubmit', action, JSON.stringify(data));
})

it shows the data that is used for edit and then what would be submitted. That turns out to be the following for the initEdit:

{
    "contracttype": "1",
    "contracttypename": "VPPA",
    "settlementlocation": "14",
    "settlementlocationname": "NYISO Zone G",
    "settlementtype": "1",
    "settlementtypename": "Hub",
    "technology": "1",
    "technologyname": "Solar",
    "product": "1",
    "productname": "E",
    "shape": "",
    "shapename": "",
    "mw": "200",
    "termlength": "12",
    "escalator": "12.0%",
    "pricemwh": "32.50",
    "pricedaabot": "",
    "cod": "12/31/2023",
    "atirr": "",
    "shortlisted": false,
    "track": false,
    "datesent": "3/13/2020",
    "proposaltype": "1",
    "project": "19336",
    "projectname": "Yellowbud Solar",
    "status": "9",
    "statusname": "0|Closed - Alternate Proposal Won",
    "pricingnotes": "Storage adder: $8.15/MWh",
    "DT_RowId": "row_603",
    "id": "148686",
    "probability": "",
    "batterysize": "",
    "batteryhrs": "",
    "dispatchcontroller": "",
    "dispatchcontrollername": "",
    "vintageyear": "",
    "certificationagency": "",
    "certificationagencyname": "",
    "numberofrecs": "",
    "isorto": "",
    "isortoname": "",
    "zone": "",
    "capacitytype": "",
    "capacitytypename": "",
    "planningyear": "",
    "proposalType": "PPA_VPPA",
    "proposalLineID": "603"
}

And preSubmit shows:

{
    "data": {
        "row_603": {
            "projectname": "6155",
            "statusname": "20",
            "contracttypename": "",
            "settlementtypename": "",
            "settlementlocationname": "",
            "technologyname": "",
            "productname": "",
            "shortlisted": [false],
            "track": [false]
        }
    },
    "action": "edit"
}

So Editor thinks those fields have changed value. If we take settlementlocationname as an example we can see:

Original: "settlementlocationname": "NYISO Zone G",
Current value: "settlementlocationname": "",

It looks like that is suffering from the same issue we discussed before - the difference between the label and value.

If Editor is submitting a field, then it thinks there is a value change, and to resolve, there needs to not be a value change (assuming you don't want it to change!).

Allan

Nwilliams8162 · July 2020

Okay, I am honestly at a loss at what to do now and we have to get this working for a major client of ours. My instance is different as I am loading in select options from a list on each editor. I get errors when the editor name and table data fields do not match.

Dropdown select shows value instead of showing text

Dropdown select shows value instead of showing text

Answers

Howdy, Stranger!

Categories

DataTables

Dropdown select shows value instead of showing text

Dropdown select shows value instead of showing text

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables