Gantt set slot size using Javascript

[Matthew]

Hello,

I would like the user to have the ability to zoom in and out of a Day view.

I've added the following to the toolbar;

<Toolbar>
   <ClientTemplate>
        <a class="k-button" onclick="return ganttZoomIn(this, event)" title="Zoom In">+</a>
        <a class="k-button" onclick="return ganttZoomOut(this, event)" title="Zoom Out">-</a>
    </ClientTemplate>
</Toolbar>  

and the following javascript;

function ganttZoomIn(button, ev)
{
   var gantt = $find("<%= RadGannt1.ClientID %>");
   gantt._viewsData[0].slotSize += 10;
}

function ganttZoomOut(button, ev)
{
   var gantt = $find("<%= RadGantt1.ClientID %>");
   gantt._viewsData[0].slotSize -= 10;
}

But the changes to the slot size is not changing the Gantt.

Can the slot size be updated using javascript?

Thanks,

Matt

[Peter Milchev]

Hi Matt,

You can set the slotSize of the current view of the underlying Kendo Gantt widget and then call the repaint() method of the Gantt to update the slot sizes visually:

function ganttZoomIn(button, ev) {
    var gantt = $find("<%= RadGantt1.ClientID %>");
    gantt.get_kendoWidget().view().options.slotSize += 10;
    gantt.repaint();
}

function ganttZoomOut(button, ev) {
    var gantt = $find("<%= RadGantt1.ClientID %>");
    gantt.get_kendoWidget().view().options.slotSize -= 10;
    gantt.repaint();
}

Regards,
Peter Milchev
Progress Telerik

[Matthew]

Thank you. works perfectly