Custom Headers - Any better ways?

Discuss issues related to v3.x
Post Reply
User avatar
GSimpson
Posts: 1
Joined: Thu Sep 01, 2016 11:59 am

Custom Headers - Any better ways?

Post by GSimpson »

We are currently upgrading from the ExtJS 4 of the Gantt to the ExtJS 5 version.

We make use of some custom "Shift" headers that we'd like to port to the new version, but before we do, we wanted to check if there had been any new features added to the Gantt that might make their implementation more straight-forward.
shiftsBar.PNG
shiftsBar.PNG (5.62 KiB) Viewed 7663 times
Our ExtJS 4 solution went something like this:

1. Using a custom headerConfig, we use a middle row configured with a cellGenerator pointing to a global variable called "shifts" (we believe there was a limitation at the time that said it couldn't be on the bottom row?)

Code: Select all

middle: {
   unit: "MINUTE",
   cellGenerator: function(){
      return me.shifts;
   }
}
2. When the back-end returns the event data, it also returns details of the shifts, which get set into the global variable "shifts".

Code: Select all

this.gTaskStore = new Gnt.data.TaskStore({
   ...
   listeners: {
      ...
      load: function(store, records, ...){
          ...
          this.shifts = jsonData.shifts;
          ...
          }
       }
});
3. The cellGenerator draws the shifts on the middle row.

This has some limitations: We're stuck using the 14 day view and can never zoom/pan, since the shifts are calculated on the back end and wouldn't be recalculated as you zoomed/panned client side. It would be great to do this on the front end instead, so we can zoom and pan again.

We noticed you have a new example of events being rendered in the header. Is this perhaps a more scalable way to achieve what we were trying to do? Or are there any other methods?

Another option we can think of is having the back-end send down just the information about the shift patterns and have a front-end function calculate them on-the-fly based on the start-end times currently in view on the Gantt. This would again go down the cellGenerator route.

We just thought we'd double-check we're not missing another simpler solution =)

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 3092
Joined: Wed Jan 08, 2014 11:46 am

Re: Custom Headers - Any better ways?

Post by Maxim Gorkovsky »

Hello.
cellGenerator is still there, so your approach should work as it used to, also approach seems fine (though global variable can be questionable, maybe you can generate/update preset and refresh gantt by calling setViewPreset). But I miss why zooming doesn't work? event is fired when time span changes, so you can return new set of shifts from server.

Example you're referring to doesn't define cell, it only renders some content, and as I understand, you need to define cell dates yourself.

User avatar
Jasperlg
Posts: 14
Joined: Thu Dec 26, 2019 12:49 pm

Re: Custom Headers - Any better ways?

Post by Jasperlg »

Hi,

Should this still work? I've been trying to impelement a shift headerwith variable time ranges just like GSimpson's example but I was not succesfull. Is cellGenerator still the way to go?

I have shifts looking like this

Code: Select all

var shifts = [
  {
    start: new Date(2017, 0, 1, 0),
    end: new Date(2017, 0, 1, 6),
    header: "ShiftInfo1"
  },
  {
    start: new Date(2017, 0, 1, 6),
    end: new Date(2017, 0, 1, 14),
    header: "ShiftInf2"
  },
  {
    start: new Date(2017, 0, 1, 14),
    end: new Date(2017, 0, 2, 20),
    header: "ShiftInf3"
  }
];
And I have my headerConfig like this:

Code: Select all

  headerConfig: {
    // This defines your header, you must include a 'middle' object, and top/bottom are optional.
    top: {
      unit: "day",
      dateFormat: "ddd DD/MM"
    },
    middle: {
      unit: "MINUTE",
      cellGenerator: function(){
        return shifts;
    }
    },
    bottom: {
      // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
      unit: "hour",
      increment: 1,
      dateFormat: "HH"
    }
    columnLinesFor      : "middle"  // Defines header level column lines will be drawn for
  }
  
But I'm getting no results. The middle header is just empty.

How should I approach this?

Kind regards,

Jasper

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 3092
Joined: Wed Jan 08, 2014 11:46 am

Re: Custom Headers - Any better ways?

Post by Maxim Gorkovsky »

Hello.
Yes, cellGenerator is still supported. Please look into this demo and see how to use cell generators: https://bryntum.com/examples/scheduler-for-extjs/customheader/

User avatar
Jasperlg
Posts: 14
Joined: Thu Dec 26, 2019 12:49 pm

Re: Custom Headers - Any better ways?

Post by Jasperlg »

Thanks for you answer @Maxim.

I'm trying to copy this example to start with, but I can't make this example work. Am I doing something wrong in the following configuration?

Code: Select all

bryntum.scheduler.PresetManager.registerPreset("Shifts", {
  name: "Shifts",
  tickWidth: 25,
  rowHeight: 32,
  displayDateFormat: "HH:mm",
  //shiftIncrement: 1,
  //shiftUnit: "day",
  timeResolution: {
    unit: "minute",
    increment: 15
  },
  defaultSpan: 24,
  //mainHeaderLevel: 2,
  //columnLinesFor: 1,
  headerConfig: {
     top: {
      unit: "day",
      dateFormat: "ddd DD/MM",
    },
    middle: {
       unit: "hour",
       cellGenerator: function(viewStart, viewEnd) {
      	 return [{
           start : viewStart,
           end : viewEnd,
           header : 'ShiftInf3'
      	 }];
      }
    },
    bottom: {
       unit: "hour",
      increment: 1,
      dateFormat: "HH"
    }
   
  }
});

The header looks like the screenshot in my attachment. Whatever I do, I can't seem to change it. Earlier I added a breakpoint in the renderer of the middle row, but this never triggered... Should this trigger when using the cellGenerator function? I assume it should...

I would be so grateful if I got to this solution.

Kind regards,
Jasper
Attachments
Capture.PNG
Capture.PNG (6.81 KiB) Viewed 5686 times

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 3092
Joined: Wed Jan 08, 2014 11:46 am

Re: Custom Headers - Any better ways?

Post by Maxim Gorkovsky »

You are asking about Brytum Scheduler on a forum section about Scheduler for ExtJS. cellGenerator is documented for the last one, but in the first one it is a private API which I wouldn't recommend to use it as it might change behavior between releases.

Your view preset with generated cells should look like this:

Code: Select all

PresetManager.registerPreset('Shifts', {
    name              : 'Shifts',
    tickWidth         : 25,
    rowHeight         : 32,
    displayDateFormat : 'HH:mm',
    timeResolution    : {
        unit      : 'minute',
        increment : 15
    },
    defaultSpan : 24,
    headers     : [
        {
            unit       : 'day',
            dateFormat : 'ddd DD/MM'
        },
        {
            unit          : 'hour',
            cellGenerator : function(viewStart, viewEnd) {
                return [{
                    start : viewStart,
                    end   : viewEnd,
                    value : 'ShiftInf3',
                    // this is important one, header has to have width. this function is called with a scope of a timeaxisviewmodel, which can
                    // calculate this. don't use arrow function here.
                    width : this.getDistanceBetweenDates(viewStart, viewEnd)
                }];
            }
        },
        {
            unit       : 'hour',
            increment  : 1,
            dateFormat : 'HH'
        }
    ]
});
Please post your questions on the appropriate forums to avoid confusion. Also keep in mind that you are using private API, make sure this code works if you upgrade scheduler version.

User avatar
Jasperlg
Posts: 14
Joined: Thu Dec 26, 2019 12:49 pm

Re: Custom Headers - Any better ways?

Post by Jasperlg »

@Maxim,

My apologies. I assumed the ExtJS library was also available in the bryntum scheduler, but it seems I'm wrong about this.

Thanks for you help and answer.

Kind regards,

Jasper

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 3092
Joined: Wed Jan 08, 2014 11:46 am

Re: Custom Headers - Any better ways?

Post by Maxim Gorkovsky »

Maybe it is not clear from features list, but Bryntum Scheduler/Grid/Gantt do not have any external framework dependencies, they are built from scratch on a pure JS/CSS/HTML. Scheduler and Gantt for ExtJS rely on ExtJS framework.
I hope it is clear now.

You are welcome.

Post Reply