Questions on KendoReact Forum

1 answer

167 views

React Grid within Modal, select multiple rows and save

I am trying to implement the following and wondered if there is any documentation / examples for this:

On a page display a grid for "selected products".
When you click "add" you are shown a modal with another grid (data is products).
This grid has a checkbox column (https://www.telerik.com/kendo-react-ui/components/grid/selection/)
You can select one or more products and click save
The "selected products" grid within the page updates to show the additional selected products.

I'm wondering if there are examples of a grid integrated within a form modal. i.e. the form isn't editing the original data that is shown on the page, instead it is loading available products but I need to know what is selected to show this within the page. There are 2 data sources - the products that have been selected and the available products.

Form

Grid

Popup

answered on 18 Sep 2023

5 answers

572 views

Next.js Error Message

I've used your basic instructions to set up a Data Grid. However, I get an error when I add KendoReact's <Grid> component.

How do I get rid of this error?

Warning: Prop `style` did not match. Server: "border-width:0" Client: "null"
    at div
    at div
    at Header (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/header/Header.js:47:47)
    at div
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/Grid.js:154:28)
    at Home (webpack-internal:///(app-pages-browser)/./app/page.tsx:19:72)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:337:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:347:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)

Grid

answered on 18 Sep 2023

1 answer

183 views

Does Master-Detail Grids support exporting Excel containing subtables?

Hi,
I am using kendo React-Master-Detail Grids in my project. However, when using the export Excel function, only the main table is exported, and there are no subtables. Do we support exporting Excel containing subtables, and have the same hierarchical relationship as the table when previewing Excel?

Looking forward to your reply, thanks in advance！

R22hph (forked) - StackBlitz

Regards,
Sunny Hu

Excel Export

General Discussions

Grid

answered on 18 Sep 2023

2 answers

101 views

Editor - allow user to view an image in a lightbox or similar

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.

Editor

answered on 15 Sep 2023

1 answer

310 views

Fill grid using flexbox with the rest of the space

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?

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn, GridDataStateChangeEvent} from '@progress/kendo-react-grid';
import { DataResult, process, State } from '@progress/kendo-data-query';
import orders from './orders.json';
import { Order } from './interfaces';
const App = () => {
const [dataState, setDataState] = React.useState<State>({
skip: 0,
take: 20,
sort: [
{ field: 'orderDate', dir: 'desc' }
],
group: [
{ field: 'customerID' }
]
})
const [dataResult, setDataResult] = React.useState<DataResult>(process(orders, dataState))
const dataStateChange = (event: GridDataStateChangeEvent) => {
setDataResult(process(orders, event.dataState));
setDataState(event.dataState);
}
return (
<div style={{display: 'flex', flexDirection: 'column', height: '100%'}} >
<div style={{height: '60px', backgroundColor: 'blue'}}></div>
<div style={{flex: '1', height: '100%'}}>
<Grid
style={{ height: '100%' }}
sortable={true}
filterable={true}
groupable={true}
reorderable={true}
pageable={{ buttonCount: 4, pageSizes: true }}
data={dataResult}
{...dataState}
onDataStateChange={dataStateChange}
>
<GridColumn field="customerID" width="200px" />
<GridColumn field="orderDate" filter="date" format="{0:D}" width="300px" />
<GridColumn field="shipName" width="280px" />
<GridColumn field="freight" filter="numeric" width="200px" />
<GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
<GridColumn field="employeeID" filter="numeric" width="200px" />
<GridColumn locked={true} field="orderID" filterable={false} title="ID" width="90px" />
</Grid>
</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector('my-app'));

Grid

answered on 15 Sep 2023

1 answer

75 views

Grid: Horizontal moving of the table, filter modal remains on the spot

Hi KendoReact team.

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

Filter

Grid

answered on 15 Sep 2023

1 answer

93 views

Fluent Panel alternative

We're building a new app using Fluent design principles. We're looking for the best way to implement a panel (https://developer.microsoft.com/en-us/fluentui#/controls/web/panel) in KendoReact. Is there anything in KendoReact that can do something similar? At the moment we're looking at customizing the telerik Window control.

Styling / Themes

Window

answered on 14 Sep 2023

0 answers

472 views

How to resolve import for "@progress/kendo-theme-default/dist/all.css" in my React Project using Vite?

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.

Styling / Themes

asked on 13 Sep 2023

1 answer

310 views

Tooltips and Data Grid - title prop in GridColumnProps

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

Our columns look like this - I believe the `title` prop is causing the tooltip to render

              <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' : ''
                }
              />

Is there a way to hide this attribute from the tooltip context, since it's needed for the GridColumn, but is causing an issue with the tooltip?

Grid

Tooltip

answered on 12 Sep 2023

2 answers

138 views

Can the GridColumnMenuCheckboxFilter component be used alone without Grid?

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

General Discussions

Grid

answered on 11 Sep 2023