kendo window component

[Mohammad]

hi

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>

[Stefan]

Hello, Mohammad,

Is the Window not rendering or the ComboBox items not showing?

If it is the ComboBox items, this could be caused by an z-index issue:

https://www.telerik.com/kendo-react-ui-develop/components/popup/stack-order/

Regards,
Stefan
Progress Telerik

[Mohammad]

Windows is displayed but the ComboBox contents are not displayed

[Stefan]

Hello, Mohammad,

I saw that the ComboBox has no value or defaultValue prop.

Please set a value or a default value prop and advise if there is still an issue:
https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding/#toc-data-binding

 

Regards,
Stefan
Progress Telerik

[Mohammad]

I set the value but it still did not show

I think the problem is with the Windows component and only the HTML elements inside this component work.

[Mohammad]

it's interesting !

After set value, it sometimes shows this shape

[Mohammad]

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

[Stefan]

Hello, Mohammad,

Could you please share an example or at least an image of the issue as this will help us better understand it.

Regards,
Stefan
Progress Telerik

[Mohammad]

 

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>

  );

[Stefan]

Hello, Mohammad,

Thank you for the details.

This is the z-index issue described here, please apply the CSS and advise:

https://www.telerik.com/kendo-react-ui-develop/components/popup/stack-order/

Regards,
Stefan
Progress Telerik

[Mohammad]

thanks Stefan my problem is solved