kendo window component

11 posts, 0 answers
  1. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 14 Sep Link to this post

    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>
  2. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 14 Sep Link to this post

    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/.

  3. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 14 Sep in reply to Stefan Link to this post

    Windows is displayed but the ComboBox contents are not displayed
  4. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 14 Sep Link to this post

    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).

  5. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 14 Sep in reply to Stefan Link to this post

    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.

  6. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 14 Sep in reply to Mohammad Link to this post

    it's interesting !

    After set value, it sometimes shows this shape

  7. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 14 Sep in reply to Mohammad Link to this post

    it's interesting !
    After set value, it sometimes shows this shape
  8. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 14 Sep Link to this post

    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).

  9. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 15 Sep in reply to Stefan Link to this post

     
    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>
      );
  10. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 15 Sep Link to this post

    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).

  11. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 15 Sep in reply to Stefan Link to this post

    thanks Stefan my problem is solved
Back to Top