Questions on UI for ASP.NET MVC Forum

6 answers

1.3K+ views

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

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.

Grid

answered on 03 Sep 2020

3 answers

147 views

How to prevent User / Hide Scroll bars in the Editor ?

Hello,

I have a custom Template Editor and i want to place the items next to each other in the Editor.

after 2 days searching for an answer .. i did this :

i changed the width of the container and the Window in the scheduler_Editor.Edit()

e.container.find('.k-edit-form-container').css("width", "900px");

e.container.closest('.k-window').css("width", "900px");

e.container.closest('.k-window').css("height", "750px");

then i gave every Item a css style:

style="float:left; position:relative;left:400px;top:110px;"

so now it's not responsive (which is normal after adding that style).

but this, i can solve by doing some css tricks or if you guys have a better way , please tell me.

The real Problem that i haven't found an answer for, is that now i have scroll bars in the Editor !!

and i want to get rid of them but i can't find anyway online !

i'll attach a picture of how the Editor looks like now

So i need to know how to hide these scroll bars and how to prevent User to scroll in the Editor !

Thanks in advance

Scheduler

answered on 03 Sep 2020

2 answers

151 views

scroll diagram

Hi,

I have searched with no luck so far if it is possible to scroll (with horizontal and vertical scrollbars) a large diagram.

thanks for any help

Ray

Diagram

answered on 02 Sep 2020

2 answers

69 views

Kendo Grid Exort

Hello,
We used Kendo controls in our MVC project. For security reasons, we need conditional disable the Grid export functionality in server side code. Does anyone have an idea for that? Thanks in advance.

Grid

answered on 02 Sep 2020

1 answer

11.2K+ views

Grid column DateTime filter format

The filter for a DateTime column of an ASP.NET MVC grid is in the US format of MM/DD/YYYY HH:MM. I would like the date to be shown in the UK format of DD/MM/YYYY. I have seen similar requests, but these are from 2013.

Are there any newer approaches to getting the filter to show the date format as DD/MM/YYYY?

Regards,

Shawn

Grid

answered on 01 Sep 2020

6 answers

1.2K+ views

New Search panel and datetime

Hello. I'm having some trouble getting the new grid search panel to work. The example on the demos is pretty basic and doesn't have much info.

I can get the control to work if I specify which field to search ie: Search(s => { s.Fields("myField"); })

However, my datasource has datetime column and I get an exception when trying to seach all columns.

I get this error: The string was not recognized as a valid DateTime. There is an unknown word starting at index 0.

Can you provide a sample or update the demo to include how to handle datetime fields?

Grid

answered on 31 Aug 2020

1 answer

709 views

Prevent window close on outside click

Hello -

Kendo window closes when clicking anywhere outside the window .

Can this be prevented and make sure window closes only on close button(or any other specific button)

Thanks

Suresh

Window

answered on 31 Aug 2020

3 answers

2.7K+ views

Why is Ajax being called multiple times.

I have a Window which has an Ajax Form with a button. The first time submit is pressed, it calls the controller once as expected. However, the second time the button is pressed, the controller is called 3 times. The third time the button is pressed, it is getting called 8 times.

So something is clearly wrong. The Ajax call replaces the div (which has the button) so it appears the button is getting wired up multiple times, once for each ajax call.

@(Html.Kendo().Window()

.Name("loginWindow") //The name of the window is mandatory. It specifies the "id" attribute of the widget.

.Title("Login") //set the title of the window

.Content(@<text>

@Html.Partial("_LoginPartial")

</text>)

.Draggable() //Enable dragging of the window

.Width(300)

.Height(350)

.Modal(true)

.Visible(false)

)

This is the partial view that is called.

@model NTC.PropertySearch.Models.LoginModel

@{

ViewBag.Title = "Log in";

}

<section id="loginWindow">

@using (Ajax.BeginForm("Login", "Account", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "loginSection", }))

{

<div id="loginSection">

@ViewBag.Title

<div >

<p>

@Html.DisplayFor(m => m.Message)

</p>

<p>

@Html.DisplayFor(m => m.NumberOfLoginAttempts)

</p>

</div>

<table>

<tr>

<td>@Html.LabelFor(m => m.UserName)

</td>

</tr>

<tr>

<td>

@Html.TextBoxFor(m => m.UserName)

</td>

</tr>

<tr>

<td>

@Html.ValidationMessageFor(m => m.UserName)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(m => m.Password)

</td>

</tr>

<tr>

<td>

@Html.PasswordFor(m => m.Password)

</td>

</tr>

<tr>

<td>

@Html.ValidationMessageFor(m => m.Password)

</td>

</tr>

<tr>

<td>

@Html.CheckBoxFor(m => m.RememberMe)

@Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })

</td>

</tr>

</table>

<input type="submit" value="Log in" />

</div>

}

</section>

If there is some other way I should be done this, I would be glad to hear about it.
Greg

Window

answered on 28 Aug 2020

1 answer

3.7K+ views

DataSourceRequest Manipulating / Out of box filtering (FilterDescriptor vs CompositeFilterDescriptor)

Hi everyone,

I'm working on a grid that needs different type of filtering. For example: I've an hierarchical departments table and when i choose a parent department, grid should show me all students under the children departments. I've spent hours on this and figured it out.

Extension Method

:


public static class Extensions
{
    public static List<FilterDescriptor> ToFilterDescriptor(this IList<IFilterDescriptor> filters)
    {
        var result = new List<FilterDescriptor>();
        if (filters.Any())
        {
            foreach (var filter in filters)
            {
                var descriptor = filter as FilterDescriptor;
                if (descriptor != null)
                {
                    result.Add(descriptor);
                }
                else
                {
                    var compositeFilterDescriptor= filter as CompositeFilterDescriptor;
                    if (compositeFilterDescriptor!= null)
                    {
                        result.AddRange(compositeFilterDescriptor.FilterDescriptors.ToFilterDescriptor());
                    }
                }
            }
        }
        return result;
    }
}



In Use:


public ActionResult List([DataSourceRequest] DataSourceRequest request)
{
    var departments= new List<int?>();
    var nRequest = new DataSourceRequest
    {
        Groups = request.Groups,
        Aggregates = request.Aggregates,
        Page = request.Page,
        PageSize = request.PageSize,
        Sorts = request.Sorts,
        Filters = new List<IFilterDescriptor>()
    };
  
    if (request.Filters.Any())
    {
        foreach (var fdc in request.Filters.ToFilterDescriptor())
        {
            switch (fdc.Member)
            {
                case "DepartmentId":
                    var department = Convert.ToInt32(fdc.Value);
                    departments.AddRange(db.StoredProcedureToTakeDepartmentsTree(department).Select(o => o.Id));
                    break;
               default:
                    nRequest.Filters.Add(new FilterDescriptor
                    {
                        Member = fdc.Member,
                        MemberType = fdc.MemberType,
                        Operator = fdc.Operator,
                        Value = fdc.Value
                    });
                    break;
            }
  
        }
    }
    if (!departments.Any())
    {
         //departments = default departments if it's empty
    }
  
    var model = db.Students.Where(o => departments.Contains(o.DepartmentId))
              .Select(o => new
               {
                    o.Id
                   //Some columns
               })
    return Json(model.ToDataSourceResult(nRequest), JsonRequestBehavior.AllowGet);
}





I hope it helps...

Best Regards