How to get the Telerik MVC5 VS 2019 grid column headers to scroll with the content?

1 Answer 29 Views
Grid Styling
Neal
Top achievements
Rank 1
Iron
Neal asked on 29 Jun 2022, 07:47 AM | edited on 29 Jun 2022, 01:24 PM

Hi, I saw earlier posts about this, but this for an (MVC5 grid, VS 2019,  Latest version)

I have no java script errors as suggested as a solution from 2014 posts.

I load the Telerik MVC grid partial view  into a  div 'lcContent' using  $("#lcContent").load(url);

Tried it in both chrome and edge, seems the scrolling is fine if I run it stand alone (i.e. not inside the the confines of the lcContent div)

Thx

 

I have

In my _Layout file

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <link rel="shortcut icon" href="@Url.Content("~/favicon.ico")" ; />

<link href="https://cdn.kendostatic.com/2022.2.621/styles/kendo.classic-silver.min.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://cdn.kendostatic.com/2022.2.621/js/jquery.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>

and in the Index view a side bar menu (UL + Li) and a content pane, as per beneath

with

    .lcContent {
        transition: margin-left .5s;
        padding: 10px;
        height: 900px;
        width: 90%;
        display: block;
        overflow-y: hidden;
        overflow-x: hidden;
        left: 0px;
    }

 


 <style>
    button.k-button {
        background-color: darkgrey !important;
        color: forestgreen
    }

    .k-grid-toolbar {
        /* background-color: lightslategrey !important;*/
    }

    th.k-header {
        color: white;
        background-color: darkslategray !important;
    }

    div.k-grouping-header {
        background-color: gainsboro !important;
    }

    tr.k-master-row {
        background-color: white !important;
        color: blue;
    }

    tr.k-master-row:active, tr.k-master-row:hover {
        background-color: lightgrey !important;
    }

    tr.k-alt {
        color: white;
        background-color: lightcyan !important;
        color: darkblue;
    }

    span.k-icon, k-i-filter {
        background-color: gainsboro !important;
    }

    tr.k-alt:active, tr.k-alt:hover {
        color: darkblue !important;
        background-color: lightgrey !important;
    }

    input.k-input-inner {
        /* background-color: gainsboro !important;*/
    }

    span.k-filtercell {
        /*background-color: red !important;*/
    }

    th {
        background-color: lightslategray !important;
    }

    span.k-operator-hidden {
        display: none;
    }

    div.k-grid-content {
       /* height: 80% !important;*/
    }

    .k-grid tbody tr {
        line-height: 14px;
    }

    .k-grid tbody td {
        padding: 0;
    }

    .k-grid {
        overflow-y: hidden;
        height: 900px;
        min-height: 600px;
       /* width: 2700px;
        max-width: 2800px;*/
        width: 98%;
        max-width: 99%;
        padding-left: 10px;
    }

    .k-button{    }
    .k-grid-Edit{    }
    td.k-command-cell{     }
    .k-button-text{    }
    .k-filter-row{   /* has multiple th beneath it, with a span in them, with k-filter-cell class*/
    }

</style>


 <div id="lcContent" class="lcContent" > 

        <div class="text-left" style=" width: 100%;">
          @(Html.Kendo().Grid(Model)
            .Name("LeasedTenements")
            .Reorderable(reorder => reorder.Columns(true))
            .Columns(columns =>
            {
                columns.Command(command => command.Custom("Edit").Click("Edit")).Width(180);
                columns.Bound(c => c.ID).Hidden();
                columns.Bound(c => c.Lease).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
                columns.Bound(c => c.Name).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));

                columns.Bound(c => c.LocalityType).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
                columns.Bound(c => c.Locality).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));

                columns.Bound(c => c.Status).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.InternalStatus).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));

                columns.Bound(c => c.CurrentArea).Width(250).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.AreaType).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.MineralField).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.Commodity).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));

                columns.Bound(c => c.GovtOffice).Width(200);
                columns.Bound(c => c.AppliedArea).Width(200);
                columns.Bound(c => c.GrantedArea).Width(200);
                columns.Bound(c => c.AreaSurveyed).Width(100);
                columns.Bound(c => c.CurrentCommitment).Width(200);
                columns.Bound(c => c.NextYearCommitment).Width(200);
                columns.Bound(c => c.CurrentRent).Width(200);
                columns.Bound(c => c.NextYearRentAmount).Width(200);
                columns.Bound(c => c.NextYearRentAmount).Width(200);
                columns.Bound(c => c.Project).Width(200);
                columns.Bound(c => c.CostCode).Width(150);
                columns.Bound(c => c.ManagingCompany).Width(200);
                columns.Bound(c => c.Operator).Width(200);
                columns.Bound(c => c.LeaseManager).Width(200);
                columns.Bound(c => c.ResponsibleParty1).Width(200);
                columns.Bound(c => c.ResponsibleParty2).Width(200);
                columns.Bound(c => c.Region).Width(200);
                columns.Bound(c => c.TotalShares).Width(150);
                columns.Bound(c => c.Comments).Width(200);
                columns.Bound(c => c.LastUpdate).Width(10);
                columns.Bound(c => c.ByWhom).Width(150);
                columns.Bound(c => c.LinkLeaseID).Width(150);

            })
            .ToolBar(toolbar =>
            {
                toolbar.Excel();
                toolbar.Create();
                toolbar.Save();
            })

            .HtmlAttributes(new { style = "width: 99%;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(p => p.ID);
                    model.Field(p => p.ID).Editable(false);
                    model.Field(p => p.Lease).Editable(true);
                    model.Field(p => p.Lease).DefaultValue(
                        ViewData["defaultObjections"] as Demo.Mvc.ViewModels.vmTenementObjected);
                    model.Field("GrantDate", typeof(DateTime));
                    model.Field("GrantArea", typeof(int));
                })
            .Create(create => create.Action("EditingCustom_Create", "Objections"))
            .Update(update => update.Action("EditingCustom_Update", "Objections"))
            .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Objections"))
            )

         .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
         .Reorderable(reorderable => reorderable.Columns(true))

        )

</div>


   </div>


 

 

 

 

Neal
Top achievements
Rank 1
Iron
commented on 29 Jun 2022, 08:28 AM

I have updated the question, removed what turned out to be a Chrome warning

 

1 Answer, 1 is accepted

Sort by
0
Neal
Top achievements
Rank 1
Iron
answered on 30 Jun 2022, 11:56 AM

By removing my sidebar nav menu partial, and instead building that directly into the _layout file and then not using ajax,
i.e.  ( $("#lcContent").load(url);

but using an a href in my sidebar nav,  i.e.

<li class='btnLC'>
                        <span>
                            <a href="@Url.Action("TelerikList", "LeasedTenements")" style="background-color:#222222 !important;color:gainsboro;" level="1">
                                <span class="glyphicon glyphicon-none"></span>
                                Details
                            </a>
                        </span>
                    </li>

 

The grid column headers scroll correctly, the Excel export also now works again and
the inline edit (    
   .Editable(editable => editable.Mode(GridEditMode.InCell))

all work correctly.

i.e. retrieving the view via ajax creates issues,

The new markup for the _Layout file is thus:  


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    @* Add the Kendo SASS Bootstrap theme: and the Kendo bootstrap  *@
    <link href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />


    @* Add the Kendo UI scripts: *@
    <link href="https://cdn.kendostatic.com/2022.2.621/styles/kendo.classic-silver.min.css" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="https://cdn.kendostatic.com/2022.2.621/js/jquery.min.js"></script>
    <script src="https://cdn.kendostatic.com/2022.2.621/js/jszip.min.js"></script>
    <script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.all.min.js"></script>
    <script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>

    @*<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>*@

    <link rel="shortcut icon" href="@Url.Content("~/favicon.ico")" ; />
</head>


<body style="vertical-align:top; padding:0px">

    <!-- Header -->
    <div class="row" style="height: 40px; width: 100%; background-color: black; ">
        <div class="col-md-1" style="text-align:left; ">
            <button class="btn btn-default hamburger" type="button" style="display:block; padding-left:10px">
                <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
            </button>
        </div>

        <div class="col-md-11" style="text-align:center; ">
            <label style="color: mediumaquamarine; width: 200px; height: 20px; text-transform: uppercase; padding-top: 10px; font-size:16px" onclick="ToggleHide()">
                <span style="color:royalblue; text-transform: uppercase;">
                    <b>LeaseControl</b>
                </span> 2
            </label>
        </div>
    </div>


    <!-- Left Sidebar -->
    <div id="lcSideBar" class="lcNormalSideBar">

        <ul id="UL_Parent">
            <li>
                <span class="btnLCTop">
                    <strong>
                        Leases
                    </strong>
                    <span class="glyphicon glyphicon-arrow-down pull-right" aria-hidden="true"></span>
                </span>
                <ul>
                    <li class='btnLC'>
                        <span>
                            <a href="@Url.Action("TelerikList", "LeasedTenements")" style="background-color:#222222 !important;color:gainsboro;" level="1">
                                <span class="glyphicon glyphicon-none"></span>
                                Details
                            </a>
                        </span>
                    </li>
                    <li class='btnLC'>Expenditure</li>
                    <li class='btnLC'>Rent</li>
                    <li class='btnLC'>Shire</li>
                    <li class='btnLC'>Dealings</li>
                    <li class='btnLC'>Objections</li>
                    <li class='btnLC'>Group Reporting</li>
                </ul>
            </li>
            <li>
                <span class="btnLCTop">
                    <strong>
                        Agreements
                    </strong>
                    <span class="glyphicon glyphicon-arrow-down pull-right" aria-hidden="true"></span>
                </span>
                <ul>
                    <li class='btnLC'>Details</li>
                    <li class='btnLC'>Expenditure</li>
                    <li class='btnLC'>Documents</li>
                    <li class='btnLC'>Tracking</li>
                    <li class='btnLC'>Dealings</li>
                </ul>
            </li>
            <li>
                <span class="btnLCTop ">
                    <strong>
                        Actions
                    </strong>
                    @*<span class="glyphicon glyphicon-arrow-down pull-right" aria-hidden="true"></span>*@
                </span>
            </li>
            <li>
                <span class="btnLCTop">
                    <strong>
                        Contacts
                    </strong>
                    @*<span class="glyphicon glyphicon-arrow-down pull-right" aria-hidden="true"></span>*@
                </span>
            </li>
            <li>
                <span class="btnLCTop">
                    <strong>
                        Projects
                    </strong>
                    @*<span class="glyphicon glyphicon-arrow-down pull-right" aria-hidden="true"></span>*@
                </span>

            </li>
        </ul>

    </div>


    <!-- Content Body -->
    <div id="lcContent" class="content"> 
        @RenderBody()
    </div>


    <!-- Footer -->
    <footer>
        <p style="text-align:center;">&copy; @DateTime.Now.Year - Lease Control</p>
        <br />
    </footer>

    <style>

        /* The main lcContent link buttons display properties */
        .vertical-center {
            min-height: 300%; /* Fallback for browsers do NOT support vh unit */
            min-height: 300vh; /* These two lines are counted as one :-)       */
            display: flex;
            align-items: center;
        }

        .btnLCTop {
            width: 100%;
            height: 30px;
            padding-top: 15px;
            color: white;
            text-transform: uppercase;
            font-family: 'Segoe UI';
            font-size: 16px;
            font-weight: bold;
            opacity: 1.0;
            background-color: transparent;
            padding-top: 25px;
        }

        .btnLC {
            width: 100%;
            height: 25px;
            padding: 0px;
            padding-top: 10px;
            color: white;
            text-transform: uppercase;
            font-family: 'Segoe UI';
            font-size: 14px;
            font-weight: bold;
            opacity: 1.0;
            background-color: transparent;
            display: none;
        }

        .btnDisabled {
            opacity: 0.5;
        }

        .lcContent {
            /*transition: margin-left .5s;*/
            padding: 10px;
            /*            height: 900px;
            width: 90%;
            display: block;
            overflow-y: hidden;
            overflow-x: hidden;
            left: 0px;*/
            background-color: red;
            float: right;
        }

        .lcNormalSideBar {
            height: 1600px;
            width: 200px;
            float: left;
            background-color: #2f2c2d;
            padding-top: 20px;
            overflow-x: hidden;
            transition: 0.5s;
            overflow-y: hidden;
            float: left;
        }

        /* When you mouse over the navigation buttons, change their color */
        .btnLC:hover, .btnLCTop:hover {
            color: chocolate;
        }

        /* On clicked / selected set the sub-MenuItem's font color */
        .btnLC:focus, .btnLCTop:focus {
            color: chocolate;
            display: block;
        }

        li {
            padding-top: 10px;
            padding-bottom: 15px;
            text-align: left;
        }

        .liSelected {
            color: chocolate;
        }

        .hamburger {
            background-color: black !important;
            color: darkgray !important;
            padding-left: 10px;
            border: solid 0px black;
        }

        ul {
            list-style-type: none;
        }

    </style>
</body>
</html>

Anton Mironov
Telerik team
commented on 01 Jul 2022, 09:43 AM

Hi Neal,

Thank you for the shared approach.

I hope now the application is working as expected. Feel free to let me know if further assistance is needed.

For the needed behavior, the recommended approach is represented in the following article:

Here is a dojo example:

Kind Regards,
Anton Mironov

 

 

Tags
Grid Styling
Asked by
Neal
Top achievements
Rank 1
Iron
Answers by
Neal
Top achievements
Rank 1
Iron
Share this question
or