Schedule - Customize resource display/toolip and control resource row heights.

[Justin Schnurer]

I use multiple resources nested inside each other as shown in this screenshot:

My resources (from top to bottom) are: Basins > GeoUnits > SubGeoUnits > Facilities > Businesses

Some of the resource names are very long. As such, I would like to be able to do all of the following. Could you please show me how to accomplish these tasks?

1. Control the width of the resource name column.
2. Control the indent distance for the nested resources (the amount of indent between the left of the cell and the expand/collapse arrow).
3. Wrap the text inside the resource cell so that long names appear on two lines.
4. Add a tooltip when the user hovers the resource cell that will show the entire name of the resource.
5. Control the row height for each resource type. Specifically, I want Basin, GeoUnit, SubGeoUnit resource rows to be approximately 1/2 of their current height in the screenshot.

If you could tell me which of these requests are possible and how to accomplish them, that would be great. Thanks!

[Justin Schnurer]

I have accomplished number 4 from above (resource tooltip) by using the template engine (https://ej2.syncfusion.com/documentation/common/template-engine/ ) and adding ​group.headerTooltipTemplate​ to my Schedule component. I set the headerTooltipTemplate = "${resourceData.name}" in my case.

[Ruksar Moosa Sait]

Hi Justin,

Q1. You can reduce the width of the resource column using the below CSS

.e-schedule
.e-timeline-view
.e-resource-column-table,

.e-schedule
.e-timeline-view
.e-resource-left-td {

  width: 170px;

}

Q2. You can indent the distance between the nested resources using the below CSS

.e-schedule
.e-timeline-view
.e-resource-column-wrap
.e-resource-cells.e-parent-node{

    padding-left: 1px;

}

Q3. Currently its not possible to break the text as the height and width of the resource cells and the resource column is altered.

Q4.
You can add a Header Tooltip for the resource cells

headerTooltipTemplate(props) {

        return (<div
className="template-wrap">

            <div
className="room-name">{this.getHeaderName(props)}</div>

        </div>);

    }

    getHeaderName(value) {

        return
value.resourceData[value.resource.textField];

    }

Kindly refer the below documentation for more details .

https://ej2.syncfusion.com/react/documentation/schedule/resources/#simple-resource-header-customization

Q5. To adjust the height of the resource and work cells, you need to set the height of the column table to ‘auto’ and adjust the height using the below CSS.

.e-schedule
.e-timeline-view
.e-content-wrap, 

.e-schedule
.e-timeline-view
.e-content-table,

.e-schedule
.e-timeline-month-view
.e-content-wrap,

.e-schedule
.e-timeline-month-view
.e-content-table,

.e-schedule
.e-timeline-view
.e-resource-column-table, 

.e-schedule
.e-timeline-month-view
.e-resource-column-table{

    height: auto;

}

.e-schedule
.e-timeline-view
.e-work-cells,

.e-schedule
.e-timeline-month-view
.e-work-cells,

.e-schedule
.e-timeline-view
.e-resource-cells,

.e-schedule
.e-timeline-month-view
.e-resource-cells  {

  height: 50px;

}

Sample: https://stackblitz.com/edit/react-kfdbva?file=index.js,index.css

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[Justin Schnurer]

Thanks for the help!

For Q2, this does not remove the padding that I was hoping to remove. In the following screenshot, I have used your styles to set the padding-left to 2px. However, when the Schedule component renders the (nested) resources, it looks to be adding an inline margin-left style. It seems that each nested resource adds +25px of margin compared to its parent. I would like to reduce this to maybe +12px or +10px instead. Is there any way to make this change?

 

For Q5, your styles work to change the height of ALL rows. However, I want to change ONLY the rows for the resources of certain types.

My scheduler uses the following ResourcesDirective:

<ResourcesDirective>

  <ResourceDirective

    name="Basins"

    field="basinId"

    title="Basin"

    dataSource={basinYAxisData.basins}

    textField="name"

    idField="id"

  />

  <ResourceDirective

    name="GeoUnits"

    field="geoUnitId"

    title="GeoUnit"

    dataSource={basinYAxisData.geoUnits}

    textField="name"

    idField="id"

    groupIDField="basinId"

  />

  <ResourceDirective

    name="SubGeoUnits"

    field="subGeoUnitId"

    title="SubGeoUnit"

    dataSource={basinYAxisData.subGeoUnits}

    textField="name"

    idField="id"

    groupIDField="geoUnitId"

  />

  <ResourceDirective

    name="Facilities"

    field="facilityId"

    title="Facility"

    textField="name"

    idField="id"

    groupIDField="subGeoUnitId"

    dataSource={basinYAxisData.facilities}

  />

  <ResourceDirective

    name="BusinessLines"

    field="businessLineId"

    title="BusinessLine"

    textField="name"

    idField="id"

    groupIDField="facilityId"

    dataSource={basinYAxisData.businessLines}

  />

</ResourcesDirective>

The resources are nested like: Basin > GeoUnit > SubGeoUnit > Facility > BusinessLine.

In my application, the user can only schedule events for the Facility and BusinessLine resource rows. The other resources (Basin/GeoUnit/SubGeoUnit) are used for display purposes only.

My intent is to make ONLY the Basin, GeoUnit, and SubGeoUnit resource rows shorter (maybe 40px) but leave the Facility and BusinessLines as the default height. Is this possible?

Thanks!

[Justin Schnurer]

Hello again. For Q5, I have discovered a way to shrink only certain resource rows. I saw that the cells are assigned an attribute named ​data-group-index which is set to the index number of the resource. Since I only want to shrink the first 3 resource row types, I used this style:

.e-schedule .e-timeline-view .e-work-cells[data-group-index="0"],

.e-schedule .e-timeline-month-view .e-work-cells[data-group-index="0"],

.e-schedule .e-timeline-view .e-resource-cells[data-group-index="0"],

.e-schedule .e-timeline-month-view .e-resource-cells[data-group-index="0"],

.e-schedule .e-timeline-view .e-work-cells[data-group-index="1"],

.e-schedule .e-timeline-month-view .e-work-cells[data-group-index="1"],

.e-schedule .e-timeline-view .e-resource-cells[data-group-index="1"],

.e-schedule .e-timeline-month-view .e-resource-cells[data-group-index="1"],

.e-schedule .e-timeline-view .e-work-cells[data-group-index="2"],

.e-schedule .e-timeline-month-view .e-work-cells[data-group-index="2"],

.e-schedule .e-timeline-view .e-resource-cells[data-group-index="2"],

.e-schedule .e-timeline-month-view .e-resource-cells[data-group-index="2"] {

  height: 30px;

}

Please let me know if there is a better way to handle this functionality or if this is correct.

[Ruksar Moosa Sait]

Hi Justin,

Q2.  We have checked on your query and suggest you to adjust the margin left of the indent distance between the nested resources using the renderCell method like the below code.

onrenderCell(args) {

        if (args.elementType === "resourceHeader") {

            if (args.element.firstChild.classList.contains("e-resource-collapse") &&

                args.element.lastChild.classList.contains("e-resource-text")) {

                args.element.firstChild.style.marginLeft = "10" + "px";

                args.element.lastChild.style.marginLeft = "10" + "px";

            }

        }

    }

Q5. Yes. It’s a correct way to adjust the height of the required parent resources.

Sample: https://stackblitz.com/edit/react-kfdbva-xyyexk?file=index.js,index.css

Output:

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[Justin Schnurer]

Q2: This doesn't work as I want it to. You are setting the indent for ALL rows. I want to set the indent to different amounts for different resources.

Q5: This also doesn't work. I thought the data-group-index corresponded to the index of the resource in the resources directive but instead it is just an incrementing number.

[Justin Schnurer]

Q5: I have solved this by setting the display text for my resources to the pattern "TYPE|name". Then in the renderCell event, I am reading the element's text, splitting by "|", then using the "TYPE" portion to decide how much indent should be applied to that individual cell.

const resourceIndentMultipliers = {

  "BASIN": 1,

  "GEOUNIT": 2,

  "SUBGEOUNIT": 3,

  "PARENT": 4,

  "CHILD": 5,

} as any;

if (args.elementType === "resourceHeader") {

              let marginIndent = "0px";

              let rowType = "";

              const lastChild = args.element.lastChild as HTMLElement | null;

              if (lastChild?.classList.contains("e-resource-text")) {

                // Check to see if the text of the resource has a | in it.

                let pipeIx = lastChild.textContent?.indexOf("|");

                if (pipeIx !== undefined

                  && lastChild.textContent

                  && pipeIx > -1) {

                  // Split the text into [TYPE, name].

                  const pieces = lastChild.textContent.split("|");

                  rowType = pieces[0];

                 

                  // Replace the display text with just the name.

                  lastChild.textContent = pieces[1];

                  // Replace the default margin with 10px times the multiplier specified for this type.

                  marginIndent = ((resourceIndentMultipliers[rowType] || 0) * 10) + "px";

                  lastChild.style.marginLeft = marginIndent;

                }

              }

              const firstChild = args.element.firstChild as HTMLElement | null;

             

              if (firstChild?.classList.contains("e-resource-collapse")) {

                firstChild.style.marginLeft = marginIndent;

              }

            }

As it stands, it seems impossible to implement Q2.

I would like to submit a suggestion. It would be useful if the RenderCellEventArgs had a property that specified which Resource this row is bound to.

[Ruksar Moosa Sait]

Hi Justin,

Q2. You can set the margin left for each resource levels in the renderCell event like the below code snippet.

onrenderCell(args) {

        if (args.elementType === "resourceHeader") {

            let
index = parseInt(args.element.getAttribute("data-group-index"));

            let
resData = this.scheduleObj.getResourcesByIndex(index);

            if (resData.resource.name == "Basins") {

                args.element.style.marginLeft = "10" + "px";

            }

            else
if (resData.resource.name == "GeoUnits") {

                args.element.style.marginLeft = "20" + "px";

            }

            else
if (resData.resource.name == "SubGeoUnits") {

                args.element.style.marginLeft = "30" + "px";

            }

            else
if (resData.resource.name == "Facilities") {

                args.element.style.marginLeft = "40" + "px";

            }

            else {

                args.element.style.marginLeft = "50" + "px";

            }

        }

    }

Q5. You can set the height of the parent level resources using the below CSS class

.e-schedule
.e-timeline-view
.e-resource-group-cells,

.e-schedule
.e-timeline-month-view
.e-resource-group-cells,

.e-schedule
.e-resource-cells.e-parent-node

{

  height: 30px;

}

Sample: https://stackblitz.com/edit/react-kfdbva-d5puto?file=index.js,index.css

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait