Questions on UI for ASP.NET Core Forum

0 answers

129 views

I'm interested in the asp .net core controls.

I particularly like the grid and scheduler controls and the demos are great.

In the grid demos, they seem to be focused on calling server side methods for CRUD. Are there demos where the controls update client side json? For example, having a page that calls a web api to get a list of customers, shows them in a grid under which is a separate save button, where the customers are not saved until the save button is pressed.

General Discussions

asked on 28 Jun 2019

2 answers

2.1K+ views

Binding to a grid using Razor Page code behind

I have a Kendo Grid on a Razor page and I am trying to understand the syntax for the bindings. Specifically, t.Read(r => r.Action("Customer", "Index", new { handler = "ReadRecords" }).Type(HttpVerbs.Post)); It seems the parameters are .Action(Folder,Page,Method) which is unusual for me. I was expecting .Action(action,controller). Any explanation on this would be greatly appreciated. Basically I am trying to call methods from the cshtml.cs page instead of going to a controller class.

Thanks

The folder structure is

Pages

--Customer

------Index.cshtml

Index.cshtml

@page
@model RazorPageGridTest.Pages.Customer.IndexModel
@{
ViewData["Title"] = "Index";
}

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

@using Kendo.Mvc.UI

<h2>Index</h2>

<div id="grid">

</div>

@(Html.Kendo().Grid<RazorPageGridTest.Customer>().Name("grid")
.AutoBind(false)
.Columns(x=> {
x.Bound("address");
x.Bound("name");
x.Command(c => c.Edit());
})
.DataSource(d=> d.Custom()
.Transport(t=> {
t.Read(r => r.Action("Customer", "Index", new { handler = "ReadRecords" }).Type(HttpVerbs.Post));
t.Update(r => r.Action("Customer", "Index", new { handler = "UpdateRecord" }).Type(HttpVerbs.Post));

})
.Schema(s=> s.Model(m=> m.Id(i=>i.CustomerId)))
.PageSize(10)
)
.Pageable()
)

<script>
$(function() {
var grid = $("#grid").data("kendoGrid");

grid.dataSource.transport.options.read.beforeSend = function (req) {
req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
};

grid.dataSource.transport.options.update.beforeSend = function (req) {
req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
};

grid.dataSource.read();
});
</script>

Index.cshtml.cs

using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

namespace RazorPageGridTest.Pages.Customer
{
public class IndexModel : PageModel
{
public List<RazorPageGridTest.Customer> Data { get; set; }

public void OnGet()
{

}



public JsonResult OnPostReadRecords()
{
List<RazorPageGridTest.Customer> data = new List<RazorPageGridTest.Customer>();

for (int i = 1; i <= 100; i++)
{
data.Add(new RazorPageGridTest.Customer()
{
CustomerId = i,
Name = "Name2 "+ i.ToString(),
Address = "Address2 " + i.ToString()
});
}

return new JsonResult(data);
}

public JsonResult OnPostUpdateRecord([DataSourceRequest] DataSourceRequest request, RazorPageGridTest.Customer customer)
{
System.Diagnostics.Debug.WriteLine("Updating");

return new JsonResult(customer);
}

}
}

Grid

answered on 27 Jun 2019

2 answers

398 views

In View Component Can Inspect The Data But It Doesn't Display

I have a tabbed page with grids in each of the tabs, using view components for the content of each tab. Now I'm re-factoring to use Kendo grids. I can clearly see the grid when I inspect the page, but the grid is not rendering.

I've tried all sorts of combinations of "Deferred" with no success.
I've tried including / not including the _Layout page in the Index page that renders the component...
TIA

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - InvoiceReconciliation</title>

<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/font-awesome/css/fontawesome.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link href="~/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
</environment>
</head>
<body>
@RenderSection("Scripts", required: false)
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Invoice Reconciliation</a>
</div>
@*<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Landed Files</a></li>
</ul>
</div>*@
</div>
</nav>

<partial name="_CookieConsentPartial" />

<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2019 - Invoices</p>
</footer>
</div>

<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<script src="https://kit.fontawesome.com/44816a424f.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<script src="https://kit.fontawesome.com/44816a424f.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

</body>
</html>

[ViewComponent] Default.cshtml:

@model IEnumerable<MemberInvoiceRecord>
@using Kendo.Mvc.UI;

@{
ViewData["Title"] = "MatchedMemberRecordsView";
}

<p>
<a asp-action="Create">Create New</a>
</p>

@(Html.Kendo().Grid(Model)
.Name("MemberGrid")
.Columns(columns =>
{
columns.Bound(model => model.EUID);
columns.Bound(model => model.SSN).Width(130);
columns.Bound(model => model.Product).Width(130);
columns.Bound(model => model.FirstName).Width(130);
columns.Bound(model => model.LastName).Width(130);
})
.NoRecords(e => e.Template("No Matched Members."))
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
.Deferred(true)
)

Grid

answered on 27 Jun 2019

1 answer

762 views

Grid Pagination with Large Dataset

Hi,

I've used the ASP.NET AJAX components for many years and am just starting to look at the UI for ASP.NET Core equivalents.

We have a large dataset (potentially hundreds of thousands of records) of historical data that we want to show in a paginated grid.The data retrieval is optimised for performance so we can retrieve any given page of data quickly, and aren't transferring large of amounts of data around unnecessarily.

In the ASP.NET AJAX grid we'd set the VirtualItemCount property which enabled the grid to initialise the pager correctly and show the total number of items and pages, and then respond to requests to retrieve the appropriate page of data in the NeedDataSource() event as the user navigated through the pages.

I can't see anything that would provide equivalent behaviour in the UI for ASP.NET Core grid though?

Thanks in advance,

Gary

Grid

answered on 27 Jun 2019

1 answer

420 views

Model DefaultValue not passing through to PopUp Editor

Hi,

We have a grid where we set some datasource model defaultvalues. These then apply to hiddenfor fields on a popup editor template.

This works up to version 2018.3.1017 but does not work in 2019.2.619 and earlier.

Is there a different approach we can take which will work? Or is it a bug?

Grid

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_AuthMembership"))

Grid DataSource

.DataSource(dataSource => dataSource
...
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.cUsername).DefaultValue(ViewBag.Email);
model.Field(p => p.Id).Editable(false);
})

Editor Template contains

@Html.HiddenFor(model => model.cUsername) ... but it is always null now with 2019.2.619.

Passing values around in ViewBag shows each page knows about value and it worked in 2018.3.1017.

We want to upgrade for newer controls - what can we do please?

Thanks,

Daniel.

General Discussions

answered on 26 Jun 2019

4 answers

1.8K+ views

View PDF Document from MemoryStream?

I am reviewing the .net core package for web app development and I am interested in the PDF viewer. I create PDF documents programmatically (C# / iText on the server) and was wondering if I could use a MemoryStream as a datasource for the PDF viewer without having to write the document to file first. Rendering from RAM would be much the preferred option.

Kind regards,

Paul S

PDFViewer

answered on 26 Jun 2019

1 answer

240 views

Unresponsiveness with SSIS Projects in Visual Studio 2019 - asp.NET Core & MVC

I am experiencing an issue similar to the following thread:

https://www.telerik.com/forums/unresponsiveness-in-visual-studio

SSIS projects are unresponsive in Visual Studio 2019. Saves take several minutes, and Memory/CPU spikes during the process. The Telerik extensions must stay disabled when working with SSIS projects/packages.

Application: Visual Studio 2019 - Enterprise

Telerik Extension Information:

Telerik.CommonPackage - installed 5/13/19, version 1.2.0

Using the latest versions of all Telerik Extensions (asp.NET, Core, MVC)

System Information: Windows Server 2016 Standard (64bit OS)

About "Microsoft Visual Studio 2019"

Microsoft Visual Studio Enterprise 2019 - Version 16.1.3

Microsoft .NET Framework - Version 4.7.03062

Please let me know if I can provide any additional information for you.

Installer and VS Extensions

answered on 25 Jun 2019

1 answer

95 views

WCAG 2.1 Support?

Hi,

i'm evaluating UI for ASP.NET Core for use in a new project. One of the requirements is WCAG 2.1 AA conformance, but I couldn't find a definite statement if it is supported or not. I found some statements about Kendo UI (https://www.telerik.com/kendo-vue-ui/components/accessibility/) and ASP.NET AJAX (https://www.telerik.com/aspnet-ajax/tech-sheets/accessibility-support) but nothing about ASP.NET Core. Also, when I hit the "Accessibility Support" link on https://www.telerik.com/support/aspnet-core I get redirected to a page that describes Kendo UI. Does this mean the Kendo UI statement holds true for ASP.NET Core too or is the link simply wrong?

Regards,

Matthias

General Discussions

answered on 25 Jun 2019

3 answers

734 views

Access Grid Template value in Razor Syntax

Hello, I am trying to access client template values in Razor syntax like the below. pay.ID always return "#= data.ID #" instead of value. But @id inside html return the correct value.

<ul class="dropdown-menu dropdown-user">
<li>
<a href="Payment/Details?id=#= data.id#" class="dropdown-item"><i class="k-icon k-i-eye"></i> Details</a>
</li>

@if ((await AuthorizationService.AuthorizeAsync(
User, pay,
PaymentOperations.Update)).Succeeded)
{
<li class="dropdown-divider"></li>
<li>
<a href="Payment/Edit?id=#= data.id#" class="dropdown-item"><i class="k-icon k-i-edit"></i> Edit</a>
</li>
}

</ul>
</script>

General Discussions

answered on 25 Jun 2019

4 answers

1.5K+ views

Group Header Template

I'm trying to add Group Headers to my grid, but can't get anything to display. Aggregate footers are fine, but headers just don't seem to work. Example grid...

@(Html.Kendo().Grid<PersonTimesheetSummary>()
.Name("grid")
.Columns(columns => {
columns.Bound(p => p.PersonCode);
columns.Bound(p => p.FullName);
columns.Bound(p => p.NoOfTimesheetDays).ClientGroupHeaderTemplate("#=sum#");
})
.DataSource(dataSource => dataSource
.Ajax()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.NoOfTimesheetDays).Sum();
})
.Group(groups => { groups.Add(p => p.Company); groups.Add(p => p.Department); })
.Read(read => read.Action("GetPersonTimesheetSummary", "Person").Data("getGridParams")))
)

I've tried this using the Html and tag helper formats with no success. I'm using version 2019.2.514.

Grid

answered on 25 Jun 2019