Enforce column width regardless of number of columns

[Jack Dunn]

Hi,

I have the scheduler looking exactly how I want with custom cell dimensions:

The issue is, when I filter the resources to only show one, the column becomes 100% wide:

How can I force the column to retain the set width (236px)? Ideally the rest is filled with whitespace.

Please advise if possible.

[Swathi Ravi]

Hi Jack,

You can achieve your goal by updating the cssClass when there is just one resource in schedule using Schedule's dataBound event, as shown in the excerpt below.

Sample: https://stackblitz.com/edit/react-schedule-fixed-width-of-resource?file=index.js

Api: https://ej2.syncfusion.com/react/documentation/api/schedule/#databound

[index.js]

function TimelineGrouping() {

    const categoryData = [

        { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },

        { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },

    ];

    let resourceCount;

    function Onclick() {

        var schedule = document.querySelector('.e-schedule').ej2_instances[0];

        schedule.removeResource(2, 'Categories');

    }

    

    function onDataBound() {

        var schedule = document.querySelector('.e-schedule').ej2_instances[0];

        resourceCount = schedule.resourceCollection[0].dataSource.length;

        if(schedule.resourceCollection[0].dataSource.length == 1) {

            schedule.cssClass = "single-resources";

        }

    }

    return (<div className='schedule-control-section'>

        <div className='col-lg-12 control-section'>

            <div className='control-wrapper'>

                <button onClick={Onclick.bind(this)}>Remove resource</button>

                <ScheduleComponent cssClass="schedule-cell-dimension dataBound={onDataBound.bind(this)}> </ScheduleComponent>

            </div>

        </div>

    </div>);

}

[index.css]

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

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

    width:236px;

}

 

.schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {

    width: 236px;

}

 

.single-resources .e-schedule-table.e-content-table,

.single-resources .e-date-header-container {       

    width: calc(100% - 236*2px);    

}

Regards,

Swathi Ravi

[Jack Dunn]

Hi Ravi,

That worked well for a single resource, however in my particular case, the user can select 1 or many resources to see.

Therefore I required a more dynamic solution, which I will share in case it helps others:

dataBound={() => {

    if (!schedulerRef.current) {

        return;

    }

    /* This code handles dynamically enforcing width of columns when only few resources are being shown */

    const schedulerElement = schedulerRef.current.element;

    const contentAreaElements = schedulerElement.getElementsByClassName('e-content-wrap');

    if (contentAreaElements.length === 0) {

        return;

    }

    const contentArea = contentAreaElements[0];

    const hasHorizontalScrollbar = contentArea.scrollWidth > contentArea.clientWidth;

    if (hasHorizontalScrollbar) {

        // If there is a horizontal scroll bar then there's no need to enforce width

        return;

    }

    const resourceCollection = schedulerRef.current.resourceCollection[0];

    if (!resourceCollection) {

        return;

    }

    const resourceCount = (resourceCollection.dataSource as Record<string, any>[]).length;

    // Keep consistent with index.scss > $schedulerCellWidth & $compactSchedulerCellWidth

    const desiredColumnWidth = viewOptions.compact ? 125 : 270;

    const desiredTotalWidth = desiredColumnWidth * resourceCount;

    const width = 'calc(100% - (100% - ' + desiredTotalWidth.toString() + 'px))';

    const headerElement = getSingleElement(schedulerElement, 'e-date-header-container');

    if (headerElement) {

        headerElement.style.width = width;

        headerElement.classList.add('no-padding-important');

    }

    const contentElement = getSingleElement(schedulerElement, 'e-schedule-table e-content-table');

    if (contentElement) {

        contentElement.style.width = width;

    }

}}

/*....................*/

function getSingleElement(element: Element, className: string) {

    const elements = element.getElementsByClassName(className);

    if (elements.length > 0) {

        const htmlElement = elements[0] as HTMLElement;

        return htmlElement;

    }

}

[Vinitha Devi Murugan]

Hi Jack,

Thank you for sharing your dynamic solution with us. We appreciate your contribution and are glad that you were able to find a solution that suits your specific case. Your input will indeed be helpful to others facing similar challenges. If you have any further questions or need additional assistance, please feel free to ask.

Regards,

Vinitha