Telerik Forums
KendoReact Forum
1 answer
39 views
Keyboard Navigation in Kendo React showing 404 page. 
Vessy
Telerik team
 answered on 19 Sep 2024
1 answer
67 views

I threw together the easy "patch-package" on latest v8.2.0 below and it worked.

But it seems like the developers must have excluded this value for a reason that i should watch out for?

Or if not, any chance we can get it added officially?

my underlying motivation: I see in all the onItemChange demos the suggested "change item" approach is to iterate the data array via .map() and change the corresponding object item based on matching a unique id property... of course this is a longstanding pattern that honors React's need for immutability, but once lists get large, there's a performance hit that could be avoided by directly targeting the item by index along with other immutability/copying approaches, e.g. toSpliced() is now available in modern browsers.

I have an active license and I could submit bug/feature if this is better requested thru that channel.

diff --git a/node_modules/@progress/kendo-react-grid/Grid.mjs b/node_modules/@progress/kendo-react-grid/Grid.mjs
index ff03785..3f6cb09 100644
--- a/node_modules/@progress/kendo-react-grid/Grid.mjs
+++ b/node_modules/@progress/kendo-react-grid/Grid.mjs
@@ -191,7 +191,8 @@ const z = class z extends r.Component {
           ...this.getArguments(e.syntheticEvent),
           dataItem: e.dataItem,
           field: e.field,
-          value: e.value
+          value: e.value,
+          dataIndex: e.dataIndex
         }
       );
     }, this.onHeaderSelectionChange = (e) => {


Yanko
Telerik team
 answered on 17 Sep 2024
1 answer
83 views

I found an example in KendoUI for jQuery here:

 

https://docs.telerik.com/kendo-ui/knowledge-base/scroll-to-selected-item

How to do it in React TreeView?

Vessy
Telerik team
 answered on 16 Sep 2024
1 answer
66 views

Hello.

I have a question. I know, Kendo does not officially support shadow DOM. After all. We were forced to use react grid in the shadow DOM. We have a problem that all pop up windows (paging settings, filter opening) are displayed incorrectly. Without styles and without the possibility to serve the event. Do you have a tip on how to treat it?


Thank you.

Vlado
Yanko
Telerik team
 answered on 16 Sep 2024
1 answer
113 views

Hi everyone,

Rendering columns within the `Grid` component using the `map` function is not working as expected. For example:
  • When defining the `GridColumn` properties, such as `cell`, the `className` property doesn't apply as expected. If I remove the cell property from the GridColumn component it works as expected.
  • If I don't explicitly define the `headerCell` property, the filter icon (three dots) isn't visible. Hence, I need to manually add the filter options in the header cell.

Note: Everything works as expected when I define each column component individually, without using the `map` function approach.

Objective: I need to display 20+ columns in the grid, and I want to avoid manually defining each `GridColumn` component. Instead, I would like to dynamically render the columns using the `map` function. In my case, the column headers are custom components, and the column filter functionality should be displayed conditionally.

Please find the attached file with implementation.

I kindly request your help. Thank you.

 

Yanko
Telerik team
 answered on 16 Sep 2024
1 answer
168 views
When start project after install deps I receive this error:
X [ERROR] Could not resolve "pdfjs-dist/build/pdf.worker.entry.js"

    node_modules/@progress/kendo-react-pdf-viewer/PDFViewer.mjs:20:7:
      20 │ import "pdfjs-dist/build/pdf.work...
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path
  "pdfjs-dist/build/pdf.worker.entry.js" as 
  external to exclude it from the bundle, which
  will remove this error.


Someone knows about that?


Svetoslav Dimitrov
Telerik team
 answered on 12 Sep 2024
0 answers
39 views

Im using the Gantt Chart libary for React

so what im trying to do is passing a custom date range props in the GanttWeekView

<GanttWeekView dateRange={calculateWeekDateRange}/>

the problem is whenever you pass custom dateRange props to the view, it will cause the date cell on the right not rerender correctly, for example the initial date is 12th September as shown in the pics below


and i change it to 5th, the date doesnt change as shown below,

for some reason i think whenever the custom dateRange passed, it wont rerender the whole Ganttview component if the date changed, any idea how i can fix this?

Nico
Top achievements
Rank 1
 asked on 12 Sep 2024
1 answer
36 views
Currently, I am using a KeyboardEvent to programmatically press the right arrow inside of a DatePicker component.

This example works as expected:


I don't seem to be able to use KeyboardEvents to input numbers into the DatePicker. This example fails:


What is the correct way to programmatically type digits into a DatePicker?
Stoyan
Telerik team
 answered on 06 Sep 2024
1 answer
47 views

Hi,

I'm struggling with one issue, when both options filtering and suggestion are enabled, 'onFilterChange' is not triggering when the last character is filled in.

Code example: https://stackblitz.com/edit/react-tahdg9?file=app%2Fapp.tsx

Steps:

Enter: "1" -> event has been triggered

Enter: "11" -> event has been triggered

Enter: "111" -> event has been triggered

Enter: "1111" -> event has not been triggered

Hit backspace -> event has been triggered

Enter again: "1111" -> event has been triggered

Is it a bug or I'm doing something wrong? ;)

Yanko
Telerik team
 answered on 04 Sep 2024
1 answer
41 views

Hello,

 

I recently inherited an old project which was using v5 Kendo libraries. I have upgraded all of these to the latest as of today but in doing so I now am noticing a 'flash' of data before the correct data is rendered. I'm unable to produce a isolated demo but I will try my best to outline the components as minimally as possible.

 

Before I dive into the code what I have found is that a tableAction of 'getInnerTable' is being called to create and populate the "correct" data and the flash of incorrect data is actually the data supplied to the rowData prop on the Grid component.

 

Here's the code:

interfaceTableProps<T> { title?: string; tableModal?: { onClick: () =>void; text: string }; rowData: T[] | null; gridDefaultState: State; isLoading: boolean; tableActions: { removeItem?: (data: any) =>void; updateItem?: (data: any) =>void; getInnerTable: ( columnField: string, rowData: T[], isLastColumn: boolean, tableActions: { removeItem?: (data: T) => void; updateItem?: (data: T) => void; } ) =>ReactNode; }; children?: ReactNode; hasBorder?: boolean; } constTable = <T extends {}>({ isLoading, title, tableModal, rowData, gridDefaultState, tableActions, children, hasBorder = true, }: TableProps<T>) => { const [columnFields, setColumnFields] = useState<string[] | null>(null); const [gridDataState, setGridDataState] = useState<State>(gridDefaultState); console.log('rowData', rowData); useEffect(() => { if (rowData && rowData.length > 0) { setColumnFields([...Object.keys(rowData[0]), 'Icons']); } }, [rowData]); consthandleGridDataStateChange = (e: GridDataStateChangeEvent) => { setGridDataState({ ...e.dataState }); }; console.log('columnFields:', columnFields); constGridTable = () => { return ( <Grid data={rowData && process(rowData, gridDataState)} sortable={true} {...gridDataState} onDataStateChange={handleGridDataStateChange} selectable={{ enabled: true, mode: 'single', }} > {children} {rowData && columnFields?.map((columnField: string, index) => { console.log('columnField:', columnField); const isLastColumn: boolean = columnFields.length - 1 === index; return tableActions.getInnerTable(columnField, rowData, isLastColumn, tableActions); })} </Grid> ); }; return ( <StyledWrapper noData={!isLoading && !rowData?.length} hasBorder={hasBorder}> {title && <TitleWithButton title={title} buttonData={tableModal} hasBottomPadding />} {isLoading ? ( <SpinnerWrapper> <Spinner /> </SpinnerWrapper> ) : ( <GridTable /> )} </StyledWrapper> ); }; exportdefaultTable;

 

The getInnerTable function:

 


export const getOrganisationInnerTable = <T,>(
  columnField: string,
  rowData: Array<T & OrganisationColumn>,
  isLastColumn: boolean,
  tableActions: {
    removeItem?: (data: T) => void;
    updateItem?: (data: T) => void;
  }
) => {
  if (columnField === OrganisationStyledColumns.organisationName) {
    return (
      <GridColumn
        key={columnField}
        field="title.name"
        title={'Organisation name'}
        cell={(props: GridCellProps) => <OrganisationNameColumn {...props} />}
        columnMenu={(props) => ColumnFilterSearchMenu(rowData, props)}
      />
    );
  }

  if (columnField === OrganisationStyledColumns.createdDate) {
    return (
      <GridColumn
        key={columnField}
        field={columnField}
        title={'Added'}
        filter="date"
        format="{0:dd-MM-yyyy}"
        columnMenu={(props) => {
          return DateColumnFilter(rowData, props);
        }}
      />
    );
  }

  return getInnerTableColumn(columnField, rowData, isLastColumn, tableActions);
};

 

 


Konstantin Dikov
Telerik team
 answered on 04 Sep 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?