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

kendo window component

10 Answers 31 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Mohammad
Top achievements
Rank 1
Veteran
Mohammad asked on 14 Sep 2020, 10:34 AM

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>

10 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 14 Sep 2020, 10:42 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 14 Sep 2020, 11:24 AM
Windows is displayed but the ComboBox contents are not displayed
0
Stefan
Telerik team
answered on 14 Sep 2020, 11:36 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 14 Sep 2020, 12:39 PM

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.

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 14 Sep 2020, 12:44 PM

it's interesting !

After set value, it sometimes shows this shape

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 14 Sep 2020, 12:45 PM
it's interesting !
After set value, it sometimes shows this shape
0
Stefan
Telerik team
answered on 14 Sep 2020, 12:46 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 15 Sep 2020, 07:25 AM
 
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>
  );
0
Stefan
Telerik team
answered on 15 Sep 2020, 07:40 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 15 Sep 2020, 08:50 AM
thanks Stefan my problem is solved
Tags
Wrappers for React
Asked by
Mohammad
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Mohammad
Top achievements
Rank 1
Veteran
Share this question
or