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

[Solved] kendo window component

10 Answers 247 Views

Wrappers for React

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

Mohammad asked on 14 Sep 2020, 10:34 AM

how to Using kendo components in the kendo window component

When I use the following code, it does not show information to me

const plantList = [{ text: "Small", id: 1 },{ text: "Medium", id: 2 },{ text: "Large", id: 3 }];

<Window

title="Formula"

onClose={handleReturn}

initialHeight={400}

resizable={false}

maximizeButton={() => null}

>

<ComboBox

data={plantList}

textField="text"

filterable={true}

onFilterChange={filterChange}

/>

</Window>

10 Answers, 1 is accepted

answered on 14 Sep 2020, 12:45 PM

window-combobox.png

it's interesting !
After set value, it sometimes shows this shape

answered on 15 Sep 2020, 07:25 AM

2020-09-15_10-53-12.png

useEffect(() => {

axios.get('/api/plants').then(response => {

console.log(response.data);

let pl=[];

response.data.map((item)=>{

pl.push({text:item.title,id:item.id});

});

setPlantList(pl);

});

}, []);

return (

<div>

{visible && (

<Window

title="Tag"

onClose={handleReturn}

initialHeight={400}

resizable={false}

maximizeButton={() => null}

>

<form className="k-form" >

<fieldset>

<label className="k-form-field">

<span>Title</span>

<input

id="title"

className="k-textbox"

type="text"

name="title"

placeholder="Title"

//defaultValue={formData.title}

// onChange={handleOnChange}

/>

</label>

<label className="k-form-field">

<span>Description</span>

<input

className="k-textbox"

type="text"

name="description"

placeholder="Description"

// defaultValue={formData.description}

// onChange={handleOnChange}

/>

</label>

<label className="k-form-field">

<span>Description</span>

<ComboBox

data={plantList}

value={value}

textField="text"

filterable={true}

onFilterChange={filterChange}

onChange={handleChange}

/>

</label>

</fieldset>

<br />

<Button primary input="submit">

Submit

</Button>

<Button onClick={handleReturn}>Return</Button>

</form>

</Window>

)}

</div>

);