Hello,

Currently we are getting an error for missing locale info for 'hr' but not for 'en' when adding DatePicker input in the scope of the project (DateTimePicker and TimePicker workds just fine).

We are loading all the data needed with the cldr packages so cldr-core (likelySubtags, currencyData, weekData), and cldr-number-full and cldr-dates-full for these two locales. For hr locale it gives an error saying missing locale info for 'hr' pointing at the split-date-format.js but when we change to 'en' locale and pass it to IntlProvider and LocalizationProvider it goes without problem.

We would appreciate some feedback for this or atleast an escape hatch for a while becuase we want to use DatePicker component.

Best regards.

I have shared the screenshots of the problem.

The Column separators appear when executing localhost (i.e. npm start)

But the column separators dont appear when deployed on Host (i.e. npm run build).
However, if I hover over the separator area, I'm able to resize and re-order the columns.
Just the visual lines are not visible.

I use a custom MuellerTheme.css that I downloaded via the Progress-ThemeBuilder.

Attached are the package.json and additional .css files in use.

I want to upgrade kendo react Grid component(@progress/kendo-react-grid@5.5.0) to version 5.5.0.  but its showing dependency errors related some other components as well.  Please help on this issue.

Hi team,

I would like to change particular slot background color on certain days based on certain condition.

I read:
https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots/

I am aware there is this props:
https://www.telerik.com/kendo-react-ui/components/scheduler/api/SchedulerSlotProps/

isAllDay, isWorkDay, etc

But is there a way for me to add my own custom props like "isOnDuty", and then if true, I can color it with specific colors.

Or certain way to customize the background color based on a condition checking.

Something like (I use devtool to edit):

Edit, was able to do using this code:

const CustomSlot = (props) => {
  
  let colorBg;
  if(props.start.getHours() === 8 && props.start.getDay() === 1){
    colorBg = '#f520aa';
  } else if(props.isAllDay || !props.isWorkHour || !props.isWorkDay){
    colorBg = '#ffddcc';
  } else {
    colorBg = '#ccff99';
  }
 
  return (
    <SchedulerSlot
      {...props}
      style={{
        ...props.style,
        backgroundColor: colorBg,
      }}
    />
  );
};

But my main thing is not about this, I would like to somewhat give each slot a way to have its own prop to uniquely identify itself.

Thanks and appreciated.

Hello Telerik, 

Is there any way to make child elements load on demand only in expand event, and control the expand status depending on data?

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>
  );
};

I've been working with the UI for React library and, specifically, the Dropdown component. Unfortunately, I've encountered an issue where the dropdown is not functioning as expected. When I attempt to select an option, the dropdown doesn't respond, and the selected value isn't reflected. I've reviewed the documentation and examples, but I couldn't find a solution to my specific problem. I've also checked my implementation against best practices, but the issue persists.

If anyone in the community has faced a similar problem or has insights into troubleshooting the React Dropdown component, I would greatly appreciate your assistance.

Hi,

How to responsive columns kendo grid react view on mobile.

same : https://demos.telerik.com/kendo-ui/grid/responsive-columns

Thanks for any help.