Kendo Grid Column Locking not working

[boconne]

We are creating grids dynamically using knockout-kendo. All the functionality works except column locking. When we lock the columns, the locked column gets out of sync with the unlocked columns, and is missing or truncated, or else all of the columns are squished together in the grid.

[bmsmg]

You should provide a jsfiddle, or at least sample code. It might help you find your issue along the way.

[boconne]

Here's the grid code:

<div id="OrcaGrid1155" height="100%" data-bind="kendoGrid: {data: dataSource1155, columns: [{title: 'Practice Name', field: 'ContextName', width: 150, editable: true, sortable: true, locked: true, lockable: false, headerAttributes: { style: 'white-space: normal' } } ,{title: 'Practice Address', field: 'm_94', width: 100, editable: true, sortable: false, headerAttributes: { style: 'white-space: normal' } } ,{title: 'Practice City', field: 'm_96', width: 100, editable: true, sortable: false, headerAttributes: { style: 'white-space: normal' } } ,{title: '<font color=\'red\'>*</font>Practice State', field: 'm_97', width: 100, editable: true, sortable: false, headerAttributes: { style: 'white-space: normal' } , editor: $root.OBSSTATEDropDownEditor } ,{title: '<font color=\'red\'>*</font>Practice Zip', field: 'm_98', width: 100, editable: true, sortable: false, headerAttributes: { style: 'white-space: normal' } } ,{title: '<font color=\'red\'>*</font>What type of organization do you work for?', field: 'm_329', width: 200, editable: true, sortable: false, headerAttributes: { style: 'white-space: normal' } , editor: $root.OBSWorkOrgDropDownEditor } ,{title: 'Other work organization type', field: 'm_330', width: 100, editable: true, sortable: false, headerAttributes: { style: 'white-space: normal' } } ,{title: 'Report Recipient Email', field: 'm_89', width: 100, editable: true, sortable: false, headerAttributes: { style: 'white-space: normal' } } ], toolbar: [{name:'save', text: 'Save'}, {name: 'create', text: 'Add Practice'}, ], editable: true, pageable: { pageSize: 10 }, dataBinding: onDataBinding1155, navigatable: true, sortable:true, filterable: true, scrollable: true, enabled: enabled }"></div>

[boconne]

Here's the datasource code, which is contained in a partial view:

` self.dataSource@(Model.FormId) = new kendo.data.DataSource({
transport: {
read: {
url: "/DataSolutions/Grid/Read/@(Model.FormId)?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId + "&isRuleViolation=" + isRuleViolation,
type: "POST",
},
update: {
url: "/DataSolutions/Grid/Update/@(Model.FormId)?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
type: "POST"
},
create: {
url: "/DataSolutions/Grid/Create/@(Model.FormId)?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
type: "POST"
}
},
requestStart: function (e) {
if (e.type == "read")
{
self.success("Loading Data!");
}
},
requestEnd: function (e) {
if (e.type == "read")
{
self.success("Loading Data!");
}
},

            change: function (e) {
            if (e.action == "sync")
            {
            self.success("");
            self.success("Save Success!");
            e.items.forEach(function(i) {
            //HACK.  For some reason I cannot communicate the new ContextID back to the browser
            //So I have to refresh the whole dang page!!!!
            if (i.ContextId == 0)
            {
                self.dataSource@(Model.FormId).page(1);
                }
            });
            }
            },

            error: function (e, status) {
            self.error("");
            self.error(e.errorThrown);
            },
            batch: true,
            schema: {
            errors: function(e) {
            if (e.Errors) {
            self.error("");
            self.error(e.Errors);
            throw e;
            }
            },
            model: {
            id: "ContextId",
            fields: {

@if(Model.Grids.Count() != 0)
{
foreach (var gc in Model.Grids.FirstOrDefault().GridColumns)
{
var separator = gc.EntityName.IndexOf("");
var columnName = separator < 0 ? gc.EntityName : gc.EntityName.Substring(separator + 1);
var fieldName = gc.EntityId < 1 ? columnName : "m" + gc.EntityId.ToString();

                <text>
                    @(fieldName): {
                    @{
                var needValidator = true;
                var customRegex = "";
                var validatorMessage = "";
                switch ((Orca.Core.Data.MetricTypeEnum)gc.ColumnType)
                {
                    case Orca.Core.Data.MetricTypeEnum.Integer:
                        customRegex = @"/^\d+$/";
                        validatorMessage = "Invalid integer. Options include whole numbers only";
                        break;
                    case Orca.Core.Data.MetricTypeEnum.Decimal:
                        customRegex = @"/^\d*\.?\d*$/";
                        validatorMessage = "Invalid number";
                        break;
                    case Orca.Core.Data.MetricTypeEnum.Dollar:
                        customRegex = @"/^\(?-?\$?-?(?=\(.*\)|[^()]*\)?$)\(?\d{1,3}((,?\d{3})+)?(\.\d\d?)?\)?$/";
                        validatorMessage = "Invalid currency";
                        break;
                    case Orca.Core.Data.MetricTypeEnum.Percent:
                        customRegex = @"/^100(\.[0-4][0-9]?)?$|^100(\.50?)?$|^100(\.0{0,2}?)?$|^\d{0,2}(\.\d{0,2})?$/";
                        validatorMessage = "Invalid percentage: options include: 0.00 - 100.50";
                        break;
                    default:
                        needValidator = false;
                        break;
                }
                    }

                    @if (needValidator)
                    {
                        <text>
                            validation: {
                            @(fieldName)validation: function (input) {
                            if (input.is("[name='@(fieldName)']") && input.val() != "") {
                            input.attr("data-@(fieldName)validation-msg", "@(validatorMessage)");
                            return @(customRegex).test(input.val());
                            }
                            return true;
                            }
                            },
                        </text>
                    }
                    @if (gc.IsEditable)
                    {
                        <text>
                            editable: true,
                        </text>
                    }
                    else
                    {
                        <text>
                            editable: false,
                        </text>
                    }
                    type:""
                    },
                </text>
            }
            }
            },
            parameterMap: function (data, type) {
            if (type !== "read") {
            return kendo.stringify(data);
            }
            }
            },
            data: "data",
            total: "total"
            },
            pageSize: 20,
            serverPaging: true, 
            serverFiltering: true 
            });

`

[boconne]

This all works fine, except for the column locking.