This is a migrated thread and some comments may be shown as answers.

DropDownList react wrapper and toggling enable

1 Answer 280 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 17 Nov 2017, 02:35 PM

I have a class as such:

export class DropDownList extends React.Component<DropDownListProps, object> {
  render() {
    var testing = (typeof this.props.enable !== 'undefined') ? this.props.enable.toString() : '';
    return (
      <div>
        <label>{this.props.title} {testing}</label>
        <Select {...this.props} enable={this.props.enable} />
      </div>
    );
  }
}

 

But when my component is re-rendered after the enable flag has changed from false to true, the dropdownlist stays disabled/gray. <Select> is a simple wrapper around kendo dropdownlist

import { DropDownList as KDropDownList } from '@progress/kendo-dropdowns-react-wrapper';
 
export default class DropDownList extends KDropDownList {}

 

And finally is used in

export const EditForm: React.StatelessComponent<EditFormProps> = ({ advice, change, editMode }) => {
  var opts: kendo.ui.DropDownListOptions = {
    dataTextField: "text",
    dataValueField: "value",
    enable: editMode,
    dataSource: [
      { text: "All", value: "all" },
      { text: "Inpatient", value: "ip" },
      { text: "Outpatient", value: "op" }
    ]
  };
  return (
    <div>
      <DropDownList name="encounterType" title="Encounter Type" {...opts} />
    </div>
  );
}

 

Is there something I'm doing wrong? My re-render clearly shows editMode going from false to true and is displayed within the label yet the DropDownList stays disabled. If I make the first state of the DropDownList enabled, it will flip to disabled, but then not again. It seems there's a probably only from the disabled->enabled direction.

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 21 Nov 2017, 07:09 AM
Hello, Ryan,

Thank you for the description.

The issue occurs as the Kendo UI for React wrappers are only wrapper of the jQuery widgets and some of the React specific functionalities like changing the properties by changing the value is not fully supported.

If the enable/disable status has to be changed, we can recommend using the API methods as demonstrated in our demo:

https://demos.telerik.com/kendo-react-ui/wrappers/dropdownlist/api

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-enable

The described approach should be working as expected in our native React components expected in R1 January 2018.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Integration with other JS libraries
Asked by
Ryan
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or