Our project has been using Kendo.for.AspNet.Core package since 2019, but it can't be found as of today. And now our builds are all failing.
Here's a line from our dotnet restore that ran yesterday: "OK https://api.nuget.org/v3-flatcontainer/kendo.for.aspnet.core/index.json 142ms"
And here's the one that ran today: "NotFound https://api.nuget.org/v3-flatcontainer/kendo.for.aspnet.core/index.json 169ms".
Here's another error message we weren't getting yesterday: "error NU1101: Unable to find package Kendo.for.AspNet.Core. No packages exist with this id in source(s): NuGetOrg"
I would like to know what I could use to replace this package. We were using the DataSourceRequest class it provided with our Kendo UI grids.
I have decided to switch to tag helper as I have just realized how natural it looks and format in a sizeable cshtml file. I converted all essential elements to tag-helper equivalents. I need the following converted that I'll use for the remaining advanced controls:
A complex grid:
@(Html.Kendo().Grid(Model)
.Name("gridLetters")
.Columns(columns =>
{
columns.Bound(p => p.Identifier).Title("RL #").Filterable(false).Sortable(false).Width(160)
.HeaderHtmlAttributes(new { style = "k-text-center !k-justify-content-center" })
.HtmlAttributes(new { style = "k-text-center !k-justify-content-center" })
.ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
columns.Bound(p => p.Subject);
columns.Bound(p => p.CompanyName).Title("Company");
columns.Bound(p => p.BrandName).Title("Brand");
columns.Bound(p => p.Location.Name).Title("Location");
columns.Bound(p => p.LetterTypeId).Title("RL Type").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=LetterType.BadgeInfo#' title='#=LetterType.Name#'>#=LetterType.Nickname#</span>");
columns.Bound(p => p.Status.Nickname).Title("Status").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=Status.BadgeInfo#' title='#=Status.Name#'>#=Status.Nickname#</span>");
columns.Bound(p => p.Id).Title("Act").Width(90).Filterable(false)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate(
"#if(StatusId == 1){#" +
" <a href='" + Url.Action("Create", "Letter", new { letterId = "#=Id#" }) + " ' title='Edit the RL'><i class='fa-duotone fa-pen-to-square'></i></a>" +
" <i class='fa-duotone fa-pipe'></i> " +
" <a href='" + Url.Action("ActionQuick", "Letter", new { letterId = "#=Id#" }) + " ' title='Start the RL Approval flow'><i class='fa-duotone fa-play'></i></a>" +
"#} else {#" + "" + "# } #"
);
})
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Search();
})
.Excel(excel => excel
.FileName($"DA CRL - My List Export - {DateTime.Now:yyyy-MM-dd}.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("GridExcelExportSave", "Helper"))
)
.Scrollable(s => s.Height("auto"))
.Reorderable(r => r.Columns(false))
.Resizable(r => r.Columns(true))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable()
.Sortable()
.ColumnMenu()
.Events(e => e.DataBound("onDataBound"))
.ClientDetailTemplateId("detailTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.Sort(x => x.Add("Id").Descending())
.PageSize(20)
.ServerOperation(false)
)
)
@section Scripts {
<script id="detailTemplate" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().SpriteCssClasses("fa-duotone fa-clock-rotate-left").Text(" History").LoadContentFrom("GetLetterHistory", "Letter", new { masterGridId = "#=Id#" });
items.Add().SpriteCssClasses("fa-duotone fa-thumbs-up").Text(" Approvers").LoadContentFrom("GetLetterApprovers", "Letter");
items.Add().SpriteCssClasses("fa-duotone fa-magnifying-glass").Text(" Details").Content("");
items.Add().SpriteCssClasses("fa-duotone fa-link").Text("Attachments").Content("");
})
.ToClientTemplate()
)
</script>
<script>
var gridLetters = $("#gridLetters");
$(window).resize(function () {
resizeGrid();
});
function onDataBound(e) {
resizeGrid();
}
function resizeGrid() {
try {
if (gridLetters.options.scrollable !== true) {
gridLetters.setOptions({ scrollable: true });
}
} catch (e) {
}
$(".k-grid-content").css("height", $(window).height() - 310);
}
</script>
}
A form with Anti-Forgery Token, validation summary, DisplayFor, and Hidden field w/ jQuery changing values:
@Html.ValidationSummary()
@using (Html.BeginForm("Action", "Letter", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.HiddenFor(m=>m.LetterId)
@Html.HiddenFor(m=>m.ActionId)
<div class="row">
<div class="btn-group d-flex">
<button id="btnActionApprove" type="button" class="btn btn-lg btn-success">
<i class="fa-duotone fa-thumbs-up fa-3x me-3 text-black"></i>
<span>
<span class="d-block"><b>Approve RL</b></span>
<span class="d-block fs-12px opacity-7">RL will proceed</span>
</span>
</button>
<button id="btnActionInfo" type="button" class="btn btn-lg btn-warning">
<i class="fa-duotone fa-messages-question fa-3x me-3 text-black"></i>
<span>
<span class="d-block"><b>More Info</b></span>
<span class="d-block fs-12px opacity-7">Info required</span>
</span>
</button>
<button id="btnActionReject" type="button" class="btn btn-lg btn-danger">
<i class="fa-duotone fa-thumbs-down fa-3x me-3 text-black"></i>
<span>
<span class="d-block"><b>Reject RL</b></span>
<span class="d-block fs-12px opacity-7">Cancel this RL</span>
</span>
</button>
</div>
</div>
<div class="row mt-5px">
<div class="col-12">
@(Html.Kendo().TextAreaFor(m => m.Comments)
.Size(ComponentSize.Large)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.Overflow(TextAreaOverflow.Auto)
.Resize(TextAreaResize.Vertical)
.Rows(6)
.Label(l => l.Content("Action Comments").Floating(true))
.HtmlAttributes(new { required = "required", validationmessage = "Please enter comments" })
)
</div>
</div>
<div class="row mt-5px">
<div class="col-2">
<button type="submit" class="btn btn-lg btn-success">Take Action</button>
</div>
</div>
}
@Html.DisplayFor(m=>m.Letter, "LetterView")
@section Scripts {
<script type="text/javascript">
$(function () {
$("#btnActionApprove").click(function () {
$("#ActionId").val("1");
});
$("#btnActionInfo").click(function () {
$("#ActionId").val("3");
});
$("#btnActionReject").click(function () {
$("#ActionId").val("2");
});
});
</script>
}
Cascading Combos:
<div class="row mt-3">
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.CategoryHeadId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.OptionLabel("Select head category...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupCategoriesHead", "Api");
});
})
)
</div>
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.CategoryMainId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.OptionLabel("Select main category...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupCategoriesMain", "Api")
.Data("filterMainCategories");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom(templatePrefixSolver + "CategoryHeadId")
)
</div>
<div class="col-lg-4">
@(Html.Kendo().DropDownListFor(m => m.CategorySubId)
.Size(ComponentSize.Medium)
.Rounded(Rounded.Medium)
.FillMode(FillMode.Solid)
.OptionLabel("Select sub-category...")
.HtmlAttributes(new { style = "width: 100%" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLookupCategoriesSub", "Api")
.Data("filterSubCategories");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom(templatePrefixSolver + "CategoryMainId")
)
</div>
</div>
<script language="javascript" type="text/javascript" deffer>
function filterMainCategories() {
return {
headId: $("#@(templatePrefixSolver)CategoryHeadId").val()
};
}
function filterSubCategories() {
return {
headId: $("#@(templatePrefixSolver)CategoryHeadId").val(),
mainId: $("#@(templatePrefixSolver)CategoryMainId").val()
};
}
</script>
We cannot upgrade the package Telerik.UI.for.AspNet.Core to the versions after 2022.1.412. The project cannot start after the upgrade.
We use .Net Core 2.1 over .Net Framework 4.8 and it's easy to reproduce, juste create a new project (core 2.1 over .net framwork) and add the nuget Telerik.UI.for.AspNet.Core 2022.2.xxx.
Thanks
Victor
I have a general idea of the flow:
(i) Assign a unique id to your form (eg form-id) by changing your form code to:
@using (Html.BeginForm("SaveCountry", "Country", FormMethod.Post, new { id = "form-id" })) { }
(ii) Put the loader on your page with a unique id. The div is hidden until the form is submitted. Need to use Kendo Loader here and place it in either a partial view or in _Layout so it is always available as hidden--by-default
(iii) Style the loader / loading div to go somewhere useful.
(iv) Show the loader when the form is submitted (and after any validation has been completed), for example (not sure about this):
<script>
$("#form-id").on("submit", function () {
$("#divLoading").show();
});
</script>
(v) Given that the page will redirect, I can probably leave the loader until the page redirects. But if I need to hide the loader before that happens, I can use (Kendo Loader here + function defined in _layout as well):
$("#divLoading").hide();
Hi,
I have a Kendo grid setup and I would like my controller's update action to assign a custom error to the ModelState and have that picked up on the client side. This is not an actual error, but more of a flag I can catch on the client side to initiate a redirect to another page (similar to the concept posted here: Redirect to another page after update in Kendo grid with inline edit in UI for ASP.NET MVC | Telerik Forums
My issue is that I cannot get the error handler to fire on the client side. Here is my controller action (I've reduced it down to just the error handling for simplicity):
[HttpPost]
public JsonResult Status_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<StatusViewModel> changedEntries)
{
ModelState.AddModelError("UserRedirect", "UserRedirect needed");
var result = ModelState.ToDataSourceResult();
return Json(result);
}
Here is my grid setup:
@(Html.Kendo().Grid(Model)
.Name("status-grid")
.Columns(c =>
{
// snip column setup
})
.ToolBar(toolbar =>
{
toolbar.Custom().Text("Save changes and submit").HtmlAttributes(new { id = "saveButton" });
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Scrollable(s => s.Height(850))
.Navigatable()
.Events(events =>
{
events.Edit("onEdit");
events.Navigate("onNavigate");
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("onError"))
.Model(model =>
{
// snip model fields
})
.Update("Status_Update", "Status"))
)
Finally, here is my error handler function:
<script type="text/javascript">
function onError(e) {
alert("Error handler fired");
}
</script>
I feel like this is a pretty vanilla setup, so I'm not sure why it isn't working. I've tried quite a few variations and the error handler never executes. I have no errors in the console. Here is the JSON that is being received on the client side. Can anyone see anything I am doing wrong, or tell me a better way to redirect the user to another page after the AJAX Update action finishes running? Thanks!!
{errors: {ValidationRedirect: {errors: ["ValidationRedirect needed"]}}} errors: {ValidationRedirect: {errors: ["ValidationRedirect needed"]}} ValidationRedirect: {errors: ["ValidationRedirect needed"]} errors: ["ValidationRedirect needed"] 0: "ValidationRedirect needed"
I wanted to rule out if this is some kind of issue with Telerik - I've implemented this in CodePen and it works there, but not with what I'm using in Visual Studio w/ the entire code.
I have a series of buttons like so:
<wizard-step title="Step 2">
<wizard-step-content><span class="nowrap d-flex flex-row"><div class="reasons">
@Html.RadioButtonFor(c => c.category, item.Value, new { id = item.Value, name = "Lists", @value = item.Value, @text = item.Text, @class = "reasons-input"})
<label for="@(item.Value)"
class="reasons-label">@item.Text</label></div><button type="button"
id="@item.Value"
class="inputBtn btn btn-secondary"
data-toggle="modal"
datatarget="#@item.Value"
style="background-color: transparent; border-color: transparent; color: #007bff; font-size: 21px;"><i class="fa fa-question-circle"></i></button></span>
</wizard-step-content>
</wizard-step>
And here's my attempt at setting up event listeners
var inputButtons = document.querySelectorAll(".inputBtn"); console.log(inputButtons); console.log(inputButtons.length); var buttonsCount = inputButtons.length; for (var i = 0; i <= buttonsCount; i += 1) { inputButtons[i].addEventListener("click", function(e) { console.log("HI"); }); }
Hello,
I would like to ask how I could set different margin top in pages in grid pdf export.
I have a header which I need to be display only in the first page. But this leaves a lot of big blank in other pages,
this is what I have try so far in the page template script
#if(pageNum > 1) {# document.getElementByClassName("k-pdf-export k-grid").style.marginTop = "3cm"; #}#
Hi!
I'm on the Material Main theme. The Kendo controls are already cozy-sized, and the material theme adds too much whitespace everywhere.
I'm struggling with the columns and header text alignment. As per the image, I cannot get either these headers or the cells to align correctly, and there is too much padding margin on the left.
@(Html.Kendo().Grid(Model)
.Name("gridLetters")
.Columns(columns =>
{
columns.Bound(p => p.Id).Filterable(false).Sortable(false).Width(60)
.HeaderHtmlAttributes(new { @style = "k-text-center !k-justify-content-center" })
.HtmlAttributes(new { @style = "text-align: right" })
.ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
columns.Bound(p => p.Subject);
columns.Bound(p => p.CompanyName).Title("Company");
columns.Bound(p => p.BrandName).Title("Brand");
columns.Bound(p => p.Location.Name).Title("Location");
columns.Bound(p => p.LetterTypeId).Title("RL Type").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=LetterType.BadgeInfo#' title='#=LetterType.Name#'>#=LetterType.Nickname#</span>");
columns.Bound(p => p.StatusId).Title("Status").Width(150)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate("<span class='#=Status.BadgeInfo#' title='#=Status.Name#'>#=Status.Nickname#</span>");
columns.Bound(p => p.Id).Title("Act").Width(90).Filterable(false)
.HtmlAttributes(new { style = "text-align:center" })
.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
.ClientTemplate(
"#if(StatusId == 1){#" +
" <a href='" + Url.Action("Create", "Letter", new { letterId = "#=Id#" }) + " ' title='Edit the RL'><i class='fa-duotone fa-pen-to-square'></i></a>" +
" <i class='fa-duotone fa-pipe'></i> " +
" <a href='" + Url.Action("ActionQuick", "Letter", new { letterId = "#=Id#" }) + " ' title='Start the RL Approval flow'><i class='fa-duotone fa-play'></i></a>" +
"#} else {#" + "" + "# } #"
);
})
.ToolBar(toolbar =>
{
toolbar.Excel();
toolbar.Search();
})
.Excel(excel => excel
.FileName($"DA CRL - My List Export - {DateTime.Now:yyyy-MM-dd}.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("GridExcelExportSave", "Helper"))
)
.Sortable()
.Navigatable()
.Resizable(r => r.Columns(true))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable()
.Scrollable(s => s.Height("auto"))
.ClientDetailTemplateId("detailTemplate")
.Events(e => e.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(x => x.Add("Id").Descending())
.PageSize(20)
.ServerOperation(false)
)
)
<script>
var gridLetters = $("#gridLetters");
$(window).resize(function () {
resizeGrid();
});
function onDataBound(e) {
resizeGrid();
}
function resizeGrid() {
try {
if (gridLetters.options.scrollable !== true) {
gridLetters.setOptions({ scrollable: true });
}
} catch (e) {
}
$(".k-grid-content").css("height", $(window).height() - 310);
}
</script>
<script>
var gridLetters = $("#gridLetters");
$(window).resize(function () {
resizeGrid();
});
function onDataBound(e) {
resizeGrid();
}
function resizeGrid() {
try {
if (gridLetters.options.scrollable !== true) {
gridLetters.setOptions({ scrollable: true });
}
} catch (e) {
}
$(".k-grid-content").css("height", $(window).height() - 310);
}
</script>
Hi there
I'm trying to add column menu to my grid but I need to do the following:
1) Add the three dots to the grid toolbar not to each column
2) I need once I click on the apply button to extend the functionality and run some js code, but I can't find any documentation for init, columnMenuOpen or any other event for ColumnMenu for .net core library.
Thanks
Hello,
is it possible to play a sound / beep / whatever when showing a notification box?
I haven't found anything in the API for ASP.NET Core.
Thanks,
Christine