Premium support for our pure JavaScript UI components


Post by srr »

Hello,

Can you confirm the data format that a date column needs?

I have a "Due Date" column that I have tried using both a datetime and date value (defined/populated from an SQL database) and no data is displayed in the column. If I remove the type: 'date' property from the column definition the unformatted date or datetime is displayed without issue.

columns: [
        { text: 'Order', field: 'reference', width: 120 },
        { text: 'Stock Code', field: 'name', width: 100 },
        { text: 'Description', field: 'Description', width: 150 },
        { type: 'number', text: 'Qty Outstanding', field: 'QtyOutstanding', width: 120 },
        { type: 'date', text: 'Due Date', field: 'DueDate', width: 100 }
    ]

Examples of the data I have tried to populate the column with:

{""id"":2265,""reference"":""52250003"",""name"":""ABC123"",""Description"":""Test Part"",""QtyOutstanding"":100.000000,""DueDate"":""2023-07-10""}

and

{""id"":2265,""reference"":""52250003"",""name"":""ABC123"",""Description"":""Test Part"",""QtyOutstanding"":100.000000,""DueDate"":""2023-07-10T00:00:00""}

Thanks for your help


Post by alex.l »

Hi, DateColumn requires Date typed value. For that you need to use date type for DataModel's field and pass the format that can be parsed to Date from backend.
Did you review our demos? It contains a lot of JSON examples. Check /examples folder in sources you downloaded from CustomerZone

                    "startDate" : "2019-01-15T00:00:00",
                    "endDate"   : "2019-01-17T00:00:00"

Docs
https://bryntum.com/products/schedulerpro/docs/api/Scheduler/data/ResourceStore#config-modelClass
https://bryntum.com/products/schedulerpro/docs/api/Scheduler/model/ResourceModel
https://bryntum.com/products/schedulerpro/docs/api/Core/data/field/DateDataField
https://bryntum.com/products/schedulerpro/docs/api/Core/helper/DateHelper

All the best,
Alex


Post by srr »

Hi Alex

Thanks for coming back to me. I can't see any examples (in your online examples) where a date column is used in the resource columns, I believe the contents of the examples folder contains everything listed on your online examples.

The format that is expected matches what i am providing by the looks of it.

I have validated my json online to double check its all ok, and it is (see attached JsonValidator.png), and the date format I'm providing is as per the guide:

"DueDate": "2023-07-10T00:00:00"

But the column remains blank. I've also tried using hard coded inline data just to see if there was something about my json it didn't like, but that doesn't display anything either (see attachment Scheduler.png):

const scheduler = new SchedulerPro({

resources:
    //jsonResourceData
    [{
        "id": 2265,
        "reference": "52250003",
        "name": "ABC123",
        "Description": "Test Part",
        "QtyOutstanding": 100.000000,
        "DueDate": "2023-07-10T00:00:00"
    }]
,

Any ideas on where i'm going wrong?

Thanks

Attachments
Scheduler.PNG
Scheduler.PNG (9.96 KiB) Viewed 344 times
JsonValidator.PNG
JsonValidator.PNG (11.46 KiB) Viewed 344 times

Post by alex.l »

Yes, you're right. I meant Gantt examples, they have date fields in every example but not SchedulerPro.

Ok, I used "drag-from-grid" demo as a base.
I added "dueDate" field into ResourceModel

export default class Room extends ResourceModel {
    static get fields() {
        return [
            'capacity',
            'equipment',
            { name : 'dueDate', type : 'date' }
        ];
    }
}

I added date column into columns


        columns : [
            {
                text  : 'Conference room',
                field : 'name',
                width : 170
            },
            {
                text : 'Due Date',
                type : 'date',
                field : 'dueDate',
                width : 220
            },

I added "dueDate" field into JSON

{
  "success" : true,
  "rooms"   : {
    "rows" : [
      {
        "id"        : 1,
        "name"      : "Bristol",
        "capacity"  : 500,
        "dueDate"   : "2023-07-10T00:00:00",
        "equipment" : [
          "film",
          "microphone",
          "headset",
          "video"
        ]
      },
      {
        "id"        : 2,
        "name"      : "Leeds",
        "capacity"  : 50,
        "dueDate"   : "2023-07-10T00:00:00",
        "equipment" : [
          "film",
          "chalkboard",
          "headset",
          "video"
        ]
      },
      {
        "id"        : 3,
        "name"      : "York",
        "capacity"  : 20,
        "dueDate"   : "2023-07-10T00:00:00",
        "equipment" : [
          "tv",
          "chalkboard",
          "video",
          "headphones"
        ]
      },

And I see all is working as expected. Please see video attached

Screen Recording 2023-05-26 at 12.15.40.mov
(3.7 MiB) Downloaded 18 times

You can attach a runnable example of your code and we will debug it to find the problem.

All the best,
Alex


Post by srr »

Thanks Alex

I think I have done everything you've outlined correctly, but still having no luck getting it to display. I have created a bare bones test example of what i am trying to do using a .json file as a data source. See attached.

If you can debug it and see where i'm going wrong that would be great.

Attachments
SchedulerTest.zip
(1.44 KiB) Downloaded 14 times

Post by alex.l »

Hi, the thing is that when you declared project, and even more - when you create an instance of ProjectModel before set it to SchedulerPro, you need to keep all configs for projectModel's store inside it. Try this


let project = new ProjectModel({
    // I moved model class definition inside ProjectModel instance
    resourceStore : {
        modelClass: Orders
    },
    transport: {
        load: {
            url: 'data/testData.json'
        }
    },
    autoLoad: true,

validateResponse: true
});

It worked for me.

All the best,
Alex


Post by srr »

Hi Alex - that is working for me now after implementing that change.

Thanks very much for your help!


Post Reply