Help with autoscroll

Hello all, im working on an MVC application using the Dhtmlx Scheduler.

I have a lot of data for my Y_Axis, which does not fit in a single div containing the scheduler.
I have items, being dropped into the scheduler, but It doesn’t seem to auto-scroll when tring to drop an item.

I tried to create a JQuery function to solve this problem, but to my luck, it doesn’t seem to be working.

Any help would be greatly appreciated!

the Divs:

<div id="upperSchedule" ondragover="allowDrop(event)"></div>
<div id="scheduler_here" ondragover="allowDrop(event)" ondrop="drop(event)" class="dhx_cal_container" >
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <input type="button" id="save" value="save" onclick="save()">
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    <div class="dhx_cal_header">
    <div class="dhx_cal_data">

    <textarea id="data" name="data">   

    @* ReSharper disable once StatementIsNotTerminated *@
    <script type="text/javascript">

        var engineers = @Html.Raw(Json.Encode(ViewBag.engineers))
        var statuses = @Html.Raw(Json.Encode(ViewBag.statusList))

        scheduler.locale.labels.timeline_tab = "Timeline";
        scheduler.locale.labels.timeline2_tab = "Timeline2";
        scheduler.locale.labels.section_custom = "Section";
        scheduler.config.details_on_create = true;
        scheduler.config.details_on_dblclick = true;
        scheduler.config.xml_date = "%Y-%m-%d %H:%i";
        scheduler.config.limit_view = false;
        scheduler.config.mark_now = false;

        var colors = [
            { key: 'Black', label: 'Black' },
            { key: 'Red', label: 'Red' },
            { key: 'DarkGreen', label: 'Green' },
            { key: 'Orange', label: 'Orange' },
            {key: 'Blue', label: 'Blue'}

        scheduler.config.lightbox.sections = [
            { name: "description", height: 43, map_to: "text", type: "textarea", focus: true },
            { name: "color", height: 20, type: "select", options: colors, map_to: "color" },
            { name: "status", height: 20, type: "select", options: statuses, map_to: "status"},
            { name: "time", height: 72, type: "time", map_to: "auto" }

            name: "timeline",
            x_unit: "minute",
            x_step: 30,
            x_start: 16,
            x_date: "%H:%i",
            x_size: 24,
            x_length: 48,
            y_unit: engineers,
            event_dy: 'full',
            y_property: "engineer_id",
            render: "bar"

        //Data to save when writing to XML
        scheduler.data_attributes = function () {
            return [
                ["id"], ["start_date", scheduler.templates.xml_format], ["end_date", scheduler.templates.xml_format], ["text"],
                ["engineer_id"], ["color"], ["status"]

        scheduler.attachEvent("onAfterLightbox", function(){

            var events = scheduler.getEvents();

        scheduler.attachEvent("onYScaleClick", function (index, section, e) {

        scheduler.attachEvent("onLimitViolation", function (id, obj) {
            alert("This is not a valid time period.");

        scheduler.attachEvent("onEmptyClick", function (date, e){
            var info = scheudler.getActionData(e);

        //Days: monday - friday, Zones/Hours: 7pm - 12am
            days: [1, 2, 3, 4, 5],
            zones: [19 * 60, 24 * 60],
            sections: {
                timeline: [020602, 010201, 1406210621679]

        scheduler.init("scheduler_here", new Date(), "timeline");

        function save() {
            var url = "/Home/Save"
            var xml = scheduler.toXML();

                url: url,
                type: "POST",
                dataType: 'json',
                async: false,
                data: "{'xmlString':'" + xml + "' }",
                contentType: 'application/json; charset=utf-8',
                //success: alert("File Saved in C:\\ Drive as Tasks.xml")

        scheduler.parse(document.getElementById("data").value, "xml");
<div id="lowerSchedule" ondragover="allowDrop(event)"></div>

JQuery Function:

function allowDrop(e) {


    function drop(e) {
        var p = e;
        var info = scheduler.getActionData(e);
        scheduler.addEventNow({ start_date:, engineer_id: info.section });

        over: function(event, ui){
                direction: "up",
                step: 150,
                scroll: true
        out: function(event, ui){

        over: function(event, ui){
                direction: "down",
                step: 150,
                scroll: true
        out: function(event, ui){

try attaching autoscroll to the data area of the scheduler, #scheduler_here .dhx_cal_data” instead of #scheduler_here

Thank you for the suggestion, but the resource script I was using didn’t seem to work.
Now I’m looking for an alternative solution.

If you have any suggestions, I’d be glad to hear them.