Premium support for our pure JavaScript UI components


Post by bherford »

Hi Team, I am having trouble getting my custom viewPreset changes to take effect. I currently get an error in the browser when I do this in my

gantt.component.ts

:

    ganttInstance.presets = [
      'manyYears', 
      { base: 'manyYears', tickWidth: 50 }
    ]

Browser error:

zone.js:182 Uncaught TypeError: Cannot create property 'rowHeight' on string 'manyYears'
    at ClassDefEx.processData (gantt.lite.umd.js:12708:11)
    at ClassDefEx.construct (gantt.lite.umd.js:12595:27)
    at ClassDefEx.construct (gantt.lite.umd.js:212163:11)
    at new Base (gantt.lite.umd.js:7521:8)
    at new ModelStm (gantt.lite.umd.js:26691:74)
    at new TreeNode (gantt.lite.umd.js:23537:74)
    at new Model (gantt.lite.umd.js:12319:1)
    at new ViewPreset (gantt.lite.umd.js:212051:1)
    at new ClassDefEx (gantt.lite.umd.js:15772:20)
    at PresetStore.createRecord (gantt.lite.umd.js:16132:12)

Am I missing some config?


Post by Animal »

I don't think it's valid to set the options dynamically. But that notation does not seem to work statically, so it needs to be fixed. Here is the ticket: https://github.com/bryntum/support/issues/5076


Post by Animal »

OK, I have this fixed. It is not dynamic. You cannot set the presets on a running Scheduler. But configuring the presets as a custom set will work now.

The test tests your scenario:

        scheduler = await t.getSchedulerAsync({
            resources   : resources,
            events      : events,
            startDate   : new Date(1960, 0, 1),
            endDate     : new Date(2078, 0, 1),
            visibleDate : {
                date  : new Date(2017, 0, 1),
                block : 'center'
            },
            viewPreset  : null,
            presets     : [
                'manyYears', 
                { base: 'manyYears', tickWidth: 80 }
            ]
        });
        const { presets } = scheduler;

        // Just the two configured ViewPresets present
        t.is(presets.count, 2);

        // It defaults to the first if viewPreset is configured null.
        t.is(scheduler.zoomLevel, 0);

        // There are only two zoom levels
        t.is(scheduler.minZoomLevel, 0);
        t.is(scheduler.maxZoomLevel, 1);

        // All events are one year which is the tick duration. manyYears has tickWidth 40
        t.is(scheduler.viewPreset.tickWidth, 40);
        t.query('b-sch-event-wrap').forEach(e => t.is(e.offsetWidth, e.viewPreset.tickWidth));

        scheduler.zoomIn();
        t.is(scheduler.zoomLevel, 1);

        // The ViewPreset extension has tickWidth 80
        t.is(scheduler.viewPreset.tickWidth, 80);
        t.query('b-sch-event-wrap').forEach(e => t.is(e.offsetWidth, e.viewPreset.tickWidth));
    });

Post Reply