So, I have my grid and my menu and a navbar on top. I want that when I resize the browser window, it all follows and shrinks. Right now, just my menu do it. I'm not sure if it's a grid issue or not. I'll post and hopefully, someone can help me out. In the screen shots, I put what it looks like before and after. When I minimize the screen, my nav bar comes down like it's suppost to, and my menu. But my grid nor the header for my grid move with it. It just falls back and hides. I want the Managed Roles area and Grid to go down and be on the same level as the Menu and beside my Edit Roles button.
Code for my Master Page.
<body onresize="onResize()">
<div id="masterlayout" class="fixed-top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<h1 class="navbar-brand d-flex align-items-center">Div 11</h1>
<div class="container">
<ul class="nav navbar-nav">
<li></li>
<li class="nav-item nav-link mx-1">@Html.ActionLink("Home", "Index", "Home")</li>
@if (1 == 1)
{
<li class="nav-item nav-link mx-1">@Html.ActionLink("Site Admin", "RegisterUsers", "SiteAdmin")</li>
}
<li class="nav-item nav-link mx-1">@Html.ActionLink("Promotional", "Promotional", "Promotional")</li>
<li class="nav-item nav-link mx-1">@Html.ActionLink("Reports", "Contact", "Home")</li>
</ul>
</div>
@Html.Partial("_LoginPartial")
</nav>
<div style="background-color: darkgray; width: 100%; height: 10px;">
</div>
</div>
<div id="content1">
@RenderBody()
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content1").style.marginTop = height - 1 + 'px';
});
$(document).ready(function () {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
});
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content1").style.marginTop = height - 1 + 'px';
}
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
}
</script>
Code for my Menu.
@{
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<header>
</header>
<body>
<div class="sidenav">
<div id="menu" class="navbar-text">
@if (1==1)
{
@(Html.Kendo().Menu()
.Name("Menu")
.Direction(MenuDirection.Left)
.Orientation(MenuOrientation.Vertical)
.Scrollable(true)
.Items(items =>
{
items.Add().Text("Register Employees").Action("RegisterUsers", "SiteAdmin").Visible(Request.IsAuthenticated && User.IsInRole("Administrators"));
items.Add().Text("Edit Roles").Action("ManageRoles", "SiteAdmin");
})
)
}
</div>
</div>
<div id="idmain" class="main">
@RenderBody()
</div>
</body>
And the code to my Grid.
@{
ViewBag.Title = "RegisterUsers";
Layout = "~/Views/Shared/_SiteAdminLayout.cshtml";
}
<h2>Register Employees</h2>
@(Html.Kendo().Grid<Div11WebSite.Models.Users_Select_Result>
()
.Name("grid")
.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
.Selectable(selection => selection.Enabled(true).Mode(GridSelectionMode.Multiple))
.Navigatable()
.Columns(columns =>
{
columns.Bound(c => c.Employee_ID).HtmlAttributes(new {style = "height=1em"});
columns.Bound(c => c.Username);
})
.Scrollable(s => s.Height("auto"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Model(m => {
m.Id(p => p.User_Id);
m.Field(p => p.Employee_ID).Editable(true);
m.Field(p => p.Username).Editable(true);
})
.AutoSync(true)
.ServerOperation(false)
.Read(read => read.Action("Users_Read", "SiteAdmin"))
.Create("Users_Create", "SiteAdmin")
.Update(update => update.Action("Users_Update", "SiteAdmin"))
.Destroy(delete => delete.Action("Users_Delete", "SiteAdmin"))
)
.PersistSelection(true)
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Pdf();
//toolbar.Save();
toolbar.Excel();
toolbar.Custom().Text("Delete").Name("tbDestroy").IconClass("k-icon k-i-close");
})
.ClientDetailTemplateId("childGrid")
// .Events(e => e.DataBound("dataBound"))
)
<script id="pageFunctions" type="text/javascript">
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
$(document).ready(function () {
$(".k-grid-tbDestroy").on("click", function (e) {
e.preventDefault();
var grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();
kendo.confirm(kendo.format("Are you sure you wish to delete {0} records?", selectedRows.length))
.done(function () {
$.each(selectedRows, function (i, row) {
grid.removeRow(row);
})
grid.saveChanges();
});
});
});
I'm out of thoughts about it to be honest. Any help would be appreciated.
6 Answers, 1 is accepted
Hi David,
I understand the problem.
However, based on the provided information, I am not sure what code we should add in order to achieve the desired outcome.
Having said that, it would be very helpful if you can attach a sample project that replicates the scenario. I will use this project to test different approaches and provide assistance to the best of my knowledge.
I look forward to hearing from you.
Regards,
Preslav
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1
Veteran
Well, I just figured it out. Not all the way, but enough to help me. My Javascript that I put in for resizing isn't resizing the div. I also condensed the code a bit more. Made things a lot easier to navigate. I also have no idea how to attach a sample project as I've never done it before. From the looks of it, I can either stop the log in button from being wrapped to a 2nd line, or get the javascript to work where the body moves with navbar like the menu does. I have no idea why it isn't picking it up.
Here is the
<body onresize="onResize()">
<div id="masterlayout" class="fixed-top">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<h1 class="navbar-brand d-flex align-items-center">Div 11</h1>
<div class="container">
<ul class="nav navbar-nav">
<li></li>
<li class="nav-item nav-link mx-1">@Html.ActionLink("Home", "Index", "Home")</li>
@if (1 == 1)
{
<li class="nav-item nav-link mx-1">@Html.ActionLink("Site Admin", "RegisterUsers", "SiteAdmin")</li>
}
<li class="nav-item nav-link mx-1">@Html.ActionLink("Promotional", "Promotional", "Promotional")</li>
<li class="nav-item nav-link mx-1">@Html.ActionLink("Reports", "Contact", "Home")</li>
</ul>
</div >
@Html.Partial("_LoginPartial")
</nav>
<div style="background-color: darkgray; width: 100%; height: 10px;">
</div>
</div>
<div id="content1" class="main">
@RenderBody()
</div>
</body>
Here is the JavaScript.
<script type="text/javascript">
$(document).ready(function () {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content1").style.marginTop = height - 1 + 'px';
});
$(document).ready(function () {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
});
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content1").style.marginTop = height - 1 + 'px';
}
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
}
Here is the CSS.
.container {
max-width: 800px;
margin-left: 0px;
min-width: 500px;
}
.main {
margin-left: 220px;
/*font-size: 28px;
padding: 14px;
}
Rank 1
Veteran
Hello David,
You can attach a project by clicking the following button:
Further, I also believe that listening to the resize event is the correct approach. I believe that the easiest way to do that is to use the jQuery resize event handler. For example, check the first code snippet in the following article - https://api.jquery.com/resize/
Regards,
Preslav
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
I feel so bad, it wasn't even the listener that was the problem. I had both my functions named the same thing. Of course only 1 could load.
this was the original code.
<body onresize="onResize()">
<div id="menu" class="navbar-text">
<div id="content" class="main">
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
}
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content").style.marginTop = height - 1 + 'px';
}
For whatever reason, I thought it would just grab my "content" and "menu" and not worry about the name of the function itself.
Changed it to,
<body onresize="onResize(),onResize2()">
<div id="menu" class="navbar-text">
<div id="content" class="main">
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
}
function onResize2() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content").style.marginTop = height - 1 + 'px';
}
Works perfectly! Jesus Christ, what a rookie mistake. Sorry to waste your time.
Hi David,
I am glad to hear that the issue is now resolved.
Honestly speaking, I also did not notice that these functions had the same name, and the second one overrides the first.
As a final suggestion, I believe that it would be better if you merge these functions into a single handler. By doing this, you would have less JavaScript to maintain, and similar issues will not happen in the future.
Regards,
Preslav
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.