Kendo UI grid datetime column

1
votes

I would like to have a DateTime column in my Kendo UI grid. I've searched on forums, but I didn't find a solution for this problem.

My field for the TimeStamp column is defined such as:

TimeStamp: { type: "date" },

The records are showing data according to the format specified in the template. But I would like to be able to filter my data source with greater precision. However, currently my filter is only able to filter by date. Is there a way to filter by DateTime instead of filtering only by date?

4
gridfilteringkendo-ui
You currently can't use date and time - only date. The format of the column does not propagate to the date picker in the filter menu. - Atanas Korchev
I was absolutely sure that this is the case, but thank you for the confirmation. Can you tell me whether the implementation of this feature is planned into a future version? I understand that this is not supported currently, but will Kendo UI support more precize datetime filters? Should I put this idea into the forum? Also, if you edit your answer to contain the information that DateTime filters are currently not supported in Kendo UI, I will upvote and accept your answer. - Lajos Arpad

4 Answers

4
votes

I was informed that this is not possible currently with Kendo UI. I know this is bad news, but this is the answer to my question.

0
votes

you can achieve it to use template on kendo grid column, create one more property and pass that property in template in kendo grid column.

like 

timeStamp: { type: "date" },
timeStamp1: { type: "String" },

pass timestamp1 in template like 

  {
    title: "Last Login",
    width: 80,
    template: '<span>#= timeStamp1#</span>',
    field: "timeStamp",
    type: "date"                               
  },

its work fine according your requirement and sorting will work fine like database sorting.

0
votes

Its Posible:

DeliveredDate: {
                type: "datetime",
                editable: false,
                nullable: false
            }

And the template is:

            {
                field: "DeliveredDate",
                title: "Delivered Date",
                template: '#= kendo.toString(data.DeliveredDate,"dd/MM/yyyy") === null ? "--/--/----" : kendo.toString(data.DeliveredDate,"dd/MM/yyyy HH:mm") + " Hrs" #',
                width: 60,
                groupable: false,
                sortable: true,
                filterable: true
            }
0
votes

The easiest Way to us the TimeStamp format data from your Database for KendoGrid.

In your HTML file, use the data from DB as shown.

<kendo-grid [data]="gridData"> 
    <kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
     [width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
     [style]="{'background-color': '#36455a','color': '#fff'}">
          <ng-template kendoGridCellTemplate let-dataItem>
             {{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
          </ng-template>
    </kendo-grid-column>
</kendo-grid>

PS: gridData is my var that stores Data from DB. and CreatedAt is one of the fields.