Rendering Img dropdown on Grouping Data

I implemented a icon which on click triggers a dropdown, which works fine and as expected, the problem is that the space of the img is also rendering on the heder of the grouping (the icon is the lock img), and i only need it on the data content of the grouping:

How can i delete it for the group header? but nor for the rows of the inside of the groups


Heres my code:




3 Replies 1 reply marked as answer

VR Vijay Ravi Syncfusion Team December 10, 2024 07:19 AM UTC

 Hi Arturo,

We recommend using the display: none style specifically for resource cells with the .e-parent-node class. By using a precise CSS selector, you can apply styles exclusively to the parent resource cell to hide the icons. Refer to the styles shared below to achieve the desired result.
 

[app.component.html]
 

<ejs-schedule #scheduleObj width='100%' cssClass='timeline-resource-grouping' height='650px'>

</ejs-schedule>

 

[app.component.css]
 

.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-cells.e-parent-node .e-icons.e-people {

  display: none;

}


Sample link: resource header customization (forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay



AM Arturo Martinez December 11, 2024 06:02 PM UTC

i apply the scss change as you suggested but im still getting my icon added to the parent td

this is my full scss

<ejs-schedule
#scheduleObj
width='100%'
cssClass='timeline-resource-grouping'>
</ejs-schedule>


SCSS:

.schedule-block-events.e-schedule .e-timeline-view .e-appointment .template-wrap .subject {
padding: 10px 25px;
}

.schedule-block-events .subject {
text-align: center;
}

.schedule-block-events.e-schedule .template-wrap {
width: 100%;
}

.schedule-block-events.e-schedule .e-vertical-view .e-resource-cells {
height: 58px;
}

.schedule-block-events.e-block-appointment .subject,
.schedule-block-events.e-schedule .e-vertical-view .e-appointment .template-wrap .subject {
padding-top: 10px;
}

.schedule-block-events.e-schedule .e-timeline-view .e-resource-left-td,
.schedule-block-events.e-schedule .e-timeline-month-view .e-resource-left-td {
width: 170px;
}

.schedule-block-events.e-schedule .e-resource-cells.e-child-node .employee-category,
.schedule-block-events.e-schedule .e-resource-cells.e-child-node .employee-name {
padding: 5px
}

.schedule-block-events.e-schedule .employee-image {
width: 45px;
height: 40px;
float: left;
border-radius: 50%;
margin-right: 10px;
}

.schedule-block-events.e-schedule .employee-name {
font-size: 13px;
}

.schedule-block-events.e-schedule .employee-designation {
font-size: 10px;
}
.e-schedule .e-timeline-view .e-content-wrap table td {
text-align: center;
}

/*Hides Time in header*/
.timeline-resource-grouping .e-time-slots {
display: none;
}

///Extra icon added on grouping header
.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-cells.e-parent-node .e-icons.e-people {
display: none;
}


.timeline-resource-grouping.e-schedule:not(.e-device) .e-agenda-view .e-content-wrap table td:first-child {
width: 90px;
}
.timeline-resource-grouping.e-schedule .e-agenda-view .e-resource-column {
width: 100px;
}
.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-left-td,
.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-resource-left-td {
width: 100px;
}

.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-text,
.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-resource-text {
padding: 0;
margin: 0px !important;
}

.timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-cells,
.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-resource-cells {
padding: 0;
}
// #indexDiv:hover{
// background-color: rgb(109, 109, 194);
// color: white;
// }
.thumbnail:hover {
transform: scale(1.5);
}

// REMOVE TIMES BELOW RESERVATIONS

.e-schedule .e-timeline-view .e-appointment .e-time,
.e-schedule .e-timeline-month-view .e-appointment .e-time {
display: none !important;
}
// Center REservations
.e-schedule .e-timeline-view .e-appointment .e-subject,
.e-schedule .e-timeline-month-view .e-appointment .e-subject {
padding-top:12px !important;
}

.image {
width: 34px;
height: 21px;
background-size: 45px;
background-repeat: no-repeat;
}


Component.ts

isChildNode(data: any): boolean {
return data.resourceData.ClassName !== "e-parent-node";
}


VR Vijay Ravi Syncfusion Team December 12, 2024 06:13 AM UTC

Hi Arturo,

In our previous suggestion, we mentioned using the icon class selector associated with the resource cells' parent node to apply a display: none style, for example ".e-icons.e-people" effectively hiding the icon. Similarly, in your application, identify the icon class being used and apply the same approach by using the specific icon class name to hide it. This will ensure the desired icon is hidden.

 


Sample link: resource header customization (forked) - StackBlitz
 

Additionally, If does not meet your requirements, please share the issue replicating sample or replicate the issue in our shared sample to help us better understand and address your query.


Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay


Marked as answer
Loader.
Up arrow icon