Date format and action buttons on grid component columns

[Dimitris]

Hi,

I am following the example here: https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/
First of all the hidden is missing from column-settings.interface.ts.

Since I wanted to use more attributes like we can do when using  kendo-grid-column I changed the columnsConfig: ColumnSettings[]; to columnsConfig: any[]; into grid-settings.interface.ts 

 

I have severl date fields coming from my response in the following format: 2020-06-22T00:00:00
When I was using the HTML and kendo-grid-column with the following example I could get them formatted as I wanted:

<kendo-grid-column
          field="startDate"
          title="Start Date"
          [width]="120"
          filter="date"
          [hidden] = "true">

          <ng-template kendoGridCellTemplate let-dataItem>
            {{dataItem.startDate | date: 'dd/MM/yyyy'}}
          </ng-template>
        </kendo-grid-column>

Now that I had to move the logic into the component to be able to have persistent grids I am trying several format, but none seems to work:

columnsConfig: [{
            field: 'startDate',
            title: 'Start Date',
            filterable: true,
            filter: 'date',
            format: '{0:d}',
            hidden: true,
            width: 120
        } ]

And secondary how can I also add an action column in the begining of my grid with view, edit, delete icons as I did before in the html with the following code:

 <kendo-grid-column field="{{'common.actions' | translate}}" width="120">
          <ng-template kendoGridCellTemplate let-project let-isNew="isNew">
            <div class="action-buttons">
              <button title="{{'common.displayInfo' | translate}}"><i class="fa fa-info"></i></button>
              <button routerLink="/project/{{project.id}}/view"><i class="fa fa-search"></i></button>
              <button kendoGridEditCommand><i class="fa fa-pencil"></i></button>
              <button kendoGridRemoveCommand><i class="fa fa-trash"></i></button>
            </div>
          </ng-template>
</kendo-grid-column>
How can I write the same in my component!?!? I tried using template there without any luck.

Thank you.

[Dimitris]

And also how to display for example Yes and No instead of True and False in a column

[Martin Bechev]

Hi Dimitris,

By default, all date-related components accept dates that are valid JavaScript dates objects. They don't work with their serialized string representation.

https://www.telerik.com/kendo-angular-ui/components/grid/troubleshooting/

Check First Ordered On column in the following example and the built-in format option:

https://stackblitz.com/edit/angular-fppx3g?file=app%2Fapp.component.ts

As for the custom action buttons at the beginning, add an empty column and customize its cells using kendoGridCellTemplate:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#cell-template

About Yes and No filters check this forum thread.

https://www.telerik.com/forums/how-to-display-yes-no-instead-of-true-false-for-boolean-values-on-a-column-of-kendogrid

I hope this sheds some light on this case. 

Regards,
Martin
Progress Telerik

[Dimitris]

Thanks,

 

I forked your example for persistent grid here: https://stackblitz.com/edit/angular-e4carl?file=app/products.ts

and changes the products.ts dates from New Date to a string format like this: FirstOrderedOn: "2020-11-08T00:00:00"

Can you please give an example of how to convert in the directive and display on the grid the column FirstOrderedOn with thoses values from the JSON converted to dates?

[Martin Bechev]

Hi Dimitris,

To convert a string date to a valid JavasScript Date, map the data and pass the string as an argument to the new Date() object:

https://stackblitz.com/edit/angular-e4carl-dqttdv

Keep in mind that this will be an invalid date - FirstOrderedOn: "2014-16-01T00:00:00" as the second position (where 16 is defined) is assigned for the months.

Regards,
Martin
Progress Telerik