Frozen column header missing on Kendo Grid

5 posts, 0 answers
  1. Leah
    Leah avatar
    5 posts
    Member since:
    Apr 2018

    Posted 30 Apr 2018 Link to this post

    Hi,

    I was trying to frozen my first column on Kendo Grid:

                @(Html.Kendo().Grid<AssortmentResult>()
                                .Name("transomGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(d => d.Style).Width(100).Locked(true).Lockable(false).Filterable(false);
                                    columns.Bound(d => d.StyleOption).Width(110).Filterable(false);
                                    columns.Bound(d => d.WidthDescription).Title("Width").Width(100).Filterable(true);
                                    columns.Bound(d => d.DoorCollectionCode).Width(150).Filterable(true);
                                    columns.Bound(d => d.GlassDesign).Width(150).Filterable(true);
                                     columns.Bound(d => d.DealerMarkupWithCommission).Width(150).Filterable(false);
                                    columns.Bound(d => d.FlatRate).Width(150).Filterable(false);
                                    columns.Bound(d => d.FinalRetailPrice).Width(150).Filterable(false);
                                    columns.Bound(d => d.DoubleDeduct).Width(150).Filterable(false);
                                })
                            .DataSource(d => d
                                .Ajax()
                                .PageSize(500)
                                .Read(read => read.Action("DisplayTransoms", "Existing", new { area = "Assortment", assortmentId = (int)ViewData["assortmentId"] }))
                            )
                        .Scrollable(scrollable => scrollable.Height(540))
                        .Reorderable(reorderable => reorderable.Columns(true))
                        .Resizable(resizable => resizable.Columns(true))
                        .Filterable(filterable => filterable
                            .Extra(false)
                            .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts with")
                                    .IsEqualTo("Is equal to")
                                    .IsNotEqualTo("Is not equal to")
                                ))
                            )
                        .Pageable()
                        .Sortable()

    )

    But when rendered, the column header of the first column is missing but its content is being displayed which make the header and the content of the grid not even. 

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2483 posts

    Posted 02 May 2018 Link to this post

    Hello Leah,

    The provided code seems correct and the Grid column should be locked as expected.  I tried to replicate the problematic behavior in our online example, however, I was not able to. 

    Would you open the browser console and see if there are any errors listed there? In case there are that can point us in the right direction. It would be great if you can send us a runnable sample where the issue is replicated. This will enable us to examine the behavior locally and look for its cause.


    Regards,
    Viktor Tachev
    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. Leah
    Leah avatar
    5 posts
    Member since:
    Apr 2018

    Posted 02 May 2018 Link to this post

    Hi Viktor,

    There is no error showing in the control. But when I reordered the locked column to be second(just trying my luck if it works), it is already working as expected.

    Thanks for replying.

  4. Leah
    Leah avatar
    5 posts
    Member since:
    Apr 2018

    Posted 02 May 2018 Link to this post

    Hi Viktor,

    No errors listed in the browser console. But when I reordered the locked column to be second(I was just trying my luck if it works), it is already working as expected. So I guess, just maybe, the locked column should not be in the first column. 

    Thanks for replying.

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2483 posts

    Posted 04 May 2018 Link to this post

    Hello Leah,

    I am glad to hear that you have the functionality working as expected. 

    With that said, the order of the columns should not have effect when locking them. The locked columns would always move to the left side of the Grid. 

    In case the issue reappears please send us a runnable sample where it is replicated so we can examine it locally.

    Regards,
    Viktor Tachev
    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