Hi,  I've created a drop-down list for my react application. However, when I set the initial value, the required validator is triggering even though a selection has been made. Is there something else I need to be doing?

I have couple of issues related to in-cell editing in react grid. I am using NextJs as well.

1) The problem i am facing is when i exit from the cell, the particular cell is still in edit mode. i have added an example for numeric textbox. Even though i have clicked outside the grid, the border is till highlighted & the field is in edit mode.  I am already using custom cell for different fields like( Dropdown list, checkboxes. textboxes, Numeric-text-boxes)

2) In the above numeric textbox, when i add any integer, it will display the number & the cursor will vanish immediately. I have to again click on the numeric text box to add the next  number in the same cell.

3) I have almost 300 records in the grid. I am experiencing slowness in rendering the cells when i edit different cells .

I have referred to this example:

https://stackblitz.com/edit/react-czmt6w-tpf8qh?file=app%2FcustomCells.jsx,app%2Fmain.jsx

My application was recently tested for 508 compliance. I have a cascading dropdown section on one form. First dropdown is a standard dropdown and the second is a filterable dropdown. When I select an option from the first, open the second and type, I am unable to navigate to the options to select one with the keyboard.

I was able to replicate this in the example code by making the second dropdown filterable (NOTE: I'm returning all the data when filtering for simplicity). See below:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DropDownList, DropDownListChangeEvent, DropDownListFilterChangeEvent } from "@progress/kendo-react-dropdowns";
import { dataCategories, dataProducts, dataOrders } from "./data";
import { filterBy } from '@progress/kendo-data-query';

const defaultItemCategory = { categoryName: "Select Category ..." };
const defaultItemProduct = { productName: "Select Product ..." };
const defaultItemOrder = { orderName: "Select Order ..." };

const App = () => {
  const [state, setState] = React.useState({
    category: null,
    product: null,
    order: null,
    orders: dataOrders,
    products: dataProducts
  });

  const categoryChange = (event: DropDownListChangeEvent) => {
    const category = event.target.value;
    const products = dataProducts.filter(
      product => product.categoryId === category.categoryId
    );

    setState({
      ...state,
      category: category,
      products: products,
      product: null,
      order: null
    });
  };

  const productChange = (event: DropDownListChangeEvent) => {
    const product = event.target.value;
    const orders = dataOrders.filter(
      order => order.productId === product.productId
    );

    setState({
      ...state,
      product: product,
      orders: orders,
      order: null
    });
  };

  const orderChange = (event: DropDownListChangeEvent) => {
    setState({ ...state, order: event.target.value });
  };

  const ddlProducts_onFilterChange = (event: DropDownListFilterChangeEvent) => {
    setState({ products: state.products });
  }



  const category = state.category;
  const product = state.product;
  const order = state.order;

  const hasCategory = category && category !== defaultItemCategory;
  const hasProduct = product && product !== defaultItemProduct;

  return (
    <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
      <div>
        Categories
        <br />
        <DropDownList
          style={{ width: '300px' }}
          data={dataCategories}
          textField="categoryName"
          onChange={categoryChange}
          defaultItem={defaultItemCategory}
          value={category}
        />
      </div>
      <div>
        Products
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasCategory}
          data={state.products}
          textField="productName"
          onChange={productChange}
          defaultItem={defaultItemProduct}
          value={product}
          filterable={ true }
          onFilterChange={ ddlProducts_onFilterChange }
        />
      </div>
      <div>
        Orders
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasProduct}
          data={state.orders}
          textField="orderName"
          onChange={orderChange}
          defaultItem={defaultItemOrder}
          value={order}
        />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("my-app"));

Is this a known issue? Please advise.

Thanks in advance

Greetings,

I found out that the External filter allows the user to type in the first DropDownList to search for the column name before selecting it.
Is it possible to change the first DropDownList onChange function to delay an action until the user stops typing before triggering the search?

Please help, thanks!

Jason

Problems with the "Field > Combobox" component when passing all the data, label and component properties to it, no problem, but when I add "textField" the combobox gives me a list of [object Object]. Maybe I'm passing the properties wrong, could you give me some clue? 

I have the list of "moneda" that is passed in data through the API.

In the attached image you can see that it loads the list with the value of 'CLP' which is correct and you see the [Object object] list. Greetings

   const [currency, setCurrency] = useState([]);

   useEffect(() => {
     (async() => {
       const currency = await getDefiCurrencies();

       setCurrency(currency);
     })();
   }, []);

---------------Edit Form --------------------------
                   <Field
                     id={'CodiMone'}
                     name={'CodiMone'}
                     label={'Currency'}
                     component={FormComboBox}
                     // textField={'CodiMone'}
                     data={currency}
                   />

I am trying to implement scrolling within a DropDownTree KendoReact component. So far, I am not seeing that this is possible, but am hoping there is a solution or workaround. Does anyone have suggestions?

We are basically implementing a large list of selectable items to a user (may also change to a MultiSelectTree to make this work), but due to the number of items we have, the vertical height goes off the page.

I did find a forum post from a while back here that makes it seem like maybe this feature is to be implemented come January 2024, but am not positive.

Hello KendoReact Team,

is there an example that shows how to fully customise a numeric filter cell? I have the case that I need a filter cell for integers and one for decimals. The creation of the component is done, but I can't find an example that also implies the filter operator. The following questions arise from the problem.

1. Where can I view all the CSS classes of KendoReact that I can use for component styling? E.g. `k-icon k-i-filter-clear k-buttonicon` With this class I can style a clear button, including automatic assignment of the icon.

2. Which element is necessary to display the selection list of the filter operator?

3. Is it possible to implement the filter element in the standard display?

Thank you for the help

Screen capture

Code

import { NumericTextBox, NumericTextBoxChangeEvent } from "@progress/kendo-react-inputs";
import { GridFilterCellProps } from "@progress/kendo-react-grid";
import { Button } from "@progress/kendo-react-buttons";
import React, { useState } from "react";
import { DropDownList } from "@progress/kendo-react-dropdowns/dist/npm/DropDownList/DropDownList";
import { DropDownListChangeEvent } from "@progress/kendo-react-dropdowns";

type CustomNumericFilterCellProps = {
  gridFilterCellProps: GridFilterCellProps;
  format: string;
};

type NumericFilterOperatorType = {
  text: string;
  operator: string;
};

const numericFilterOperators: NumericFilterOperatorType[] = [
  { text: "Is equal to", operator: "eq" },
  { text: "Is not equal to", operator: "neq" },
  { text: "Is greater than or equal", operator: "gte" },
  { text: "Is greater than", operator: "gt" },
  { text: "Is less than or equal", operator: "lte" },
  { text: "Is less than", operator: "lt" },
  { text: "Is null", operator: "isnull" },
  { text: "Is not null", operator: "isnotnull" },
];

export const CustomNumericFilterCell = ({
  gridFilterCellProps,
  format,
}: CustomNumericFilterCellProps) => {
  const { onChange: filterCellPropsOnChange } = gridFilterCellProps;

  const [filterCellValue, setFilterCellValue] = useState<number | null>(null);
  const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
  const [selectedOperator, setSelectedOperator] = useState<NumericFilterOperatorType>(
    numericFilterOperators[0]
  );

  const numericTextBoxOnChange = (event: NumericTextBoxChangeEvent) => {
    const { value: filterValue } = event.target;
    setFilterCellValue(filterValue);
    setIsFilterActive(true);

    filterCellPropsOnChange({
      value: filterValue,
      operator: filterValue ? selectedOperator.operator : "",
      syntheticEvent: event.syntheticEvent,
    });
  };

  const onButtonClearClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    event.preventDefault();
    setFilterCellValue(null);
    setIsFilterActive(false);
    setSelectedOperator(numericFilterOperators[0]);

    filterCellPropsOnChange({
      value: "",
      operator: "",
      syntheticEvent: event,
    });
  };

  const dropdownlistOnChange = (event: DropDownListChangeEvent) => {
    const operator = event.value as NumericFilterOperatorType;
    setSelectedOperator(operator);
  };

  return (
    <div className="k-filtercell">
      <NumericTextBox onChange={numericTextBoxOnChange} format={format} value={filterCellValue} />

      <DropDownList
        data={numericFilterOperators}
        textField="text"
        dataItemKey="operator"
        onChange={dropdownlistOnChange}
        value={numericFilterOperators.find((item) => item.operator === selectedOperator.operator)}
        className="k-button k-filtercell-clear"
        popupSettings={{ width: "180px" }}
      />

      <Button title="Clear" onClick={onButtonClearClick}>
        <span
          className={`k-icon k-i-filter-clear k-button-icon ${
            !isFilterActive ? "k-disabled" : "k-clear-button-visible"
          }`}
        />
      </Button>
    </div>
  );
};

Hcbc

Components are onrganized in simple hierarchical structure like this below

<Window>
<Grid>
       <GridColumn 
           cell= {props => <MultiColumnComboBox />}        


     ></GridColumn>
</Grid>
<Window>

  

     

     

When one row which means one multicolumncombobox exists inside <Grid>, No problem,

But, When two rows which mean two multicolumncombbox exist, An Error has happend.

"ResizeObserver loop completed with undelivered notifications."

my package.json  is

"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@microsoft/signalr": "^6.0.3",
"@mui/icons-material": "^5.11.9",
"@mui/material": "^5.6.4",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.17.2",
"@progress/kendo-file-saver": "^1.1.1",
"@progress/kendo-licensing": "^1.2.1",
"@progress/kendo-react-animation": "^5.9.0",
"@progress/kendo-react-buttons": "^5.18.0",
"@progress/kendo-react-charts": "^5.18.0",
"@progress/kendo-react-common": "5.18.0",
"@progress/kendo-react-data-tools": "^5.18.0",
"@progress/kendo-react-dateinputs": "^5.18.0",
"@progress/kendo-react-dialogs": "^5.18.0",
"@progress/kendo-react-dropdowns": "^5.18.0",
"@progress/kendo-react-form": "^5.18.0",
"@progress/kendo-react-grid": "^5.18.0",
"@progress/kendo-react-indicators": "^5.18.0",
"@progress/kendo-react-inputs": "^5.18.0",
"@progress/kendo-react-intl": "^5.18.0",
"@progress/kendo-react-labels": "^5.18.0",
"@progress/kendo-react-layout": "^5.18.0",
"@progress/kendo-react-listbox": "^5.18.0",
"@progress/kendo-react-listview": "^5.18.0",
"@progress/kendo-react-notification": "^5.18.0",
"@progress/kendo-react-pdf": "^5.18.0",
"@progress/kendo-react-popup": "^5.18.0",
"@progress/kendo-react-progressbars": "^5.18.0",
"@progress/kendo-react-scrollview": "^5.18.0",
"@progress/kendo-react-spreadsheet": "^5.18.0",
"@progress/kendo-react-tooltip": "^5.18.0",
"@progress/kendo-react-treeview": "^5.18.0",
"@progress/kendo-react-upload": "^5.18.0",
"@progress/kendo-svg-icons": "^1.9.0",
"@progress/kendo-theme-default": "^6.7.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.0",
"calculate-size": "^1.1.1",
"cldr": "^7.2.0",
"cldr-core": "^41.0.0",
"cldr-dates-full": "^41.0.0",
"cldr-numbers-full": "^41.0.0",
"dotenv": "^16.0.0",
"dragselect": "^2.3.0",
"hammerjs": "^2.0.8",
"mobx": "^6.6.1",
"mobx-react": "^7.5.2",
"monaco-editor": "^0.32.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-error-boundary": "^3.1.4",
"react-intersection-observer": "^9.4.3",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"react-simple-image-viewer": "^1.2.2",
"react-to-print": "^2.14.7",
"typescript": "^4.5.5",
"web-vitals": "^2.1.3"

And error image is.

Please. help me.