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?

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

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

Dear  Reciever,

Just curious. Is this link(Globalization Support) up-to-date?
Because some components that are in kendo libraries are not listed in here.

Moreover, is this github repo show the available locale info?

Thanks.
Best Regards.

Hi,

If a Grid column is using number filter, its precision can only be 0.001. Is there a way to increase that?

See this Kendo React official example, the "Unit Price" filter can only take 0.001, not able to take 0.0001.

https://www.telerik.com/kendo-react-ui/components/grid/filtering/

I tried changing the column format to "{0:n6}", but it only affect the grid cell, not the filter.

Thanks,

Jie

I'm developing a system using React where users can create invoice templates using a drag-and-drop interface. I need help with the following:

1. Template Storage Format: What is the best format for storing these templates on the backend?

2. Backend Processing: Once the template is stored, the backend should be able to:

   • Receive the invoice amount and other relevant details.
   • Map these details to the selected template.
   • Generate a PDF based on the populated template.

Could you suggest an approach for handling these tasks effectively?

Hi,

I want to use multiselect filtering for grid, just like in the image. How can I do it ?

Thanks.

https://www.telerik.com/kendo-react-ui/components/grid/grouping/locked-group-headers/

Am I misreading it? "To lock the group headers of the Grid, use its lockGroups prop." => but in this demo on the Kendo site, none of the group headers are locked. Is it referring to the table header? I thought group headers were those rendered by the grouping (i.e. Beverages if Category Name is chosen). This is easiest to see on page 3 if you leave the demo as-is on page load -- I'd expect Condiments to be locked to the top of the grid as you scroll the page.

I really like this concept because it allows the user to retain context of what they're looking at --> otherwise, the group headers leave the user's view and can cause confusion/wasted time later when the user tries to regain context.

Thanks in advance for your time and help!