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

How to disable or hide the expand/collapse button on resources

Asked by Hoang Nguyen
5 years ago.

How to disable or hide the expand/collapse button on resources

Thank you very much.

Comment posted by Hoang Nguyen
5 years ago.

I am using Daypilot Scheduler

Comment posted by Hoang Nguyen
5 years ago.

Sorry but can someone please help me? thank you very much.

Answer posted by Dan Letecky [DayPilot]
5 years ago.

Sorry for the delay! You can hide it using custom CSS. For the default theme (scheduler_default) you can use something like this:

.scheduler_default_tree_image_no_children,
.scheduler_default_tree_image_expand,
.scheduler_default_tree_image_collapse {
 display: none !important;
}
Comment posted by Hoang Nguyen
5 years ago.

Thank you for your answer sir. My next question is how to toggle the hidden on/off base on a boolean. For Example, if I have several managers and each manager has several employee report to him/her. This Collapse/Expand is necessary. If I only have one manager with several employee report to him/her. The Collapse/Expand button is not necessary. If using a css, how do I pass the on/off boolean into it? Thank you very much.

Comment posted by Dan Letecky [DayPilot]
5 years ago.

If you want to hide the icons dynamically, you can use jQuery to find the elements and hide them:

$(".scheduler_default_tree_image_no_children, .scheduler_default_tree_image_expand, .scheduler_default_tree_image_collapse").hide();
Comment posted by Dan Letecky [DayPilot]
5 years ago.

Update: The jQuery call will only disable icons that are already rendered. When progressive row rendering is enabled (https://doc.daypilot.org/scheduler/progressive-row-rendering/), the additional rows will be rendered during scrolling and they will have the icons visible.

You can either turn off the progressive row rendering (which will perform well only for small number of rows) or you can add the CSS dynamically using DayPilot.sheet() helper (note that it's an internal API which is subject to change):

var sheet = DayPilot.sheet();
sheet.add(".scheduler_default_tree_image_no_children, .scheduler_default_tree_image_expand, .scheduler_default_tree_image_collapse", "display: none");
sheet.commit();
Comment posted by Hoang Nguyen
5 years ago.

Hi Dan,

I am coding my app with Angular - Ionic. I have try var sheet = DayPilot.sheet(); but property sheet() is not available on my Scheduler. Is there any other method beside jQuery or how do I add sheet() to my DaiPilot Scheduler? Thank you sir very much.

Comment posted by Dan Letecky [DayPilot]
5 years ago.

Hi Hoang,

If you want to access members that are not included in the TypeScript definitions you need to cast the object to "any" type like this:

let sheet = (DayPilot as any).sheet();
Comment posted by Hoang Nguyen
5 years ago.

Thank you sir very much. It is working as toggling off:

sheet.add(".scheduler_default_tree_image_no_children, .scheduler_default_tree_image_expand, .scheduler_default_tree_image_collapse", "display: none");

If I need to toggle it back on, how do I do it sir?

I have tried following but not working:

sheet.remove(".scheduler_default_tree_image_no_children, .scheduler_default_tree_image_expand, .scheduler_default_tree_image_collapse", "display: none");

or

sheet.delete(".scheduler_default_tree_image_no_children, .scheduler_default_tree_image_expand, .scheduler_default_tree_image_collapse", "display: none");

or

sheet.add(".scheduler_default_tree_image_no_children, .scheduler_default_tree_image_expand, .scheduler_default_tree_image_collapse", "display: true");

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.