SelectAll checkboxs not working in app but works in kendo dojo

I have ran into an issue with selecting all checkboxes in a grid, the problem isn't so much on how to do it, the is why isn't it working in my app, but meanwhile works when I created here

I have a kendo window popping up and its content is a partialview, here is the partialview

<div class="row">
    <div class="form-horizontal">
        <div id="tasksGrid"></div>
    </div>
</div>

<script src="~/Scripts/Customjs/Orders/LoadTasksForProjectJS.js"></script>

and the script that you see becing referenced is..

$(document).ready(function () {
    LoadTasksForProject();

    $("#SelectAll").change(function () {
        var status = this.checked; 
        $(':checkbox').each(function () { 
            this.checked = status; 
        });
    });
});

function GetSelectedIds() {
    var idsToSend = [];
    var grid = $("#tasksGrid").data("kendoGrid")
    var ds = grid.dataSource.view();

    for (var i = 0; i < ds.length; i++) {
        var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
        var checkbox = $(row).find(".checkbox");
        if (checkbox.is(":checked")) {
            idsToSend.push(ds[i].ScheduleTaskID);
        }
    }
    alert(idsToSend);
}

function LoadTasksForProject() {
    $.ajax({
        type: "GET",
        url: "../Orders/GetScheduleTasks",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            ShowTasksForProject(data);
        }
    });
}

function ShowTasksForProject(tasksdata) {
    $('#tasksGrid').kendoGrid({
        noRecords: {
            template: "No Data Available"
        },
        dataSource: {
            data: tasksdata
        },
        schema: {
            model: {
                id: "ScheduleTaskID"
            }
        },
        columns: [
               { title: "<input type='checkbox' id='SelectAll' />", template: "<input type='checkbox'>", width: "30px" },
               { field: "ScheduleTaskID", title: "ScheduleTaskID", hidden: true },
               { field: "Task", title: "Task" }
        ],
        scrollable: true,
        pageable: false,
        selectable: "row"
    }).data("kendoGrid");
}

So if you take a look at the dojo I made, it is pretty much the same thing as what you see going on here. For the life of me I can't figure out why the SelectAll won't get hit when I select the uppermost checkbox, I have put an alert in it to see if I was hitting it and maybe something was wrong with the code, but no alert, I even tried having a console.log in the SelectAll change event and nothing at all.

So I am kinda confused on what I am missing, any idea's or reasons why it will work in the link provided but not on here?