Kendo grid column lock issue

Question

I have a big problem with a Kendo grid when locking columns. The grid has two static columns and one or more columns created dynamically. Without locking any column, the grid works just fine, when i'm locking the static columns (or just one of them), the grid goes mad. I know that locking columns will create two different tables (with locked and unlocked columns) but in my case, these tables (with different divs) won't align in my page.

I tried to align them manually using CSS (display:inline-block and/or float: left) but when I resize the window, the grid comes back to the wrong form.

I attached two examples:

In the second example, the rest of the columns are situated somewhere under the page (i need to zoom out to see them).

Inserted simplified code (without locked applied)

Code for columns:

       var columns = [
{
    field: "Field_Locked1",
    title: "F1",
    editor: "",
    attributes: { style: "text-align: left;" },
    sortable: false,
    footerTemplate: "T",
    width: "30px"
    },
    {
        field: "Field_locked2",
        title: "F2",
        editable: false,
        attributes: { style: "text-align: left;" },
        template: "#=test(string)#",
        footerTemplate: "<div style='text-align: right;'>1</div><hr/><div style= 'text-align: right;'>2</div>",
        width: "370px",
        sortable: false
   }
];

   for (var i = 0; i < customColumns.length; i++) {
    var itemTab = customColumns[i];
   var dinamicColumn = {
       field: itemTab.Name,
       title: itemTab.Code,
       editable: false,
       type: "number",
       attributes: { style: "text-align: right;" },
       sortable: false,
       width: "200px",
       template: "#= test(string)#",
       footerTemplate: "<div style='text-align: right;'>1</div><hr/><div style= 'text-align: right;'>2</div>"
    };

    columns.splice(columns.length, 0, dinamicColumn);
}

Code for creating grid:

function createGridGeneric(tabElement,columns) {

    var gridModel = tabElement.templateDescription.grid;
    var idGrid = gridModel.id;
    var gridToolbal = gridModel.toolbar != null ? gridModel.toolbar:null;
    var gridFooter = gridModel.footer != null ? gridModel.footer : null;
    var hasArea = tabElement.filterArea != null ? tabElement.filterArea.visible : false;

    var grid = $("#" + idGrid).data("kendoGrid");
    if (grid != null) {
        $("#" + idGrid).empty();
    } 

    $("#" + idGrid).kendoGrid({
        autoBind: false,
        columns: columns,
        editable: false,
        filterable: false,
        groupable: false,
        selectable: false,
        sortable: false,
        scrollable: true,
        resizable: true,
        save: function(e) {
        },
        saveChanges: function(e) {
        },
        columnResize: function(e) {
            gridColumnResize(e);
        },
        databound: function(e) { }
     });
     return grid;

}