[ANGULAR] ViewPreset Column Lines

[corner4]

Hi,

we would like to hide major column lines but still show the other ones. We used css as a solution to hide them but the problem is if a major line overlaps with a normal one the normal one will not be rendered and therefore there is no column line at all (since we hid the major one). I have attached a screenshot.

Is there any other solution for our problem?

BR

[alex.l]

Hi,

The layout on the screenshot looks broken. Could you please share the code you used, your viewPreset config, CSS, and show which lines you want to hide and which should be shown in one of our demos. Here maybe https://bryntum.com/products/schedulerpro/examples/bigdataset/

Do you want to hide lines in header only or in timeline as well? Should they just be skipped (like cells are merged) and all lines in a middle shown as is? Please clarify this moment.

[corner4]

Hi Alex,

thanks for the quick response. I've reproduced our scenario at the example you provieded. Here are the screenshots:

Default behavior:

column-lines-default.png (10.19 KiB) Viewed 222 times

Our attempt to hide the major lines via CSS:

column-lines-custom.png (21.32 KiB) Viewed 222 times

We need the column lines in the timeline between months to be gone but the lines between weeks to stay. The lines in the header is a custom adjustment made by us and intended as seen in the screenshot of my original post.

Here is our ViewPreset if needed:

      new ViewPreset({
        id: 'calenderWeek',
        name: 'Kalenderwoche',

        tickWidth,
        tickHeight: 50,
        displayDateFormat: 'HH:mm',

        shiftIncrement: 1,
        shiftUnit: 'week',
        mainUnit: 'week',
        defaultSpan: 4,

        timeResolution: {
          unit: 'week',
          increment: 1,
        },

        headers: [
          {
            unit: 'month',
            dateFormat: 'MMM YY',
            headerCellCls: 'vertically-devided horizontally-devided',
          },
          {
            unit: 'week',
            headerCellCls: 'horizontally-devided calendar-week',
            renderer: this.calendarWeekRenderer.bind(this),
          },
        ],

        columnLinesFor: 1,
      }),

[alex.l]

For clarifying situation, your goal is to not hide major line, but make it look like regular line?

[corner4]

No we want to hide the major lines, but not if major line == normal line (because we want the normal lines to be visible)

Or to rephrase it: We want to hide the major lines but we do not want the gap visible in the red box when hiding the major lines.

[alex.l]

Ok, thanks for clarifying. Now I see the entire problem.
That's not supported out of the box. You can style the lines, but skipping lines is not configurable. You can achieve that with override which is not really recommended.

For that please find a class ColumnLines.js and check getColumnLinesDOMConfig method. It adds lines to the timeline. In method addLineConfig you can find dates set that specially collect dates already occupied by major lines to not add both - major and regular on the same date. To hide major lines you will basically need to remove a part that adds major lines

        // Collect configs for major lines
        if (linesForLevel !== majorLinesForLevel) {
            for (let i = 1; i <= columnConfig[majorLinesForLevel].length - 1; i++) {
                addLineConfig(columnConfig[majorLinesForLevel][i], true);
            }
        }

Here is how to override classes https://bryntum.com/products/schedulerpro/docs/api/Core/mixin/Override

[sarahjarmulak]

Hello Bryntum Team,

Our team has the same issue as mentioned in this forum thread - would it be possible in the future to make this behaviour customizable instead of needing to override classes?

Or has it been changed in the meantime and is there possibly a simpler solution to this?

Thanks!

[ghulam.ghous]

Hi Sarahjarmulak,

Thanks for letting us know that you have the same use-case. I have opened a feature request for this that can be tracked here https://github.com/bryntum/support/issues/8827 as this is currently not supported. But for the time being you can use the override workaround as mentioned by Alex above. And there is no simpler solution is available then that. Also please always open a new thread for a question (you can reference the other forum posts in your post) as this helps us to keep the forums organized.

Regards,
Ghous