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?

I have a Sortable component that generates a grid within each item, however this has been preventing any grid buttons from firing their onClick event.

Here's an example: https://stackblitz.com/edit/react-4fwts6?file=app/main.jsx

Clicking on a row item will block the following click on a button inside the grid, but not a button outside of the grid.

Is there a workaround or something I'm doing wrong?

Hi, I try to implement DropDownList to filter inside the columnMenu for the field Product Name.

the problem is that even when I select value the filter button is disabled, how can I make it work?

here is my example code: https://stackblitz.com/edit/react-s9pvmb-hgbvrt?file=app/main.jsx

Hi I looked for the docs to figure how to handle this question but the docs show the only solution for the type of the field like in the photo:

I wonder how to do this but for each field, without depending on the type of the field for example to the 'id' field I want only equals operator, and the field name I want the default operators.

Hello,

I am currently working to implement Kendo React grid column filters (specifically the GridColumnMenuFilter) on custom cell columns in a grid and have run into issues with our dropdown cell columns.

We are using the Kendo React combobox component as a custom cell in our grids, but are running into issues with the filtering due to the nature of the control having both a value and description which need to be different. Right now, when we type into our column menu filter, it is filtering the column based on whether the dropdown value (the code behind the description the user sees) matches the filter instead of trying to match the description (which is unhelpful for end users). Is there a way to have the column menu filter for this specific column use the description of the column instead of the value (without messing up the combobox displayed description) or will this likely take a lot of extra coding to implement? Any thoughts or feedback on this issue would be helpful!

Thanks,

Andrew

I have used the Grid component with the select functionality and was wondering if I can somehow disable the select all checkbox in the header but still be able to select multiple rows of the grid. Is this possible?

i know if using Span i can colour an icon like this:

<span className={`fas fa-question-circle`} style={{ color:'red' }}/>

How do I change the icon colour for each PanelBarItem? This does not work:

Hello, I am using KendoReact DropDownTree component for my form and i want to create a label for it so when i do click on the label DropDownTree opens,

i've tried to implement it in the same way as it is done for dropdownlist

DropDownWrapper:

but it doesn't work for me, when i click on the label it just focuses DropDownTree but doesn't open it, what am i doing wrong?