Our blazing fast Grid component built with pure JavaScript


Post by mahesh@mogolabs.com »

Hi,

I am using the scheduler with drag drop on task, I have date field in my API but the filter not working not working on rendered data.

I am not sure what date format Grid accepts, Please help me with it.

Please see the attachments.

Thanks.


Ragards,
Mahesh
Attachments
Json date format
Json date format
Capture3.PNG (2.52 KiB) Viewed 2832 times
API configuration
API configuration
Capture2.PNG (10.59 KiB) Viewed 2832 times
Configure the column 'deliveryDate' but filterbar not filtering data on this field
Configure the column 'deliveryDate' but filterbar not filtering data on this field
Capture.PNG (18.45 KiB) Viewed 2832 times

Post by sergey.maltsev »

Hi!

Field's date format can be set in model https://www.bryntum.com/docs/scheduler/#Core/data/Model via field's config
class Person extends Model {
    static get fields() {
        return [
            { name : 'birthday', type : 'date', dateFormat : 'YYYY-MM-DD' }
        ];
    }
}
Column's date format can be set as following
https://www.bryntum.com/docs/scheduler/#Grid/column/DateColumn#config-format
    columns : [
         { type: 'date', text: 'Start date', format: 'YYYY-MM-DD', data: 'start' }
    ]
Please check this docs for using Store filtering.
https://www.bryntum.com/docs/scheduler/#Core/data/mixin/StoreFilter
https://www.bryntum.com/docs/scheduler/#Core/data/mixin/StoreFilter#function-filter

Also we have Angular filtering demo in distribution zip angular/filtering

Online Angular demo available here
https://www.bryntum.com/examples/scheduler/angular/filtering/dist/index.html

Post by mahesh@mogolabs.com »

I need the solution for Grid date filter, what it the format of 'start' field?

Post by sergey.maltsev »

Hi!

Please check date formats here
https://www.bryntum.com/docs/grid/#Core/helper/DateHelper

By default YYYY-MM-DDTHH:mm:ssZ.

If it is not the question you meant please provide some code we could check.

Post by mahesh@mogolabs.com »

Hi,

I am using the same date format, but still the date picker is not working.

Below is my code,
let unplannedGrid = new UnplannedGrid({
            ref: 'unplanned',
            appendTo: 'orderTable',
            eventStore: scheduler.eventStore,
            rowHeight: 35,
            height: 500,
            readOnly: true,
            store: {
                modelClass: Task,
                readUrl: 'api/order/management',
                autoLoad: true,
                sorters: [
                    { ascending: true }
                ]
            },
            features: {
                filterBar: true,
                stripe: false,
                quickFind: true,
                search: true,
                sort: new Date()
            },
            columns: {
                data: [{
                    text: 'Delivery Date',
                    flex: 1,
                    type: 'date',
                    htmlEncode: true,
                    field: 'deliveryDate',
                    format: 'YYYY-MM-DD',
                    renderer: (data) => bryntum.scheduler.DateHelper.format(new Date(`${data.record.deliveryDate}`), 'DD/MM/YYYY')
                }, {
                    text: 'DSP',
                    flex: 1,
                    field: 'dspName',
                    htmlEncode: false,
                    editor: false,
                    renderer: (data) => `${data.record.dspName}`,
                },
                {
                    text: 'Client',
                    flex: 1,
                    field: 'clientName',
                    htmlEncode: false,
                    editor: false,
                    renderer: (data) => `${data.record.clientName}`,
                }, {
                    text: 'Pickup Address',
                    flex: 1,
                    field: 'pickupAddress',
                    htmlEncode: false,
                    editor: false,
                    renderer: (data) => `${data.record.pickupAddress}`,
                }, {
                    text: 'Order Number',
                    flex: 1,
                    field: 'orderNumber',
                    htmlEncode: false,
                    editor: false,
                    renderer: (data) => `${data.record.orderNumber}`,
                }, {
                    text: 'Customer Name',
                    flex: 1,
                    field: 'customerName',
                    htmlEncode: false,
                    editor: false,
                    renderer: (data) => `${data.record.customerName}`,
                }, {
                    text: 'Address',
                    flex: 1,
                    htmlEncode: false,
                    editor: false,
                    field: 'deliveryAddress',
                    renderer: (data) => `${data.record.deliveryAddress}`,
                }, {
                    text: 'Weight',
                    flex: 1,
                    htmlEncode: false,
                    editor: false,
                    field: 'weight',
                    renderer: (data) => `${data.record.weight}`,
                }, {
                    text: 'Volume',
                    flex: 1,
                    htmlEncode: false,
                    editor: false,
                    field: 'volume',
                    renderer: (data) => `${data.record.volume}`,
                }, {
                    text: 'Quantity',
                    flex: 1,
                    htmlEncode: false,
                    editor: false,
                    field: 'units',
                    renderer: (data) => `${data.record.units}`,
                }],
            }
        });


Sample API data:


[
  {
    "orderId": 9631567,
    "deliveryDate": "2020-02-25T08:00:00+13:00",
    "reqTruckType": "",
    "clientName": "Mars Inc",
    "clientCode": "MARS",
    "run": null,
    "runCode": null,
    "description": "",
    "productName": "Ambient Product",
    "load": 1,
    "loadDeliveryNumber": 0,
    "customerName": "Christchurch DEPOT",
    "customerBookingNo": null,
    "carrierId": null,
    "carrierName": null,
    "truckId": null,
    "truckCode": null,
    "orderNumber": "Intra Island 0001 - Cubic",
    "units": 1,
    "eqp": 0.000000000,
    "pallets": 0,
    "weight": 15.000000000,
    "volume": 0.050000000,
    "siteName": "Cardinal Logistics - Nesdale",
    "deliveryZone": null,
    "palladiumVersion": 3,
    "orderDetailAvailable": false,
    "orderDetailTemplate": "",
    "pickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand",
    "pickupAddressLocality": "AUCKLAND",
    "deliveryAddress": "40 Braeburn Drive, Hornby, Christchurch 8042, New Zealand",
    "manufactureDate": "2020-02-21T00:00:00+13:00",
    "parentManifestId": 0,
    "deliveryAddressName": "Christchurch DEPOT",
    "deliveryAddressLocality": "AUCKLAND",
    "packageType": "",
    "colourIdentifier": "ffbb00",
    "pickupAddressCoords": {
      "longitude": 0.0,
      "latitude": 0.0,
      "formattedAddress": null,
      "resultType": 0,
      "isValid": false
    },
    "deliveryAddressCoords": {
      "longitude": 172.538538,
      "latitude": -43.539813,
      "formattedAddress": "40 Braeburn Drive, Hornby, Christchurch 8042, New Zealand",
      "resultType": 2,
      "isValid": true
    },
    "deliveryDateFormatted": "25.02.2020",
    "deliveryDateTimeFormatted": "25.02.2020 08:00",
    "fullPickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand, AUCKLAND",
    "fullDeliveryAddress": "40 Braeburn Drive, Hornby, Christchurch 8042, New Zealand, AUCKLAND",
    "pickupWindowOpen": null,
    "pickupWindowClose": null,
    "deliveryWindowOpen": null,
    "deliveryWindowClose": null,
    "vehicleClassName": "",
    "vesselName": null,
    "vesselETA": null,
    "cdoRetrievalDate": null,
    "gridStartTime": null,
    "gridEndTime": null,
    "gridDuration": null
  },
  {
    "orderId": 9742271,
    "deliveryDate": "2020-03-24T17:00:00+13:00",
    "reqTruckType": "",
    "clientName": "Mars Inc",
    "clientCode": "MARS",
    "run": null,
    "runCode": null,
    "description": "",
    "productName": "Ambient Product",
    "load": 1,
    "loadDeliveryNumber": 0,
    "customerName": "Foodstuffs Own Brands Ltd",
    "customerBookingNo": null,
    "carrierId": null,
    "carrierName": null,
    "truckId": null,
    "truckCode": null,
    "orderNumber": "Intra Island 0001 - Cubic",
    "units": 1,
    "eqp": 0.000000000,
    "pallets": 0,
    "weight": 15.000000000,
    "volume": 0.050000000,
    "siteName": "Cardinal Logistics Ltd - Wiri",
    "deliveryZone": null,
    "palladiumVersion": 3,
    "orderDetailAvailable": false,
    "orderDetailTemplate": "",
    "pickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand",
    "pickupAddressLocality": "AUCKLAND",
    "deliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
    "manufactureDate": null,
    "parentManifestId": 0,
    "deliveryAddressName": "Foodstuffs Own Brands Ltd",
    "deliveryAddressLocality": "MOUNT ROSKILL",
    "packageType": "",
    "colourIdentifier": "ffbb00",
    "pickupAddressCoords": {
      "longitude": 0.0,
      "latitude": 0.0,
      "formattedAddress": null,
      "resultType": 0,
      "isValid": false
    },
    "deliveryAddressCoords": {
      "longitude": 174.733828,
      "latitude": -36.910142,
      "formattedAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
      "resultType": 2,
      "isValid": true
    },
    "deliveryDateFormatted": "24.03.2020",
    "deliveryDateTimeFormatted": "24.03.2020 17:00",
    "fullPickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand, AUCKLAND",
    "fullDeliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand, MOUNT ROSKILL",
    "pickupWindowOpen": null,
    "pickupWindowClose": null,
    "deliveryWindowOpen": null,
    "deliveryWindowClose": null,
    "vehicleClassName": "",
    "vesselName": null,
    "vesselETA": null,
    "cdoRetrievalDate": null,
    "gridStartTime": null,
    "gridEndTime": null,
    "gridDuration": null
  },
  {
    "orderId": 9742270,
    "deliveryDate": "2020-03-24T17:00:00+13:00",
    "reqTruckType": "",
    "clientName": "Mars Inc",
    "clientCode": "MARS",
    "run": null,
    "runCode": null,
    "description": "",
    "productName": "Ambient Product",
    "load": 1,
    "loadDeliveryNumber": 0,
    "customerName": "Foodstuffs Own Brands Ltd",
    "customerBookingNo": null,
    "carrierId": null,
    "carrierName": null,
    "truckId": null,
    "truckCode": null,
    "orderNumber": "Intra Island 0001 - Cubic",
    "units": 1,
    "eqp": 0.000000000,
    "pallets": 0,
    "weight": 15.000000000,
    "volume": 0.050000000,
    "siteName": "Cardinal Logistics Ltd - Wiri",
    "deliveryZone": null,
    "palladiumVersion": 3,
    "orderDetailAvailable": false,
    "orderDetailTemplate": "",
    "pickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand",
    "pickupAddressLocality": "AUCKLAND",
    "deliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
    "manufactureDate": null,
    "parentManifestId": 0,
    "deliveryAddressName": "Foodstuffs Own Brands Ltd",
    "deliveryAddressLocality": "MOUNT ROSKILL",
    "packageType": "",
    "colourIdentifier": "ffbb00",
    "pickupAddressCoords": {
      "longitude": 0.0,
      "latitude": 0.0,
      "formattedAddress": null,
      "resultType": 0,
      "isValid": false
    },
    "deliveryAddressCoords": {
      "longitude": 174.733828,
      "latitude": -36.910142,
      "formattedAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
      "resultType": 2,
      "isValid": true
    },
    "deliveryDateFormatted": "24.03.2020",
    "deliveryDateTimeFormatted": "24.03.2020 17:00",
    "fullPickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand, AUCKLAND",
    "fullDeliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand, MOUNT ROSKILL",
    "pickupWindowOpen": null,
    "pickupWindowClose": null,
    "deliveryWindowOpen": null,
    "deliveryWindowClose": null,
    "vehicleClassName": "",
    "vesselName": null,
    "vesselETA": null,
    "cdoRetrievalDate": null,
    "gridStartTime": null,
    "gridEndTime": null,
    "gridDuration": null
  },
  {
    "orderId": 9742269,
    "deliveryDate": "2020-03-24T17:00:00+13:00",
    "reqTruckType": "",
    "clientName": "Mars Inc",
    "clientCode": "MARS",
    "run": null,
    "runCode": null,
    "description": "",
    "productName": "Ambient Product",
    "load": 1,
    "loadDeliveryNumber": 0,
    "customerName": "Foodstuffs Own Brands Ltd",
    "customerBookingNo": null,
    "carrierId": null,
    "carrierName": null,
    "truckId": null,
    "truckCode": null,
    "orderNumber": "Intra Island 0001 - Cubic",
    "units": 1,
    "eqp": 0.000000000,
    "pallets": 0,
    "weight": 15.000000000,
    "volume": 0.050000000,
    "siteName": "Cardinal Logistics Ltd - Wiri",
    "deliveryZone": null,
    "palladiumVersion": 3,
    "orderDetailAvailable": false,
    "orderDetailTemplate": "",
    "pickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand",
    "pickupAddressLocality": "AUCKLAND",
    "deliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
    "manufactureDate": null,
    "parentManifestId": 0,
    "deliveryAddressName": "Foodstuffs Own Brands Ltd",
    "deliveryAddressLocality": "MOUNT ROSKILL",
    "packageType": "",
    "colourIdentifier": "ffbb00",
    "pickupAddressCoords": {
      "longitude": 0.0,
      "latitude": 0.0,
      "formattedAddress": null,
      "resultType": 0,
      "isValid": false
    },
    "deliveryAddressCoords": {
      "longitude": 174.733828,
      "latitude": -36.910142,
      "formattedAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
      "resultType": 2,
      "isValid": true
    },
    "deliveryDateFormatted": "24.03.2020",
    "deliveryDateTimeFormatted": "24.03.2020 17:00",
    "fullPickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand, AUCKLAND",
    "fullDeliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand, MOUNT ROSKILL",
    "pickupWindowOpen": null,
    "pickupWindowClose": null,
    "deliveryWindowOpen": null,
    "deliveryWindowClose": null,
    "vehicleClassName": "",
    "vesselName": null,
    "vesselETA": null,
    "cdoRetrievalDate": null,
    "gridStartTime": null,
    "gridEndTime": null,
    "gridDuration": null
  },
  {
    "orderId": 9742727,
    "deliveryDate": "2020-03-24T17:00:00+13:00",
    "reqTruckType": "",
    "clientName": "Mars Inc",
    "clientCode": "MARS",
    "run": null,
    "runCode": null,
    "description": "",
    "productName": "Ambient Product",
    "load": 1,
    "loadDeliveryNumber": 0,
    "customerName": "Foodstuffs Own Brands Ltd",
    "customerBookingNo": null,
    "carrierId": null,
    "carrierName": null,
    "truckId": null,
    "truckCode": null,
    "orderNumber": "Intra Island 0001 - Cubic",
    "units": 1,
    "eqp": 0.000000000,
    "pallets": 0,
    "weight": 15.000000000,
    "volume": 0.050000000,
    "siteName": "Cardinal Logistics Ltd - Wiri",
    "deliveryZone": "Distance Billing",
    "palladiumVersion": 3,
    "orderDetailAvailable": false,
    "orderDetailTemplate": "",
    "pickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand",
    "pickupAddressLocality": "AUCKLAND",
    "deliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
    "manufactureDate": null,
    "parentManifestId": 0,
    "deliveryAddressName": "Foodstuffs Own Brands Ltd",
    "deliveryAddressLocality": "MOUNT ROSKILL",
    "packageType": "",
    "colourIdentifier": "ffbb00",
    "pickupAddressCoords": {
      "longitude": 0.0,
      "latitude": 0.0,
      "formattedAddress": null,
      "resultType": 0,
      "isValid": false
    },
    "deliveryAddressCoords": {
      "longitude": 174.733828,
      "latitude": -36.910142,
      "formattedAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand",
      "resultType": 2,
      "isValid": true
    },
    "deliveryDateFormatted": "24.03.2020",
    "deliveryDateTimeFormatted": "24.03.2020 17:00",
    "fullPickupAddress": "19 Nesdale Avenue, Wiri, Auckland 2025, New Zealand, AUCKLAND",
    "fullDeliveryAddress": "95 May Road, Mount Roskill, Auckland 1041, New Zealand, MOUNT ROSKILL",
    "pickupWindowOpen": null,
    "pickupWindowClose": null,
    "deliveryWindowOpen": null,
    "deliveryWindowClose": null,
    "vehicleClassName": "",
    "vesselName": null,
    "vesselETA": null,
    "cdoRetrievalDate": null,
    "gridStartTime": null,
    "gridEndTime": null,
    "gridDuration": null
  }
]
Thanks.

Post by mahesh@mogolabs.com »

I am still waiting for solution, can somebody help me out?

Post by mats »

@mahesh: Please use CODE tags when posting code.

As Sergey wrote, you should make sure your date is parsed correctly into a Date, before you try to render it. Also, please try to describe your issue using more words. "but still the date picker is not working." is not very helpful.

Post Reply