2
У меня есть проект asp.net MVC, используя самую последнюю версию элементов управления Telerik. У меня есть общий вид с заголовком вверху, меню с левой стороны и нижний колонтитул внизу. В середине - это раздел, в котором я использую тег @RenderBody, чтобы показать основную часть страницы. В этом теле находятся элементы управления Telerik: сетки, отчеты, выпадающие окна, текстовые поля и т. Д. На представлениях с сетками и отчетами я не могу поддерживать нижний колонтитул внизу. Когда в нижней части окна есть сетка, нижний колонтитул либо находится под сеткой (если она маленькая), а не внизу страницы; или нижний колонтитул выталкивается со страницы (если сетка большая). Для отчетов они идут прямо поверх нижнего колонтитула или закрывают нижний колонтитул. Я использовал этот тип нижнего колонтитула без каких-либо проблем, но я не могу понять, как заставить их работать с элементами Telerik, особенно потому, что они все взаимодействуют с нижним колонтитулом по-разному. Я рассмотрел некоторые другие вопросы, но ничего не работает для страницы с сетками Telerik и отчетами.Как получить нижний колонтитул, расположенный в нижней части страницы при использовании элементов управления Telerik?
Как я могу получить нижний колонтитул в нижней части страницы при использовании сетки Telerik и отчетов?
Вот что я хотел бы видеть: 
Вот примеры того, что я вижу: Footer оттолкнулся экран сеткой Telerik. 
Нижний колонтитул ниже сетки Telerik, но не в нижней части страницы. 
Отчет Telerik выталкивает нижний колонтитул со страницы. 
Отчет Telerik охватывает нижний колонтитул. 
Вот код для общего просмотра:
@using App_Code
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/structure-main.css" />
<link rel="stylesheet" href="~/Content/site.css" />
<link rel="stylesheet" href="~/Content/structure-main.css" />
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/scroller.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<style>
.menu ul li a {
list-style: none !important;
display: inline-block !important;
height: 50px !important;
vertical-align: middle !important;
text-align: center;
width: 100px !important;
font-weight: bold;
padding-top: 35px !important;
}
.menu ul li {
text-align: center;
}
html {
background-color: white;
}
.roundedButton {
font-size: 1em !important;
padding: 4px !important;
margin-right: 4px !important;
background-color: #d3dce0 !important;
border: 1px solid #787878 !important;
cursor: pointer !important;
color: #333 !important;
text-decoration: none;
font-weight: bold;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
html {
background-color: white;
}
footer {
height: 40px !important;
width: 100% !important;
background-color: black !important;
color: #555 !important;
position: static !important;
bottom: 0px !important;
}
.mainPage {
overflow: hidden;
}
</style>
</head>
<body>
<header>
<div class="content-wrapper">
<div>
<img style="padding-left: 50px; width: 162px; height: 70px;" src="../Images/logo.png" />
<div style="float: right;">
Welcome @Html.Raw(Session["CurrUserName"])
@Html.ActionLink("Logout", "Login", null, new { @class = "roundedButton" })
</div>
</div>
</div>
</header>
<div style="float: none;">
<div class="TransitionImage-Box transition-image-desktop skrollable skrollable-between" data-bottom-top="background-position: 50% -50%;" data-top-bottom="background-position: 50% 20%;" style="background-image: url(http://imavex.vo.llnwd.net/o18/clients/da-lubricant/images/Transition_Image/transition_image.jpg); background-attachment: fixed; background-position: 50% -19.3654%;"></div>
<div class="TransitionImage-Box transition-image-tablet" style="background-image: url('http://imavex.vo.llnwd.net/o18/clients/da-lubricant/images/Transition_Image/transition_image.jpg');"></div>
</div>
<div class="mainPage">
@RenderSection("styles", required: false)
@RenderSection("scripts", required: false)
<table style="margin: 0; margin-top: 0;">
<tr>
<td valign="top">
<table>
<tr>
<td>
<br />
<br />
</td>
</tr>
</table>
<div class="menu">
@(Html.Kendo().Menu()
.Name("Menu")
.Orientation(MenuOrientation.Vertical)
.HtmlAttributes(new { style = "height: 100%;" })
.Items(items =>
{
items.Add().Text("Oil Analysis Reports").HtmlAttributes(new { @class = "menuItem" }).Action("OAR_Selection", "Home");
items.Add().Text("Field Sample Reports").HtmlAttributes(new { @class = "menuItem" }).Action("FieldSampleReports", "Home");
items.Add().Text("Fleet Reports").HtmlAttributes(new { @class = "menuItem" }).Action("FleetReports", "Home");
items.Add().Text("Missed Units").HtmlAttributes(new { @class = "menuItem" }).Action("MissedUnits", "Home");
items.Add().Text("Help").HtmlAttributes(new { @class = "menuItem" }).Action("Help", "Home");
}))
</div>
</td>
<td style="padding: 0px; float: left;">
<section class="content-wrapper clear-fix">
@RenderBody()
</section>
</td>
</tr>
</table>
</div>
<footer>
<div style="text-align: center;">
<p>
© @DateTime.Now.Year All rights reserved. Performance Engineered Lubricants
</p>
</div>
</footer>
Вот код для одного из просмотров:
@using MyProject.App_Code
@model MyProject.Models.ModelCustomerDashboard
@{
ViewBag.Title = "Customer Dashboard";
Layout = "~/Views/Shared/_Layout_User.cshtml";
}
<style>
.cartTable td {
border: 1px solid black;
padding: 0;
}
.cartTable thead {
background-color: #1A78C2;
}
a {
text-decoration: none;
}
</style>
@using (Html.BeginForm("CustomerDashboard", "Home"))
{
<div class="breadcrumb">
@Html.Raw(@ClsUtility.GetCurrentCrumb("Customer Dashboard"))
</div>
if (@ViewBag.Message != null && @ViewBag.Message != "")
{
<div id="divErrorMessage" style="color: #1A78C2;">
<br />
@Html.Raw(@ViewBag.Message)
</div>
<br />
<div style="clear: both">
<br />
</div>
}
<div style="text-align: center">
<table style="width: 100%;">
<tr>
<td>
Oil Analysis Dashboard
</td>
</tr>
<tr>
<td>
Location:
@(Html.Kendo().DropDownListFor(m => m.ddLocation)
.Name("ddLocation")
.HtmlAttributes(new { style = "width: 500px;", onchange = "onChange_ddLocation(this)" })
.OptionLabel("Select from List")
.DataTextField("LocationName")
.DataValueField("LocationCode")
.BindTo(Model.locations)
)
</td>
</tr>
</table>
</div>
<div id="divMain" style="text-align:center;">
<table style="width: 100%;">
<tr>
<td>
<table>
<tr>
<td style="width: 50%">
Samples Processed:
@(Html.Kendo().DropDownListFor(m => m.ddTimeframe)
.Name("ddTimeframe")
.HtmlAttributes(new { style = "width: 250px;", onchange = "onChange_ddTimeframe(this)" })
.OptionLabel("Select a timeframe")
.DataTextField("text")
.DataValueField("value")
.BindTo(Model.timeframe)
)
</td>
</tr>
<tr>
<td style="width: 50%">
<div class="chart-wrapper">
@(Html.Kendo().Chart<MyProject.Models.ModelSample>()
.Name("chartSamplesProcessed")
.Legend(legend => legend
.Visible(true)
)
.DataSource(datasource => datasource
.Read(read => read.Action("ReadSamplesProcessed", "Home", new { ddTimeframe = Model.ddTimeframe, ddLocation = Model.ddLocation, custNo = Model.custNo })))
.Series(series => series.Pie(model => model.value, model => model.category, model => model.color)
.Labels(labels => labels
.Template("#= value#%")
.Background("transparent")
.Visible(true)
)
.StartAngle(0)
)
.Tooltip(tooltip => tooltip
.Visible(true)
)
.ChartArea(x => x.Height(300))
)
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr style="text-align:left;">
<td>
Most Recent OARs
</td>
</tr>
<tr>
<td>
@(Html.Kendo().Grid<MyProject.Models.ModelSample>().Name("gridMostRecentOARs")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(2)
.Read(read => read.Action("ReadMostRecentOARs", "Home", new { ddLocation = Model.ddLocation, custNo = Model.custNo }))
)
.Columns(columns =>
{
columns.Bound(m => m.dateTaken).Title("Date Taken").Format("{0:MM/dd/yyyy}");
columns.Bound(m => m.unitNumber).Title("Unit Number");
columns.Bound(m => m.origLocationName).Title("Location");
columns.Bound(m => m.customerNotes).Title("Notes");
})
.Sortable()
.Resizable(resize => resize.Columns(true))
)
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left">
Samples Received, Now in Process
</td>
</tr>
<tr>
<td colspan="2">
@(Html.Kendo().Grid<MyProject.Models.ModelSample>().Name("gridSamplesReceived")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.analysisID))
.Batch(true)
.Read(read => read.Action("ReadSamplesReceived", "Home", new { ddLocation = Model.ddLocation, custNo = Model.custNo }))
)
.Columns(columns =>
{
columns.Bound(m => m.origLocationName).Title("Location");
columns.Bound(m => m.unitNumber).Title("Unit Number");
columns.Bound(m => m.compartmentName).Title("Compartment");
columns.Bound(m => m.dateTaken).Title("Date Taken").Format("{0:MM/dd/yyyy}");
columns.Bound(m => m.dateReceived).Title("Date Received").Format("{0:MM/dd/yyyy}");
columns.Bound(m => m.customerNotes).Title("Notes");
})
.Sortable()
.Pageable()
.Resizable(resize => resize.Columns(true))
)
</td>
</tr>
</table>
</div>
@Html.HiddenFor(m => m.dropDownSource)
@Html.HiddenFor(m => m.custNo)
}