What is the best way to apply DateRange filtering in a Kendo Ui Grid?

Currently I am working with the Kendo Ui Grid and attempting to implement filtering by DateRange. Here is a snippet of my current code:

HTML:

<kendo-grid-column field="createdate" title="Creation Date" width="150">
 <ng-template kendoGridFilterCellTemplate let-filter>
  <app-date-range-filter-cell class="date-range-filter" [filter]="filter" field="createdate">
  </app-date-range-filter-cell> 
 </ng-template>
</kendo-grid-column>

In the response, the date is shown as 

createdate: "2019-04-19T15:47:48.000+0000"
, but displayed in the Grid as 
createdate: "19/04/2019, 18:47:48"
using the following code:

this.createdate = this.datePipe.transform(this.createdate, 'dd/MM/yyyy, HH:mm:ss');

I need help to ensure that filtering by DateRange works correctly by only considering the date portion, since Kendo DateRange requires a type of Date while mine is currently a type of string. Can anyone provide any assistance?

angulartypescriptkendo-ui

Answer №1

I have successfully resolved my issue by following these steps:

1) I converted the string dates to the type Date using the code snippet below:

this.createdate = new Date(this.createdate);

2) I updated the date format in my HTML as shown:

<kendo-grid-column field="createdate" title="Creation Date" width="150" format="{0: dd/MM/yyyy, HH:mm:ss}">
  <ng-template kendoGridFilterCellTemplate let-filter>
    <app-date-range-filter-cell class="date-range-filter" [filter]="filter" field="createdate">
    </app-date-range-filter-cell>
  </ng-template>
</kendo-grid-column>

By implementing these changes, you can now utilize the DateRange for columns with dates in Kendo Ui Grid.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Redux Toolkit slice and TypeScript were not in agreement: it was expecting 0 arguments, but received

Recently, I encountered an issue with my slice code: const investment = createSlice({ name: 'investments', initialState, reducers: { getInvestmentsRequest(state) { state.investments.status = RequestStatuses.loading; }, } }) ...

reactjstypescriptreduxredux-sagaredux-toolkit

The style fails to load correctly upon the page's initial loading

I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d26282823603e212429283f0d7b63756378">[email protected]</a> in a <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="026c677a76 ...

reactjstypescriptnext.jsnext.js13

What is the most efficient way to incorporate Google Analytics code into the header tag of index.html?

If I were to receive the complete Google Analytics code from BE, what would be the most effective method of incorporating it into the index.html file? Just looking for a simple setup of GA. ...

angulargoogle-analytics

Cease the interval once the array is devoid of elements

I'm currently working on simulating typing effects for incoming server messages by adding an interval to the output. Here's what I have so far: const stream = interval(1000) .pipe( map((): Message => { return messages.pop(); }) ); ...

angulartypescriptkendo-uirxjsconversational-ui

Encountering issues during the installation of the Angular/CLI software

Whenever I execute the command below: npm install -g @angular/cli I encounter this error message: C:\Users\AA>npm install -g @angular/cli npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80f ...

angularnpm

What is the method to incorporate a fresh generic parameter without officially announcing it?

My goal is to define a type union where one of the types extends an existing type: // The original type type Foo<V> = { value: V; onChange: (value: V) => void }; // Type union incorporating Foo type ADT = ({ kind: "foo" } & Foo<a ...

typescripttypescript-generics

Using Angular directives with Kendo UI Grid to create a foreign key column

I'm currently working on building a Kendo Grid that incorporates 2 foreign key columns using the Angular directives for Kendo. The challenge I am facing is that while one column works perfectly fine, the other does not (each works independently of the ...

angularjskendo-uiangular-kendo

Choose particular spreadsheets from the office software

My workbook contains sheets that may have the title "PL -Flat" or simply "FLAT" I currently have code specifically for the "PL -Flat" sheets, but I want to use an if statement so I can choose between either sheet since the rest of the code is identical fo ...

javascriptexceltypescriptoffice-scripts

Dealing with ObjectUnsubscribedError in RxJS subscriptions with Angular

In my application, I have a service that manages several BehaviorSubject objects which are subscribed to by the main component. These subjects receive data from the backend and are utilized by the component through subscription. To prevent memory leaks, I ...

angularrxjsbehaviorsubject

Leverage the key-value pairs in JSON to automatically suggest types within the function parameters

If we have data structured like this: { "key1": "hardcoded string", "key2": "another hardcoded string", } Imagine a function with 2 parameters where the first parameter should refer to key1 and the second to i ...

javascripttypescriptvisual-studio-code

Angular Error: "Provider's ngAfterViewInit method is not defined at callProviderLifecycles"

I encountered an error: evt = TypeError: provider.ngAfterViewInit is not a function at callProviderLifecycles while working on my Angular project. What's strange is that I do not have an ngAfterViewInit method, nor do I have the corresponding impl ...

angular

The Angular 5 lifecycle hook ngOnChanges is triggered just once in a child component

I am struggling with syncing a child component containing complex input (such as chart data) with the API response received in the parent component in Angular 5. I am using the @Input() decorator to pass the chart data from the parent to the child componen ...

angulartypescriptonchangelifecycle

Developing in TypeScript with styled-components allows for seamless integration between

New to TypeScript and seeking guidance. I currently have a component utilizing styled-components that I want to transition to TypeScript. import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-comp ...

reactjstypescriptstyled-components

Utilizing Typescript to define key-value pairs within a structured form

I've been creating a form structure that's functioning smoothly, but I've encountered an interesting issue with field validation in the validation part. While my Visual Code is pointing out that 'required2' in the phone constant n ...

typescripttyping

The React component was not able to receive any children as input

My Typescript-written React component is called GradientText.tsx: import React, { ReactNode } from "react" import { cn } from "@/lib/utils" const typeMap = { h1: "h1", h2: "h2", p: "p", } inte ...

reactjstypescript

Typescript mistakenly infers the wrong type: TS2339 error - it says that property 'selected' is not found on type 'string'

When examining the code snippet below, Typescript initially infers a type string for the inner element type of the values array. However, it subsequently raises an error indicating that string does not have the property "selected". let item = { values: [{ ...

typescript

Checking conditions sequentially in Angular

I have a unique use case that requires me to verify certain conditions. If one condition fails, I should not proceed to the next one. Instead, based on the failed condition, I need to display a dialog with a title and description explaining what went wrong ...

javascriptangulartypescriptrxjsobservable

Transferring data from two child components back to the parent component

Within my web application, I have a parent component (A) and two children components (B, C). The parent component is responsible for maintaining the basic layout of the page, which remains consistent across all layouts. However, I need to dynamically swap ...

angulartypescriptviewchild

Pause before sending each request

How can we optimize the Async Validator so that it only sends a request to JSON once, instead of every time a letter is typed in the Email form? isEmailExist(): AsyncValidatorFn { return (control: AbstractControl): Observable<any> => { ...

javascriptangulartypescriptrxjsdebouncing

What is the best method to calculate the total of multiple input values from various cells and display it in the final cell of an Angular table?

Hey there! I have a challenge where I need to calculate the sum of input values for each cell and display it dynamically in the last cell of the row. Take a look at the image below: https://i.stack.imgur.com/0iKEE.png In the image, you can see that the nu ...

javascriptnode.jsangular