Table Header Cell is ignoring fixed width

[Arturo Martinez]

Im trying to expand the space of my header cell rows so that my 

<ng-template #dateRange let-data>

{{ formatFullDateRange(data.startDate, data.endDate) }}

</ng-template>

Fills the content and expand if the result is bigger, (right now its getting croped)
But no matter where i try to set the width it gets ignored, i have tryed inside the onDataBound()

onDataBound(): void {

const colElements = document.querySelectorAll<HTMLTableColElement>(

'.e-timeline-view .e-content-wrap colgroup col'

);

colElements.forEach(col => {

col.style.width = '300px';

});

}

But even if on the DOM the width appears as 300px the cell visual width remains the same, no matter what value i use

This is my scheduler

<ejs-schedule

#scheduleObj

[(currentView)]="scheduleView"

width='100%'

cssClass='timeline-resource-grouping'

[height]="'100%'"

allowSwiping="false"

[showTimeIndicator]="false"

[rowAutoHeight]="true"

[selectedDate]="selectedDate"

[group]="group"

[workDays]="workDays"

[eventSettings]="eventSettings"

[timeScale]="timeScale"

[currentView]="currentView"

(actionComplete)="onActionComplete($event)"

(renderCell)="onRenderCell($event)"

(dataBound)="onDataBound()"

(popupOpen)="onPopupOpen($event)"

(dragStart)="onDragStart($event)"

(dragStop)="onDragStop($event)"

(eventRendered)="onEventRendered($event)"

(resizeStart)="onResizeStart($event)"

(resizeStop)="onResizeStop($event)"

[quickInfoOnSelectionEnd] = "true"

(actionBegin)="onMovileActionBegin($event)"

[dateRangeTemplate]="dateRange"

>

[Saritha Sankar]

Hi Arturo Martinez,

Thank you reaching out to us!

You can achieve a fixed cell width for the schedule cells by setting a specific width for each column. Additionally, you should adjust the width of the date header columns to match, ensuring the layout appears properly aligned and consistent.

Refer the below code and sample for your reference.
 

applyColumnWidth = (): void => {

    const adjustColumnWidth = () => {

      const dateElements = document.querySelectorAll<HTMLTableColElement>(

        '.e-schedule .e-timeline-view .e-date-header-wrap table col'

      );

 

      dateElements.forEach(col => {

        col.style.width = '300px';

      });

    

      const colElements = document.querySelectorAll<HTMLTableColElement>(

        '.e-timeline-view .e-content-wrap table colgroup col'

      );

 

      colElements.forEach(col => {

        col.style.width = '300px';

      });

    };

    requestAnimationFrame(adjustColumnWidth);

  };

 

  onDataBound(): void {

    this.applyColumnWidth();

  }

Sample Link: https://stackblitz.com/edit/angular-hfta1af8-vqwnsfe9?file=src%2Fapp.component.ts




Additionally, as a general suggestion, we recommend  applying direct custom styles to achieve the desired layout more effectively. Refer the below code for your reference.

 <ejs-schedule #scheduleObj  cssClass='schedule-cell-dimension' 

(dataBound)="onDataBound()">

 

</ejs-schedule>

@Component({

    // tslint:disable-next-line:component-selector

    selector: 'app-root',

    templateUrl: 'app.component.html',

    styles: [`

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col,

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col {

        width: 300px;

      }

    `],

})

Please let us know if you need any further assistance.

Regards,

Saritha S.