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)
)
2 Answers, 1 is accepted
Rank 1
I am glad that you were able to have the Grid up and running.
Indeed in order for the components to work correctly it is necessary to have the Kendo scripts and styles referenced in the application. More information on including the client-side resources in a .NET Core project is available in the following article.
Regards,
Viktor Tachev
Progress Telerik
Sandy,
Did you solve this problem? I've got the same problem too.
If the issue isn't caused by missing client-side resources, could you please provide some additional information about the scenario at hand? This will allow us to research the reported issue.
Thank you for your cooperation.