Unexpected behaviour from checkbox template in grid after grid is destroyed and repopulated

I am still running into an issue with my grid's checkbox template, I thought I had it fixed before but I was wrong. So whats happening is when I check a checkbox and click the edit button, my window pops up as expected and when I close the window, I destroy the grid, repopulate the grid and then the window closes. No problem..

So then I check another checkbox, so I can edit another record and no matter what checkbox i check, the checkbox in the first row always gets checked again and I can't figure out why this is happening, it doesnt make any sense to me

The code in question is this...

var vendorGrid,
    CreateVendorGrid = function (newData) {
    $("#Vendor-Grid").kendoGrid({
        dataSource: {
            data: newData
        },
        schema: {
            model: {
                fields: {
                    VendorID: { type: "number" }
                },
            }
        },
        filterable: {
            mode: "row"
        },
        columns: [
            {
                template: "<input name='Selected' class='checkbox' type='checkbox'>",
                width: "30px"
            },
            {
                field: "VendorName",
                title: "Vendor",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            {
                field: "Email",
                title: "Email",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            {
                field: "Phone",
                title: "Phone",
                filterable: false
            },
            {
                field: "City",
                title: "City",
                filterable: false
            }],
        scrollable: true,
        sortable: true,
        pageable: {
            pageSize: 20
        },
        selectable: "row",
        height: $("#Vendor-Grid").closest(".col-height-full").height()-60,
        change: function (e) {
        }
    }).data("kendoGrid");
}

//This to get the data to populate the grid

function GetVendorGridData() {
    kendo.ui.progress($("#Vendor-Grid"), true);
    $.ajax({
        type: "GET",
        url: URLParam.GetVendorsForGrid,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            CreateVendorGrid(data);
            kendo.ui.progress($("#Vendor-Grid"), false);
        }
    });
}

//This is part of my script in my popup window for closing the window 

$("#btnCloseVendorEditor").click(function () {
    RefreshVendorGrid();
    GetVendorGridData();
    CloseTheWindow();
});

function RefreshVendorGrid() {
    var theGrid = $('#Vendor-Grid').data('kendoGrid');
    theGrid.destroy();
}

This has been driving me nuts from yesterday, I'm lost.