Questions on UI for ASP.NET MVC Forum

1 answer

77 views

Page no not showing in Pagination in lower resolution

hi all

i have grid with data and pagination in bottom .in higher resolutin screens , all page no is showing . in lower reolution only first page no is showng ( refer screen shot )

is it anyway to show all page no in pagination details?

Grid

answered on 07 Sep 2020

5 answers

883 views

[Solved] Save/Load - Custom Toolbar Disappears

I have an MVC Grid, with a custom toolbar. On that custom toolbar is a button to Save the grid options, which it does via localStorage. A second button loads the grid options from localStoage and applies them to the grid. Everything works except when I load the settings, my custom toolbar disappears. It doesn't just hide the toolbar, it's completely gone.

The grid code:

@(Html.Kendo().Grid<EIWOResult>()

.Name("EIWOGrid")

.TableHtmlAttributes(new { @class = "table-condensed" })

.Columns(cols =>

{

cols.Bound(c => c.EmpId);

cols.Bound(c => c.LastName);

cols.Bound(c => c.FirstName);

cols.Bound(c => c.MiddleInitial);

cols.Bound(c => c.SSN);

cols.Bound(c => c.CaseNumber);

cols.Bound(c => c.OrderNumber);

cols.Bound(c => c.Amount).Format("{0:c}").HtmlAttributes(new { style = "text-align: right;"});

cols.Bound(c => c.Authority);

cols.Bound(c => c.FIPSCode);

cols.Bound(c => c.EIWOType);

cols.Bound(c => c.EIWODocument)

.Title("Document")

.ClientTemplate("<a href=\"" + @Url.Action("GetEIWODocument", "EIWO") + "?fileName=#:EIWODocument#\" target=\"_blank\">Document</a>");

cols.ForeignKey(c => c.EIWOAction, (IEnumerable) ViewData["GarnishmentCodes"], "CodeID", "CodeDesc");

cols.Command(c => c.Edit());

})

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("EIWOStatus"))

.Resizable(r => r.Columns(true))

.Scrollable(s => s.Height("auto"))

.Sortable()

.Pageable(p => p

.PageSizes(new List<object> { 10, 20, 30, 40, 50, "all" })

.ButtonCount(10))

.Filterable(f => f.Enabled(true))

.Events(ev =>ev.DataBound("gridBound"))

.AutoBind(true)

.DataSource(ds => ds

.Ajax()

.PageSize(25)

.ServerOperation(true)

.Model(m =>

{

m.Id(d => d.PseudoPrimaryKey);

m.Field(d => d.EmpId);

m.Field(d => d.LastName);

m.Field(d => d.FirstName);

m.Field(d => d.MiddleInitial);

m.Field(d => d.SSN);

m.Field(d => d.CaseNumber);

m.Field(d => d.OrderNumber);

m.Field(d => d.Amount);

m.Field(d => d.Authority);

m.Field(d => d.FIPSCode);

m.Field(d => d.EIWOType);

m.Field(d => d.EIWODocument);

m.Field(d => d.EIWOAction);

m.Field(d => d.DocketNumber);

})

.Read(r => r.Action("GetUnprocessedEIWOs", "EIWO"))

.Update(u => u.Action("UpdateEIWO", "EIWO"))

.Events(e => e.RequestEnd("refreshGrid"))

)

.ToolBar(tb =>

{

tb.Custom().Name("gridFilterReset").Text("Clear Filter").HtmlAttributes(new { id = "gridFilterReset", style = "float:right;" });

tb.Custom().Name("gridSave").Text("Save Settings").HtmlAttributes(new { id = "gridSave", style = "float:left;" });

tb.Custom().Name("gridLoad").Text("Load Settings").HtmlAttributes(new { id = "gridLoad", style = "float:left;" });

})

.ColumnMenu()

.Groupable()

)

And the javascript is:

$("#gridSave").click(function (e) {

e.preventDefault();

localStorage["kendo-EIWO-options"] = kendo.stringify($("#EIWOGrid").data("kendoGrid").getOptions());

});

$("#gridLoad").click(function (e) {

e.preventDefault();

var options = localStorage["kendo-EIWO-options"];

if(options) {

$("#EIWOGrid").data("kendoGrid").setOptions(JSON.parse(options));

}

});

I've also attached the grid settings themselves, copied out of localStorage and saved as a JSON file.

Any suggestions or help on keeping the toolbar from disappearing?

Grid

answered on 04 Sep 2020

1 answer

665 views

Show Confirm before Closing window

Hi,

Unfortunately, the simplest seeming tasks are made hard by Kendo.

I just have to show a "kendoConfirm" box before my Kendo Window closes.

I have written my code in the Close event of the Kendo Window. The confirm box shows but the window has already closed since the code execution does not stop when kendoConfirm box shows.

Is there any way to achieve this simple functionality?

Window

answered on 04 Sep 2020

28 answers

2.5K+ views

[Solved] create another column in grid with de sum of column1 and 2.

I need to create another column in grid with the sum of column1 and 2.

Grid

answered on 04 Sep 2020

6 answers

1.4K+ 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

184 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

184 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

92 views

[Solved] 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.5K+ 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.3K+ 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