How to change text in active area.

Asked by Byron D
3 years ago.

onBeforeRowHeaderColumnRender: function (args) {
    
let self = this
isExpaned = true;

    if (args.column.data.name === "Group") {
        args.column.areas = [{
            width: 34,
            height: 34,
            left: 50,
            top: 5,
            style:"cursor:pointer",
            text: '-',
            
            //symbol: "/includes/images/rebranding_2020/icons/dots.svg#minichevron-down-4",

            onClick: function(arg) { 
        
               if (isExpaned) {
                self.rows.collapseAll()
                arg.source.text("+");
                isExpaned = false;
                return;
               }
                arg.source.text("-");
                self.rows.expandAll();
                isExpaned = true
        
             }
            }]
    }
    //console.log(args.column.areas )
},

The above collapse and expands the rows when column[0] is clicked. However I would like to show the state of area on next click. All works except for changing the text content of the div. I have tried using arg.area.text and the originalEvent to api. I thought arg.source within the click access to the Event api. Any help?

how-to javascript

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

It is not possible to change the text of an existing active area using the Scheduler API.

The Scheduler is built on a "refresh" model - you need to update the state first and then request an update that re-renders the Scheduler (or its part). This makes the state/view synchronization easier (see also https://api.daypilot.org/daypilot-scheduler-update/).

1. First, make sure that "isExpanded" is a global variable. Do not set isExpanded = true at the beginning of onBeforeRowHeaderColumnRender.

2. In onBeforeRowHeaderColumnRender, check the isExpanded value and set the text accordingly (instead of the hard-coded '-' text).

text: isExpanded ? '-' : '+',

3. In the onClick handler, set the new isExpanded value before calling rows.expandAll()/collapseAll().

The rows.collapseAll() method will always invoke full Scheduler refresh (including the column headers).

The rows.expandAll() method is optimized and it may only update a part of the Scheduler. So it's better to replace it with this:

self.rows.all().forEach(r => r.data.expanded = false);
self.update();

That ensures the active area in the column header will be re-rendered.

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