This is a migrated thread and some comments may be shown as answers.

Kendo Grid UI - Column Locked not working

6 Answers 182 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sarma
Top achievements
Rank 1
Sarma asked on 09 Mar 2018, 03:28 PM

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)
         )
     )

6 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 12 Mar 2018, 08:51 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sarma
Top achievements
Rank 1
answered on 12 Mar 2018, 02:08 PM
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)
     )
 )
0
Georgi
Telerik team
answered on 13 Mar 2018, 11:48 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sarma
Top achievements
Rank 1
answered on 14 Mar 2018, 05:52 PM

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();
  };
0
Sarma
Top achievements
Rank 1
answered on 14 Mar 2018, 05:54 PM
Could you help me mark this thread as "SOLVED" along with tags like "Google Chrome; Inspect element; Grid Display; Locked Columns" ?? Thanks in advance
0
Accepted
Georgi
Telerik team
answered on 15 Mar 2018, 12:11 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Sarma
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Sarma
Top achievements
Rank 1
Share this question
or