Dynamic options list in Editable select column

[yakirg]

I have a problem where I have one column that is a type and another that is a refine on said type:

const posTypes = ["Any", "Noun", "Verb", "Adjective", "Adverb", "Cardinal number"];
const posRefineTypes = {
  "Any": [],
  "Noun": ["Any", "Single", "Plural", "Proper noun single", "Proper noun plural"],
  "Verb": ["Any", "Base form", "Past tense", "gerund or present participle", "past participle", "non-3rd person singular present", "3rd person singular present"],
  "Adjective": ["Any", "Comparative", "Superlative"],
  "Adverb": ["Any", "Comparative", "Superlative"],
  "Cardinal number": []
};
...

           <TableHeaderColumn
                dataField='Pos' editable={ {type: 'select', options: {values: posTypes}} }
                width={"120px"}>
              Pos
            </TableHeaderColumn>

            <TableHeaderColumn
                dataField='Refine'
                editable={  {type: 'select', options: {values: posRefineTypes[Pos]}} }
                width={"120px"}>
              Refine
            </TableHeaderColumn>   

I need the options in the sub type to match the type, but it has to be a constant.

Is there a way to get it done?

[AllenFang]

@yakirg, it's impossible now but I have few question

options: {values: posRefineTypes[Pos]}} }

what's the Pos?? which depend on previous column value? thanks

[yakirg]

Pos is one column select value (stands for Parts Of Speech)
Refine is the next column, which has options that relate to the value selected in Pos.

Hope this clears a bit ...

[AllenFang]

@yakirg, I probably know your requirement, I'll consider to add this feature by a callback function, you can decide what options list you want depend on row data, that's what I think but I need to check code and no schedule promise here, sorry for that due to busy recently. thanks

[yakirg]

@allen, a callback will be great! Thanks.

[yakirg]

Created a PR with a suggested fix.
It is still problematic on the insert new dialog part, because the row doesn't exist, but it's usable as is.

[AllenFang]

@yakirg, nice !! I will check this out. 👍

[AllenFang]

Fixed on v4.0.0-beta.8

[AllenFang]

v4.0.0 release

[shanben7]

Hi, I believe I am still having the problem @yakirg mentioned where the the "row" is undefined in the insert dialog, and so I cannot choose my values this way for the insert dialog. Is there a fix for this? I am using version react-bootstrap-table v4.0.5.

[yakirg]

The insert dialog was never fixed, and I had difficulty implementing it, as there is no 'row' object available at that stage. I wish it was fixed, but it was not critical for my application, so I did not pursue it further.

…

On Thu, Dec 7, 2017, 6:25 PM Shannon Benson ***@***.***> wrote: Hi, I believe I am still having the problem @yakirg <https://github.com/yakirg> mentioned where the the "row" is undefined in the insert dialog, and so I cannot choose my values this way for the insert dialog. Is there a fix for this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1423 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIyabC-eJA5z4CPbTmY5IGQNUpkY62Z2ks5s-HPdgaJpZM4OF32Q> .

[nkarmak]

I am not able to get this going. I am trying to filter the drop down menu options based on the value of one of the other columns, but the column it depends on is not editable.

    const dropDownOptions = {
      type: 'select',
      options: { values: this.state.selected_values['Product_Name'] }
    };

this.state.selected_values is an object which has the same structure as posRefineTypes defined above, with the key being values of 'Product_Name' and the values being array of facilities.

  <TableHeaderColumn width='35%' dataField='Product_Name' isKey dataAlign="center" dataSort={ true } >Product Name</TableHeaderColumn>
  <TableHeaderColumn width='35%' dataField='facility_name'  dataAlign="center" editable={dropDownOptions} dataSort={ true }>Fixed Facillity Name</TableHeaderColumn>

Is this correct?

[ashish00076]

@AllenFang @yakirg was the insert dialog issue fixed here ?

Please respond, critical situation.

Thanks & Regards,
Ashish Deshpande

[yakirg]

My last comment still stands. The insert was never fixed (to my knowledge) but it's not too critical for me, my users create first and edit later.

[NikhithaPeesari]

I am not able to get this going. I am trying to filter the drop down menu options based on the value of one of the other columns, but the column it depends on is not editable.

    const dropDownOptions = {
      type: 'select',
      options: { values: this.state.selected_values['Product_Name'] }
    };

this.state.selected_values is an object which has the same structure as posRefineTypes defined above, with the key being values of 'Product_Name' and the values being array of facilities.

  <TableHeaderColumn width='35%' dataField='Product_Name' isKey dataAlign="center" dataSort={ true } >Product Name</TableHeaderColumn>
  <TableHeaderColumn width='35%' dataField='facility_name'  dataAlign="center" editable={dropDownOptions} dataSort={ true }>Fixed Facillity Name</TableHeaderColumn>

Is this correct?

i am facing a similar issue. Any suggestions on how to resolve it?Thanks.