Resize column widths on the fly

Asked by Blake
10 years ago.

I recently added "rowHeaderColumns" to my DayPilot Scheduler, and noticed that the resource row headers provide a dynamic resizing capability, which is awesome. Is there any way of providing that same method of resizing capability on the cells used for the events themselves? I am currently providing a work-around by including an html range object and using the value from that to control cellWidth and then invoking the update method. This works reasonably well, but allowing event cell width to be dynamically resized in the same way as the resource header rows work would be preferable.

how-to javascript

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

I've created a simple demo that uses your approach (<input type="range">):

http://javascript.daypilot.org/sandbox/scheduler/cellwidth.html

Implementation:

<div class="note">Cell Width: <input type="range" min="10" max="200" step="10" id="cellwidth" value="40" /> <span id="label">40</span></div>

<div id="dp"></div>

<script type="text/javascript">

    var dp = new DayPilot.Scheduler("dp");
    dp.cellWidth = 40;
    
    // ...
    
    dp.init();
    
    $(document).ready(function() {
        $("#cellwidth")[0].oninput = function(ev) {
            var cellwidth = parseInt(this.value);
            $("#label").html(cellwidth);
            var start = dp.getViewPort().start;  // save the original start

            dp.cellWidth = cellwidth;
            dp.update();
            dp.scrollTo(start); // reset the start position
        };
    });
    
</script>

It updates the Scheduler in real time and keeps the scrollbar at the same date/time position.

I'm afraid this is the best you can have at the moment. The full refresh using .update() is necessary because changing the width affects almost everything in the Scheduler - I don't see a way to make this much faster.

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