We get results like the attached "LockingNotWorking" snip, with locking: true. On rare occasions it works more or less, i.e. the locked and unlocked columns show up, but different column heights. If you you use the tiny scroll bar and start to resize a column it will snap into a correct format. The attached "NoLocking" snip shows a normal view with no columns locked. Here's the code:
<div id="orcaangulargrid" ng-app="orcaGridApp" ng-controller="OrcaGridController">
<div kendo-grid id="grid" k-options="gridOptions" k-ng-delay="gridOptions" class="expand-vertical" }></div>
</div>
angular.module("orcaGridApp", ["kendo.directives"]).controller("OrcaGridController", function ($scope) {
$scope.gridOptions = {
sortable: true,
filterable: true,
pageable: { pagesize: 25, pagesizes: [25, 50, 100, 500] },
navigatable: true,
editable: true,
enabled: true,
scrollable: true,
resizable: true,
height: 550,
dataSource: {
transport: {
read: {
url: "/DataSolutions/Grid/Read/" + formId + "?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
type: "POST",
},
update: {
url: "/DataSolutions/Grid/Update/" + formId + "?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
type: "POST"
},
create: {
url: "/DataSolutions/Grid/Create/" + formId + "?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
type: "POST"
}
},
autoSync: true,
batch: true,
schema: {
model: {
id: "ContextId",
fields: {
ContextId: { editable: false, type: "" }
, ContextName: { editable: false, type: "" }
, m_94: { editable: false, type: "" }
, m_96: { editable: false, type: "" }
, m_76: { editable: false, type: "" }
, m_98: { editable: false, type: "" }
, m_77: { editable: false, type: "" }
, m_330: { editable: false, type: "" }
, m_89: { editable: false, type: "" }
, m_93: { editable: false, type: "" }
, m_91: { editable: false, type: "" }
}
},
data: "data",
total: "total"
},
pageSize: 25,
serverPaging: true
},
columns: [
{ title: 'Practice Name', width: 150, filterable: true, field: 'ContextName', headerAttributes: { style: 'white-space: normal' }, template: '<span class="locked-column">#=ContextName#/></span>', locked: true }
//{ title: 'Practice Name', field: 'ContextName', width: 150, editable: true, filterable: false, sortable: true, locked: true, template: '<span class="locked-column">#=ContextName#/></span>', headerAttributes: { style: 'white-space: normal' } }
, { title: 'Practice Address', field: 'm_94', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: 'Practice City', field: 'm_96', width: 200, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: 'WTF?', field: 'm_76', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: '*Practice Zip', field: 'm_98', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: 'What The Hell?', field: 'm_77', width: 200, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: 'Other work organization type', field: 'm_330', width: 500, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: 'Report Recipient Email', field: 'm_89', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: '200', field: 'm_93', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
, { title: 'Observed Fax Number', field: 'm_91', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }]
};
})
3 Answers, 1 is accepted
I am afraid the mentioned "LockingNotWorking" and "NoLocking" attachments are missing. Can you please make sure that all prerequisites, listed in the following section of our documentation are met:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#locked-columns
I have prepared a simple example, illustrating a resizable Grid with locked columns working as expected withi AngularJS:
http://dojo.telerik.com/uHOpu/2
If stripping the custom styles and logic does not resolve the issue, please send us an isolated runnable project, similar to the one above, so we can inspect it further, and determine what might be causing the undesired behavior. Thank you in advance.
Regards,
Dimiter Topalov
Telerik by Progress
Rank 1
I'm reattaching the 2 .png files. The really frustrating thing is that sometimes the locking works, and sometimes if you refresh the page it works, so I think there is a timing related issue as to when the tables for the locked and unlocked columns are created. I tried catching the dataBound event and doing a resize then, but that didn't help.
A couple of other data points: the column locking seems to work better on a grid where the data is returned more slowly. We have one datasource that needs to do some extensive calculations before returning and that works most of the time. Also, we get some variations of the bad results - i.e.we get the columns but the locked and unlocked row sizes are different.
BTW, when we get the result shown in LockingNotWorking.PNG. file, if you use the tiny scroll bar to scroll over and start to resize the first column, all the columns pop into proper format.
Please try calling the Grid's resize method with a true argument:
http://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#individual-widget-resizing
In addition, if the Grid is placed inside a container that changes its visibility or dimensions, the resize() method should be executed only after the Grid has become visible and the overall container layout has been set.
If the above guidelines do not help to produce the desired result, we will need a live URL or an isolated runnable example in order to find out what exactly causes the problem and suggest how to resolve it.
Regards,
Dimo
Telerik by Progress