This is a migrated thread and some comments may be shown as answers.

When I minimize my screen, my grid doesn't shrink.

6 Answers 16 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Veteran
David asked on 27 Aug 2020, 10:19 PM

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

Sort by
0
Preslav
Telerik team
answered on 31 Aug 2020, 12:16 PM

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).

0
David
Top achievements
Rank 1
Veteran
answered on 31 Aug 2020, 10:25 PM

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;
}

 

 

0
David
Top achievements
Rank 1
Veteran
answered on 01 Sep 2020, 07:08 PM
So, I figured out that because I use oneresize in the body, my Div doesn't take the call to resize. I either need to change from a Div to something else, or create a "listener" in the div to listen for the resize function. 
0
Preslav
Telerik team
answered on 02 Sep 2020, 03:09 PM

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/.

0
David
Top achievements
Rank 1
Veteran
answered on 02 Sep 2020, 09:24 PM

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. 

0
Preslav
Telerik team
answered on 03 Sep 2020, 12:26 PM

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/.

Tags
Grid
Asked by
David
Top achievements
Rank 1
Veteran
Answers by
Preslav
Telerik team
David
Top achievements
Rank 1
Veteran
Share this question
or