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>
I have updated the question, removed what turned out to be a Chrome warning