Kendo Grid UI - Column Locked not working

7 posts, 1 answers
  1. Sarma
    Sarma avatar
    4 posts
    Member since:
    Feb 2018

    Posted 09 Mar 2018 Link to this post

    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)
             )
         )
  2. Georgi
    Admin
    Georgi avatar
    659 posts

    Posted 12 Mar 2018 Link to this post

    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.
  3. Sarma
    Sarma avatar
    4 posts
    Member since:
    Feb 2018

    Posted 12 Mar 2018 in reply to Georgi Link to this post

    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)
         )
     )
  4. Georgi
    Admin
    Georgi avatar
    659 posts

    Posted 13 Mar 2018 Link to this post

    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.
  5. Sarma
    Sarma avatar
    4 posts
    Member since:
    Feb 2018

    Posted 14 Mar 2018 in reply to Georgi Link to this post

    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();
      };
  6. Sarma
    Sarma avatar
    4 posts
    Member since:
    Feb 2018

    Posted 14 Mar 2018 Link to this post

    Could you help me mark this thread as "SOLVED" along with tags like "Google Chrome; Inspect element; Grid Display; Locked Columns" ?? Thanks in advance
  7. Answer
    Georgi
    Admin
    Georgi avatar
    659 posts

    Posted 15 Mar 2018 Link to this post

    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.
Back to Top