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!

Hello,

We are using kendo-react-form 8.1.1.  We have implemented a number of custom validation functions which all seem to be working appropriately.  However, if we set the required property of a Field as such, 

<Field
  {...fieldProps}
  required={true}
/>

and attempt to submit the form without populating this field, we receive the following "bubble tooltip":

After searching, I discovered that this "tooltip" message is not controlled by KendoReact, but comes from HTML5.  This can be disabled by adding the "novalidate" attribute to the rendered <form> element, however, I cannot find a way to do this using KendoReact's Form API, after looking through FormProps, FormElementProps, and FormRenderProps.

Is there a way to set the novalidate attribute on the rendered <form> element that I have missed?  If not, is this something that is planned for (or could be implemented) in a future release?