Looking forward to your reply, thanks in advance！

R22hph (forked) - StackBlitz

Hi, I'm currently struggling with a feature request and wondering whether anyone has any suggestions for a good way to implement it.

We make use of the Editor control and allow users to insert images. Images appear as a thumbnail by setting the width on their inline style attribute.

Users would like some way of temporarily viewing the image, my thoughts are to perhaps have a CSS hover state that shows a small button which would display the full size image in a lightbox. (Might have to configure the Editor to not make use of iframe?)

Any suggestions would be greatly appreciated! Thanks.

In the following code, there is a div that contains two child divs. The first child div has a fixed height, and the bottom div contains the grid, and should fill the remaining space. With other components this approach works by using flexbox and the flex property, but the grid will ignore the flex: 1 and just overlays on the first child div. 

What am I doing wrong?

I have a problem with a filter cell. As soon as I move the table, the filter modal remains in its place and loses the reference to its column.

We use the KendoGrid in the version "@progress/kendo-react-grid": "5.0.1"

Is there an approach to prevent this behavior? Thank you for the effort and the possible approach.

Screen Capture of issue

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.