Rank 1
Iron
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>
1 Answer, 1 is accepted
Rank 1
Iron
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;">© @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>
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
I have updated the question, removed what turned out to be a Chrome warning