search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Scheduler - How to center multiple active areas horizontally in row header column

Asked by Anonymous
2 months ago.

Hi,

I'm adding in onBeforeRowHeaderRender multiple active areas to the second header row's column to show some icons. I want to know, whether it's possible to center them all horizontally. See please attached screenshot.

    onBeforeRowHeaderRender: (args) => {
      const personResource = args.row.data as PersonResource;

      if (personResource.frozen !== undefined) {
        return;
      }

      // Status icons
      args.row.columns[1].areas = [];

      const leftOffset = 20
      let left = 80;
      // Same position for top and bottom
      // see https://forums.daypilot.org/question/5577/how-to-center-vertically-active-areas
      const topBottom = 5;

      if (true) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAoVJREFUWMPtVj1oU1EU/s59ocqDNovRoRjazR8UcSjqi5tQ8Sc4mFmkIEgFLU0eTj7fILS5L0vVpSiCRQc3ke51SBZxEbuoKEVUbAQJhTxLw/tcYulPmrz2pe1gD9zlnvOd77sfh8MFdiJCOI7T4ThOR5QesShg3/czQRAQwPNtEUDyhohEEiAbBeZyueMA3gJAEAR9hULhzUb6qAgG3Fx8hcjgljowPDy8Ryn1FcDu+tU8yaTnebNb4oBS6toScgDYpZQa2BIHHMeJVavVzwD2r0h9q1QqvePj4wub6oDv+5cakANAdzweT7fNAcdxYpVKJRGLxRJKqX0A9gZBkBCRqwCOrgF7R/KJUqoMYDYIgp+1Wq0cj8fLruvWmgqwbbuT5GMAhwEk6qedUa6faREZyOfzc6scyGazvSIyCeBgm8kBACQ/icg5rfXHf3fLZsDzvC+GYVgApjaBv0jy5FLyVQIAYGRk5Ldpmv0kJ9rFLCIvTNM8UygUfq3KNcPZtu2QvIMIK1tExvL5/C0AbJQ3mnpWLE5ZljUD4Hyr2gZRA3Bda32vqcAwnWzbTpN8uR52khc8z5tsVRdqEZH8s87XA4AfpijsJrTWyy4iqW0VEBbTUkAmkzEA9G1AwIk6NpqAZDJ5DEBng9R3AFdIpgHMNMh39fT0HIksQERWWrkgImMickBr/dTzvFemaR4SERfA/Apsyzlo+SlVSlnk4g55rZQaHB0dnV5a47puFcDdXC73jOR9EemvpywADyIJIHlKRH6QvK21nsAaGw0A6nv+bDabvSgiD0mebtW/6ZAMDQ11G4bRBeCy1jr0r7dUKn1IpVKPRCRhWdb7YrE4Fxa7E/9f/AVgFdo64e0utwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0xMi0xMlQwOTozNzoyMSswMDowMBaMyUEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMTItMTJUMDk6Mzc6MjErMDA6MDBn0XH9AAAAKHRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy90bXAvbWFnaWNrLUw2SlprTkFWvf3kaAAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
            toolTip: personResource.tags.ignoreWorkProfileChangesToolTipText
          });

        left = left - leftOffset;
      }

      if (true) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAAmJLR0QAdYripoEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhDAgNFBgkkns5AAABk0lEQVRIx+2UO0tDQRCFv42aFGIQQYSIWAsG/AnaSEpLC0utraYQIT4gWMw/ELExRbCxVQsfv0BECwvFRsVgERAsUoS1yOPubnJzFSydYu/dmXMOu8OZhf/4+xDnT7yvX22H8ckKSIFJ6lqO4ArIChle9bSN6ikAYqgy3trk9V4ARWa5a+U+mFDrMlLB4SM63ElOUSTXocM4Vf8ijoAiBYcOUHTWjoQUtLcAMBl0KOOsMShfoB5ArbPGoDwBLQfQYwDO/aSPCpuYd2pHeioIWsGlzPlNNL6AIjmKZLCca0WMWhCjVpZZxFBnV998HwQulBhPxmFiTNydExOHNJGFQbKsMk0Wi+GLZ+71rF2XElM0qPHCgX5GLNOZgE02GO5xiEM29R1kiHfGWrkv9rTUZBpBkXku+47otu6AjFLzsgt6JRiQOW760i2GXd0COWHJq8zoQwpYT3giTGceboPKRtNI9sevzVOwb4SzkBSD3akUkP6xwECwTzc197lIvMYIANes0XB68xjjv2Sb93Pvf/w6vgHHS3Kc6saEOgAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
            toolTip: personResource.tags.isIndirectlySubordinatedToolTipText
          });

        left = left - leftOffset;
      }

      if (true) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAAmJLR0QA9WdaJaEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhDAgOIh5Gq/EgAAABKklEQVRIx+WVPU7DQBCFvzWIgoqCipZjBIRdJYKWq7yKI8xZ6FIkUNiRcgwo6bkAHgqcYMeO1w5NJKaaYt+befO3cCSmPf4IAoXKC+OQtedaMwEbSZDU/M9Dck/+Wr3/QaDe+UhiUGHVfFgnxWkfgSEMXfPGzJYK5qMzqOCwUGquDiFJfwZg7xSAk+vOOoTEaxAsoyBQUig136VIojVwBctYkuDkmv5QDG6jAeZgM14JeLsW9W2c8wDccNG5tR/MucIJpLbaNLfdRmcdWX+n0KM9d0k4b2Y0zOoZPHFJuTfyHgm/Jy22ES9ylXKlmxEffGwVQIsKPh11NbfwXK6vKnpoRo+y6YSc2632YN7UH78HZ0yAQGYrsQsfKsF1P/7HaFC0tR/w6YnjtG9XcHSMI4iIlQAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
            toolTip: personResource.tags.personWillEnterToolTipText
          });

        left = left - leftOffset;
      }

      if (true) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAAmJLR0QA9WdaJaEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhDAgNNhsaKWyjAAABGklEQVRIx82VQU7DMBREn62sUDecrhuEwqYHQJpTfKkHYNOqHBG21CxiZKfJT01aCRxlYckzf/54bMO/GbpttVYXDMPEUPodgQVhQASwVU0PqHird92lsIbuR83GZZuKuXKoow+3/ANob2meorsGNwQfbPRoLwqWmhTUcGDHhjO9Dp6KbI3SYI9G/QtQr6Szkg6gXFJRJUjFW28XBIlE4FgaGfR1zaE+8Qz0YqD4oZma6Ec6EYBeD7ZtykHbmBIE5ztlv462rfei1cQn3udNjH6E622s4DHDo5uDCcVOSV85BWG80jHRxifhjU9iLf5KEmdV7Mt5bFAwVgFgr171uHxllcvOE98t3TbrgrSGQKugus/Dcq+n7Q/HN2ruhl6KVeElAAAAAElFTkSuQmCC" alt="" height="16" width="16">',
            toolTip: personResource.tags.personLeftCompanyToolTipText
          });

        left = left - leftOffset;
      }

      if (true) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAAmJLR0QA9WdaJaEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhCxcKMREKqJ4mAAABhElEQVQ4y5XTPW4UQRQE4K9nByRrLa+DDR04dLIHQPxcACdERJacGAnS1ZMsR44QuCWLCCQuQWIuwI84ACexZAcGzwzB7MLszoJNBSN196t5VfW66SEQs28f5Yo9If+lfGVxDIi92CMGfVLRp+Qqhk6dxjBXbiK0YkyNjU3JPWErOsS2KZjG9o0dMpzYUKlsOJntdJAW4ixyHfd96Zw/yF+jUOeVHVKu8ZrGlSuNdpXr7m/Tkv7n3pKs46KlvMjvVnoIxNgRdbNm3741dYOjGHeHWCzYndpSScnISCKpbLXxLhEiETsOMVjQOMBh7LQVvwmzhq/mVY1z562DzknMTQcpN/HY2Z8k7uBnl7KbP0bSZCmQxdA3E02b2hKhkXx3L18GypmdAxNVq7+27hneu2gVJ5WJA28yikjEpuOu3WRo2B3RAMexSaRSoZKNuqO59BLN4kUbyQ4UiXjo0/KdrHr5gkf5c4rSB7uub/EYS2eelBpP/Zjn8w80krvdpG+JFP9J+AXs7m5BC0wzTgAAAABJRU5ErkJggg==" alt="" height="16" width="16">',
            toolTip: personResource.tags.calculationStatusToolTipText
          });

        left = left - leftOffset;
      }
    }
Comment posted by Anonymous
2 months ago.

Important notice: I don't show all five active areas at once. For each icon there is a condition, that has to be filled. For the sake of testing I set all conditions to true

Comment posted by Anonymous
2 months ago.

I also noticed, that the width of this columns with the active areas isn't adjusted automatically to fit the content, although the property rowHeaderWidthAutoFit is set to true.

Answer posted by Dan Letecky [DayPilot]
2 months ago.

Unfortunately, it's not possible to center a variable number of active areas horizontally.

The width is not adjusted because active areas are displayed in a separate layer which is not part of the row header cell content.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):