Kendo Grid Date

Data is coming from rest api

Hello, Lori,

Could you please share the following details with us to get a better understanding of the case.

1) The Grid configuration.
2) How the request is made.
3) The onDataStateChange event implementation.

I will be expecting these details and gladly continue with the investigation.

Regards,
Stefan
Progress Telerik

Hi Stefan 

I am using graphclient for getting the information from Microsoft graph as per the following tutorial from Microsoft.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial

 

export interface IUserItem {
   displayName: string;
   mail: string;
   userPrincipalName: string

RecievedDate: date

 }

 

I then use the cell function to format the date to day month year.

I then enabled filtering as per

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

 

 

 

Hello, Lori,

If the data is rendered as expected initially I can assume that there are no issues with the custom cell and formatting of the dates.

The issue should occur on the onFilterChange change event or when the request is received.

Please observe in the network tab if a request for the filter is made before the error. If not then the issue is in the onFilterChange event.

Please share the code executed on that event.

Regards,
Stefan
Progress Telerik

Hey Stefan

No error on load.

But I made some changes now getting the following

 

ItemState get the filter as follows

filter: {
logic: "and",
filters: [
{ field: "title", operator: "contains", value: "c" }
]
}

 

 

Argument of type '{ filter: CompositeFilterDescriptor; }' is not assignable to parameter of type 'IGridGetItemsState | ((prevState: Readonly<IGridGetItemsState>, props: IGridProps) => IGridGetItemsState | Pick<IGridGetItemsState, "filter">) | Pick<...>'.
  Type '{ filter: CompositeFilterDescriptor; }' is not assignable to type 'Pick<IGridGetItemsState, "filter">'.
    Types of property 'filter' are incompatible.
      Type 'CompositeFilterDescriptor' is not assignable to type '{ logic: "and"; filters: [{ field: "title"; operator: "contains"; value: "c"; }]; }'.
        Types of property 'logic' are incompatible.
          Type '"or" | "and"' is not assignable to type '"and"'.
            Type '"or"' is not assignable to type '"and"'.

 

Ive gone back to my original code that was working bar for dates.

In popup.js the error occurs here

 

 var root = document.createElement('div');
        appendTo.appendChild(root);
        var style = Object.assign({}, props.style || {}, __assign({ visibility: 'hidden' }, DEFAULT_OFFSET));
        var innerClasses = { className: classNames(props.popupClass, K_POPUP, 'k-child-animation-container') };
        var popup = (React.createElement("div", { className: classNames(ANIMATION_CONTAINER, ANIMATION_CONTAINER_SHOWN, props.className), style: style }, React.Children.map(props.children, function (child, index) {
            return React.createElement("div", __assign({ key: index }, innerClasses), child);
        })));
        root.innerHTML = ReactDOMServer.renderToStaticMarkup(popup);
        var newPosition = this.position(props, root.firstChild, props.anchor);
        root.parentNode.removeChild(root);
        return newPosition;
    };

hmm I think the issue is something similar to this

https://github.com/facebook/react/issues/13276

as this is where the actual error occurs on debugging further

setCurrentDebugStack = function (stack) {
    var frame = stack[stack.length - 1];
    currentDebugElementStack = frame.debugElementStack;
    // We are about to enter a new composite stack, reset the array.
    currentDebugElementStack.length = 0;
    currentDebugStack = stack;
    ReactDebugCurrentFrame.getCurrentStack = getStackAddendum;
  };

"@types/react": "16.4.2",
"@types/react-dom": "^16.0.5",
"@types/webpack-env": "1.13.1",
"jquery": "^3.3.1",
"markdown-loader": "^5.0.0",
"react": "16.3.2",
"react-dom": "16.3.2"

Stefan

Is there a way to set the format on the filter box?

 

Hello, Lori,

In order to change the format or any other property of the filter, a custom one has to be used which is configured as desired:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cell

As for the main issue, is the information listed in the GitHub issue helped to resolve or not?

Regards,
Stefan
Progress Telerik

Hi Stefan

    Not resolved unfortunately, however I did simplify and decided just to do a dropdownlist example and I get the error.

Ive opened up a thread on the dropdownlist - any pointers you can suggest would be welcome.

Lori

Hi Lori,

Lets continue the discussion in the dropdownlist thread. If we can help further here, please let us know.

Regards,
Nikolay
Progress Telerik