Hi, 

I am using Vite Tool instead of webpack in our React project. And I am trying to import "@progress/kendo-theme-default/dist/all.css" in one of the .js file. But getting an error where it says - 

Failed to resolve import "@progress/kendo-theme-default/dist/all.css" from "..\Arcadix.i.Product.React\Framework\Controls\SplitPane\SplitPaneTemp.js".

Now, I have confirmed, and this file does exist in my node_modules.

I tried many appoaches, including adding this in my Vite Config files under OptimizedDeps 

I went through the following discussions

- https://github.com/vitejs/vite/discussions/9384

- https://github.com/telerik/kendo-ui-core/issues/6982#issuecomment-1232496103

and also updated the plugins 

Also, I deleted the already created "node_modules" folder and the "package-lock.json" prior to everything.

But none of these solutions seems to work.

How can I fix this issue? Or is there something I am doing wrong?

Thanks in advance.

Hi there! 

We recently updated some of our dependencies and our grid is now displaying tooltips on elements where we don't want tooltips - primarily on the column menus. Our intentional tooltips continue to work as expected. 

The first screenshot shows the tooltip working within our custom cell in the grid


Initially we saw this behavior: 


We've implemented a filter function to fire tooltips on select elements, but the default browser tooltip still displays

Our setup is:

• We have wrapped our `Grid` in the `Tooltip` context. We are only using one `Tooltip` context, so there should not be any conflict. 
  
  

<>
      <Tooltip
        position="bottom"
        anchorElement="target"
        openDelay={100}
        className="dc-kendo-tooltip"
        parentTitle={true}
        filter={filterElements}
      >
        {loading ? (
          <CenterContent showLoader>
            <GridLoader
            />
          </CenterContent>
        ) : (
          <DataclayKendoGrid
            {...dataState}
            data={gridData.map(data => ({
              ...data,
              [SELECTED_FIELD]: selectedState[idGetter(data)],
            }))}
            onDataStateChange={onDataStateChange}
            onSelectionChange={onSelectionChange}
            pageable={pagerSettings}
            dataItemKey={DATA_ITEM_KEY}
            selectedField={SELECTED_FIELD}
            total={total}
            selectable={{
              enabled: true,
              drag: false,
              cell: false,
              mode: 'multiple',
            }}
            sortable
            expandField="expanded"
            onExpandChange={onExpandChange}
            detail={detail}
          >
            {children}
          </DataclayKendoGrid>
        )}
      </Tooltip>
    </>

• We have set the `title` property on icons we want to display a tooltip
  

const CampaignActions = ({
  deleteClick, 
  viewClick, 
  editClick, 
  downloadClick, 
  ...props
}) => {
  const {dataItem} = props;
  return (
    <CommandCell {...props}>
      <Link
        to={{
          pathname: `/campaign/${dataItem._id}`,
          state: { campaign: dataItem, fromCampaigns: true },
        }}
      > 
        <View title="View Campaign"/>
      </Link>
      <Edit title="Edit Campaign" onClick = {() => editClick(dataItem)} />
      <Download title="Download Campaign Data" onClick = {() => downloadClick(dataItem)} />
      <Delete title="Delete Campaign" onClick = {() => deleteClick(dataItem)}/>
    </CommandCell>
  )
}

• We have a filter function and have add a property to the elements we want to identify as anchor elements (`data-type="action"`)

export const Edit = (props) => {
  return (
    <PopupWrapper title={props.title} onClick={props.onClick} >
      <Action data-type="action">
        <FontAwesomeIcon className = "icon" icon ="fa-light fa-pen-to-square" isopen="true"/> 
      </Action>
    </PopupWrapper>
  )
}

  const filterElements = (element) => {
    if (element.dataset.type === "action") {
      return true;
    }
    return false;
  };

              <GridColumn
                title="Created At"
                field="_createdAt"
                cell = {props => {
                  const { dataItem } = props;
                  const date = moment(dataItem._createdAt).format('MM.DD.YY / LT');

                  return (
                    <CustomGridCell
                    {...props}
                    tooltip={false}
                    cellContent={date}
                    />

                  )
                }}
                columnMenu={DateRangeMenu}
                headerClassName={
                  isColumnActive('_createdAt', dataState) ? 'active' : ''
                }
              />

Hi All,

In our project, we need to use a component such as the checkbox filter in the Grid alone to implement business functions. Can the one marked in the red box be used alone as an independent component? Thank you.

If it cannot be used alone, which component do you recommend to use to achieve similar functions, thank you very much

Hello,

I am building a component in React and need to add a custom icon to the right of the autocomplete component. By default, it has a "x"  icon, but I would like to have a search icon in there. 

Can you tell me if this is natively supported by the Kendo autocomplete component ?

Here the links:

Autocomplete: https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/

Props: AutoCompleteProps - React Dropdowns Library - KendoReact API (telerik.com)

An image is attached that shows what is the expected behavior of the component, but we do need to have a box below the input as the autocomplete comp. does. 

Hello,

I am building a component in React and need to add a custom icon to the right of the autocomplete component. By default, it has a "x"  icon, but I would like to have a search icon in there. 

Can you tell me if this is natively supported by the Kendo autocomplete component ?

Here the links:

Autocomplete: https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/

Props: AutoCompleteProps - React Dropdowns Library - KendoReact API (telerik.com)

An image is attached that shows what is the expected behavior of the component, but we do need to have a box below the input as the autocomplete comp. does. 

Hello,

we have a few specific use cases that requires us to configure inCell editing in all cells, so text, numeric, date, and time (Time picker). We are using rowRender and cellRender that are defined in renderers file.
The problem which came to light was that on text and numeric it loses focus on change of value because it rerenders because dataItem changes for the given component, but in renderers in CellRender we capture focus again with input ref, so case for input and numeric text box works.
Problem is with DateRangePicker, on selecting any value it closes. So for example if I change the start value, I want it to remain open but instead it immedietaly closes because dataItem changes and we call onChange. Entering the input in DateInput of the picker results in same thing. We tried to programmatically call onBlur and control it's show property but it is just weird. OnBlur method of DateRangePicker is called on first clicking on value, and then every other value the method is not called until you close it which is expected behaviour expect for the onBlur on first click.

Ideally, we would like to use custom cells: https://www.telerik.com/kendo-react-ui/components/grid/cells/

And we tried to implement them with inCell editing but we ran into this issue.

We would like to define our data cell for showing data. And have custom cells for edit: {text, numeric, date} which are all inCell and use that throughout the project and that they behave as we would expect it. Is there an example or PoC in which there is InCell editing with custom cells that inlcude both text, numeric, date (DateRangePicker or DatePicker)?

Thank you for your help!

I recently upgraded my node version from 14 -> 18.

After the upgrade, i started getting incompatible props datatype errors like the one below. 

Can you please help me on how to fix this issue? I've spent so much time debugging this. I'd appreciate any help. Thanks in advance!

Error

TS2769: No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, any, any, any>', gave the following error.
    Argument of type 'typeof Editor' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'typeof Editor' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'typeof Editor' is not assignable to type 'string'.
  Overload 2 of 2, '(component: keyof IntrinsicElements | ComponentType<any>): ThemedStyledFunction<keyof IntrinsicElements | ComponentType<any>, any, {}, never>', gave the following error.
    Argument of type 'typeof Editor' is not assignable to parameter of type 'keyof IntrinsicElements | ComponentType<any>'.
      Type 'typeof Editor' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'contextType' are incompatible.
          Type 'React.Context<any> | undefined' is not assignable to type 'import("/source/app/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").Context<any> | undefined'.

Code

import { Editor } from '@progress/kendo-react-editor';
import styled from 'styled-components';

export const EditorContainer = styled(Editor)`
  &.k-editor {
    border: none;
    background-color: inherit;
  }

  &.k-editor > .k-toolbar {
    border: none;
    padding-left: 0px;
  }
`;

In your Chapter 04 video #3

I'm trying to change this JSX from:

To its equivalent: 

As you can see, the expression to map the itemTypesProvider array is missing from the KendoReact component.

Adding a child, between the the <DropDownList></DropDownList> tags is not permitted.

(Please see attachment)

How do I get the itemTypesProvider items to populate my DropDownList?