Kendo Grid UI - Column Locked not working

[Sarma]

Hi .. I am trying to lock first 3 columns in my grid and have the rest scroll horizontally as I have too many columns to display on screen. Below are the code snippets I am using but the columns are not getting locked. Please help.

 

@(Html.Kendo().Grid<BCM.CurriculumSchedule.Web.Models.StatusReports.StudentProfileHistory>()
     .Name("List")
     .Columns(columns =>
     {
         columns.Bound(u => u.DueDate).Locked(true).Lockable(false).Title("Due Date");
         columns.Bound(u => u.ReceivedDate).Locked(true).Title("Received Date");
         columns.Bound(u => u.TwoMonthNoticeSent).Locked(true).Title("60 Day Notice Sent");
         columns.Bound(u => u.OneMonthNoticeSent).Title("30 Day Notice Sent");
         columns.Bound(u => u.StudentEmailAddress).Title("Student Email");
         columns.Bound(u => u.GSYear).Title("GS Year");
         columns.Bound(u => u.OnLOA).Title("On LOA");
         columns.Bound(u => u.Program).Title("Program");
         columns.Bound(u => u.TimeLineSubmitted).Title("Timeline Submitted");
         columns.Bound(u => u.AdHocMemberPresent).Title("EO Present?");
         columns.Bound(u => u.AdHocMemberReport).Title("EO Report Received");
         columns.Bound(u => u.PermissionToWriteGiven).Title("Permission Given?");
         columns.Bound(u => u.PermissionToWriteDate).Title("Date Permission Given");
         columns.Bound(u => u.SevenYrExtensionGranted).Title("7Yr Ext Granted?");
         columns.Bound(u => u.SevenYrEffectiveDate).Title("Effective Date");
         columns.Bound(u => u.DefenseDate).Title("Defense Date");
         columns.Bound(u => u.ExtensionGranted).Title("Dean Ext Granted?");
         columns.Bound(u => u.ExtensionDateGranted).Title("Ext Date Granted");
         columns.Bound(u => u.MentorName).Title("Mentor Name");
         columns.Bound(u => u.MentorEmail).Title("Mentor Email");
         columns.Bound(u => u.MentorNotificationSentDate).Title("Mentor Notification Sent On");
         columns.Bound(u => u.ProgramAdminEmail).Title("Program Administrator Email");
         columns.Bound(u => u.PANotificationSentDate).Lockable(false).Title("Program Administrator Notification Sent On");
     })
     .Pageable(pageable => pageable
         .Refresh(true)
         .PageSizes(true)
         .ButtonCount(5))
     .DataSource(dataSource => dataSource
         .Ajax()
         .Read(read => read.Action("StudentProfileHistoryData", "StatusReports", new { id = Model.StudentId }))
         .PageSize(10)
         )
     )

[Georgi]

Hello Sarma,

Thank you for the provided code.

When using locked columns it is necessary to explicitly specify the width of each column.

For example:

columns.Bound(u => u.DueDate).Locked(true).Lockable(false).Title("Due Date").Width(200);
columns.Bound(u => u.ReceivedDate).Locked(true).Title("Received Date").Width(200);
columns.Bound(u => u.TwoMonthNoticeSent).Locked(true).Title("60 Day Notice Sent").Width(200);
columns.Bound(u => u.OneMonthNoticeSent).Title("30 Day Notice Sent").Width(200);
columns.Bound(u => u.StudentEmailAddress).Title("Student Email").Width(200);
columns.Bound(u => u.GSYear).Title("GS Year").Width(200);
columns.Bound(u => u.OnLOA).Title("On LOA").Width(200);
columns.Bound(u => u.Program).Title("Program").Width(200);
columns.Bound(u => u.TimeLineSubmitted).Title("Timeline Submitted").Width(200);
columns.Bound(u => u.AdHocMemberPresent).Title("EO Present?").Width(200);
columns.Bound(u => u.AdHocMemberReport).Title("EO Report Received").Width(200);
columns.Bound(u => u.PermissionToWriteGiven).Title("Permission Given?").Width(200);
columns.Bound(u => u.PermissionToWriteDate).Title("Date Permission Given").Width(200);
columns.Bound(u => u.SevenYrExtensionGranted).Title("7Yr Ext Granted?").Width(200);
columns.Bound(u => u.SevenYrEffectiveDate).Title("Effective Date").Width(200);
columns.Bound(u => u.DefenseDate).Title("Defense Date").Width(200);
columns.Bound(u => u.ExtensionGranted).Title("Dean Ext Granted?").Width(200);
columns.Bound(u => u.ExtensionDateGranted).Title("Ext Date Granted").Width(200);
columns.Bound(u => u.MentorName).Title("Mentor Name").Width(200);
columns.Bound(u => u.MentorEmail).Title("Mentor Email").Width(200);
columns.Bound(u => u.MentorNotificationSentDate).Title("Mentor Notification Sent On").Width(200);
columns.Bound(u => u.ProgramAdminEmail).Title("Program Administrator Email").Width(200);
columns.Bound(u => u.PANotificationSentDate).Lockable(false).Title("Program Administrator Notification Sent On").Width(200);

Could you please set the width to each column and let me know if locked columns work as expected?

I look forward to your reply.


Regards,
Georgi
Progress Telerik

[Sarma]

Hi Georgi .. Thanks for your reply. I have modified the code to below and now have a new problem. When I run it in chrome (haven't tried on other browsers), the grid loads condensed (attaching screenshot "before.jpg" and when I refresh the browser or maximize/minimize it or click on "inspect element", the grid is shown properly as shown in screenshot "after.jpg"). What can be done here to show the grid correctly in first go itself?

@(Html.Kendo().Grid<BCM.CurriculumSchedule.Web.Models.StatusReports.StudentProfileHistory>()
     .Name("List")
     .Columns(columns =>
     {
         columns.Bound(u => u.DueDate).Locked(true).Lockable(false).Title("Due Date").Width(150);
         columns.Bound(u => u.ReceivedDate).Locked(true).Title("Received Date").Width(150);
         columns.Bound(u => u.TwoMonthNoticeSent).Title("60 Day Notice Sent").Width(200);
         columns.Bound(u => u.OneMonthNoticeSent).Title("30 Day Notice Sent").Width(200);
         columns.Bound(u => u.StudentEmailAddress).Title("Student Email").Width(200);
         columns.Bound(u => u.GSYear).Title("GS Year").Width(125);
         columns.Bound(u => u.OnLOA).Title("On LOA").Width(125);
         columns.Bound(u => u.Program).Title("Program").Width(200);
         columns.Bound(u => u.TimeLineSubmitted).Title("Timeline Submitted").Width(200);
         columns.Bound(u => u.AdHocMemberPresent).Title("EO Present?").Width(200);
         columns.Bound(u => u.AdHocMemberReport).Title("EO Report Received").Width(200);
         columns.Bound(u => u.PermissionToWriteGiven).Title("Permission Given?").Width(200);
         columns.Bound(u => u.PermissionToWriteDate).Title("Date Permission Given").Width(200);
         columns.Bound(u => u.SevenYrExtensionGranted).Title("7Yr Ext Granted?").Width(200);
         columns.Bound(u => u.SevenYrEffectiveDate).Title("7Yr Ext Effective Date").Width(200);
         columns.Bound(u => u.DefenseDate).Title("Defense Date").Width(150);
         columns.Bound(u => u.ExtensionGranted).Title("Dean Ext Granted?").Width(200);
         columns.Bound(u => u.ExtensionDateGranted).Title("Ext Granted Date").Width(200);
         columns.Bound(u => u.MentorName).Title("Mentor Name").Width(200);
         columns.Bound(u => u.MentorEmail).Title("Mentor Email").Width(200);
         columns.Bound(u => u.MentorNotificationSentDate).Title("Mentor Notification Sent").Width(200);
         columns.Bound(u => u.ProgramAdminEmail).Title("Program Admin Email").Width(200);
         columns.Bound(u => u.PANotificationSentDate).Lockable(false).Title("Program Admin Notification Sent").Width(220);
     })
     .DataSource(dataSource => dataSource
         .Ajax()
         .PageSize(10)
         .Read(read => read.Action("StudentProfileHistoryData", "StatusReports", new { id = Model.StudentId }))
     )
     .Scrollable(scrollable => scrollable.Enabled(true).Height(380))
     .Reorderable(reorderable => reorderable.Columns(true))
     .Resizable(resizable => resizable.Columns(true))
     .Pageable(pageable => pageable
         .Refresh(true)
         .PageSizes(true)
         .ButtonCount(5)
     )
 )

[Georgi]

Hi Sarma,

Thank you for the update

I have created a grid with similar configuration on my end in order to reproduce the described behavior. However, the grid is initially displayed as expected.

Could you please make sure there are no custom styles that might cause the issue?

Finally, attached you will find the sample I used for testing. Please examine it and let me know what I am missing.

I look forward to your reply.


Regards,
Georgi
Progress Telerik

[Sarma]

Hi Georgi,

 Thanks for the demo. Actually my grid lies in a partial view of a tab on the web page. I found the solution. On click of the tab, i am refreshing the grid which displays it normally. Appreciate your response again.

 

Best Regards,

Sarma Maganti

function HistoryTabSelected() {
      $("#tab_3").show();
      $("#List").data('kendoGrid').refresh();
  };

[Sarma]

Could you help me mark this thread as "SOLVED" along with tags like "Google Chrome; Inspect element; Grid Display; Locked Columns" ?? Thanks in advance

[Georgi]

Hi Sarma,

Thank you for the update

Please mark the post which you consider as the anwer of the thread. Once a post is masked as an answer the thread will be automatically tagged as solved.


Regards,
Georgi
Progress Telerik