For Multiselect dropdown we have given the autoclose property to false , but the dropdown closes once we select a item 

Below is the code used

 <MultiSelect
            id='ddlf4'
            // className='k-dropdownstate'
                  data={result.result}
                  itemRender={itemRender}
            autoClose={false}
                  value={selval} //{this.props.value || ""}
            filterable={true}
            onChange={onChange}
                  onFilterChange={onFilterChange}

            clearButton={false}
            textField='text'
                  dataItemKey='id'

            //onBlur={this.onLeave}
            tags={[]}

          />

Attached the full file also

I use a TreeView in my app and whenever I click on one of the triangles to open another tree layer, I get the attached warning in the console. This also happens when I use a Tree in a dropdown. Is there anything I can do about this? Here is the data that I use with it:

[
    {
        "id": 1,
        "text": "Hessen",
        "items": [
            { "id": 2, "text": "Mannheim" },
            { "id": 3, "text": "Frankfurt" }
        ]
    },
    {
        "id": 4,
        "text": "Rheinland-Pfalz",
        "items": [
            {
                "id": 5,
                "text": "Mainz",
                "items": [
                    { "id": 50, "text": "Gebäude A" },
                    { "id": 51, "text": "Gebäude B" },
                    { "id": 52, "text": "Gebäude C" }
                ]
            },
            { "id": 6, "text": "Kaiserslautern" },
            { "id": 7, "text": "Zweibrücken" }
        ]
    },
    {
        "id": 8,
        "text": "Bayern",
        "items": [
            { "id": 9, "text": "München" },
            { "id": 10, "text": "Rosenheim" }
        ]
    },
    {
        "id": 11,
        "text": "Saarland",
        "items": [
            { "Id": 12, "text": "Saarbrücken" },
            { "id": 13, "text": "Neunkirchen" }
        ]
    }
]

Hi forums,

I wonder is there any way for me to have a year-only datepicker. Without month or date. How can I customize the component to suit my need?

Thanks!

Hi Telerik Team,

when using the simple example below, there few warnings/errors apear in console

can you check if this is an issue with Typescript definition or some bug ?

Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbOrderedList` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

react_devtools_backend.js:2540 Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbListItem` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbDelimiter` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

react_devtools_backend.js:2540 Warning: Failed prop type: KendoReactBreadcrumb: prop type `breadcrumbLink` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

Hi Team,

I need to implement IN condition filter for Data Grid Column.

For Example:

User tries to apply filter on "Country" Column in Grid with values like "INDIA, USA, CHINA"

--

Thank You

Karthikeyan Rajakumar

Hello!

I want to perform the following: load MS Word (.rtf) file content using internal API (the format is {content: binaryArray, contentType: 'application/octet-stream'}) and insert the file content as a value for RTE for the read\update\save.

It is some kind of replacement for manual copy\paste from the opened .rtf file in MS Word.

Currently, when I receive the rtf file in the aforementioned format, I see the rtf specific text in RTE editor (screen in attachments).

I am able to receive a content and create a BLob based on it to download the file, but that's all what i have for now and i am looking at the control that may embed MS Word content with styling\formatting "on the fly".

Is there a case for this? Can I dynamically read\set such kind of content?

Regards,

Andrey

As you have described on this page, I have added a DropDownButton. The only difference that is on my end is that I placed the button on a Dialog component in a form. Unfortunately now, when I click the button, the dropdown opens "under" the Dialog (see attached screenshot). Can I influence that behavior somehow so that it appears above it?

Thanks for all your help!

Hi,

I have a filter component. I want to show a popup if nothing is selected for "Hobbies" filter.

import React, {useState, useEffect, useCallback} from 'react'
import {DropDownList, MultiSelect} from "@progress/kendo-react-dropdowns"
import {Button} from '@progress/kendo-react-buttons'
import { useHistory, useLocation } from "react-router-dom"
import { Popup } from "@progress/kendo-react-popup"


const Filter = () => {
    
    const history=useHistory()
    const location=useLocation()
    const [Standard,setStandard] = useState("All")
    const [Hobbies,setHobbies] = useState(["Playing"])
    const [Responsibility,setResponsibility] = useState("All")
    const [QueryString,setQueryString] = useState(location.search.substring(1))
    const [Show, setShow] = useState(false)

    const options={
        StandardList:["All","VI","VII","VIII"],
        HobbiesList: ["Playing", "Drawing","Swimming"],
        ResponsibilityList:["All","Monitor","Head","Sports Captain"]
    }

    const handleApply = ()=>{  
        if(!Hobbies.length )
        {
            setShow(true);
        }
        else{
            setQueryString(`Standard=${JSON.stringify(Standard)}&Responsibility=${JSON.stringify(Responsibility)}&IncidentStatus=${JSON.stringify(Hobbies)}`)
        }  
    }

    useEffect(() => {
        var params= new URLSearchParams((QueryString)?(QueryString):`Standard=${JSON.stringify(Standard)}&Responsibility=${JSON.stringify(Responsibility)}&IncidentStatus=${JSON.stringify(Hobbies)}`)
        history.push({search: params.toString()})
    }, [QueryString])

    return (
        <div>
            <label>Standard </label>
            <DropDownList data={options.StandardList} defaultValue={"All"} value={Standard} 
            onChange={(event)=>setStandard(event.target.value)}/> 

            <label > Hobbies </label>
            <MultiSelect data={options.HobbiesList} defaultValue={["Playing"]} value={Hobbies} onChange={(event)=>setHobbies([...event.value])}/>
        
            <label > Responsibility </label>
            <DropDownList data= {options.ResponsibilityList} defaultValue= {"All"} value={Responsibility} onChange={(event)=>setResponsibility(event.target.value)} />

            <Button id="submitFilter" type="button" onClick={handleApply} > Apply </Button>  

            <Popup show={Show} className={'backdrop'} popupClass={'popup-content'}>
                <div id="warning">
                    Please select the Hobbies filter
                </div>
                <div>
                    <Button id="ok" type="button" onClick={()=>setShow(false)}>
                        OK
                    </Button>
                </div>
            </Popup> 
        </div>
    )  
}

export default Filter

This is the styling file that I am using:

.backdrop {
  position: fixed;
  top: 0 !important;
  bottom: 0;
  left: 0 !important;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.1);
  display: none;
}

.popup-content {
  color: #787878;
  background-color: #f1f1f1 !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  height: 125px;
  width: 425px;
  border-radius: 3px;
  position: fixed;
  left: 530px;
  top: 0px
}

Basically I want to achieve this https://www.telerik.com/kendo-react-ui/components/popup/ (using React, hooks and TS) example but instead of using the HTML Button I want to replace it with the Kendo-UI Button component. So when I replace the <button> element with the Kendo-UI Button I get type Errors for the ref.

How do I fix this?