Questions on UI for ASP.NET Core Forum

1 answer

30 views

What happened to NuGet package Kendo.for.AspNet.Core?

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.

Grid

answered on 09 Aug 2022

1 answer

6 views

Convert to tag-helper syntax

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>" +
						"	&nbsp;&nbsp;<i class='fa-duotone fa-pipe'></i>&nbsp;&nbsp;" +
				        "	<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("&nbsp;History").LoadContentFrom("GetLetterHistory", "Letter", new { masterGridId = "#=Id#" });
					items.Add().SpriteCssClasses("fa-duotone fa-thumbs-up").Text("&nbsp;Approvers").LoadContentFrom("GetLetterApprovers", "Letter");
					items.Add().SpriteCssClasses("fa-duotone fa-magnifying-glass").Text("&nbsp;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>

This will cover 100 of the web application as other controls are simpler than these three cases,

Grid

answered on 08 Aug 2022

1 answer

12 views

Cannot upgrade package Telerik.UI.for.AspNet.Core 2022.2.xxx => FileNotFoundException System.Runtime.Loader

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

General Discussions

answered on 08 Aug 2022

0 answers

11 views

Use loader to stop user from interaction until data saved/redirect

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();

Now I just need to use Kendo Loader with the above flow.

Loader

asked on 06 Aug 2022

2 answers

93 views

Kendo Grid - ASP.NET Core - error handler doesn't fire

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"

Grid

answered on 05 Aug 2022

1 answer

9 views

JavaScript not working on buttons within a Wizard step

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");
                });
            }

However, I'm not able to grab anything w/ the querySelectorAll method - it's returning 0 length when sandwiched in Wizard Step tags but when in CodePen and without Telerik, it's returning "HI" in the console log when the corresponding button is clicked. Any insights into why this is happening? Thanks!

Wizard

answered on 04 Aug 2022

1 answer

17 views

Set different margin top in pages in grid pdf export

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";
                    
           #}#

thank you in advance

Grid

answered on 02 Aug 2022

1 answer

17 views

Header and Cell alignments not as demo-like

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>" +
						"	&nbsp;&nbsp;<i class='fa-duotone fa-pipe'></i>&nbsp;&nbsp;" +
				        "	<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>

Grid

answered on 01 Aug 2022

2 answers

14 views

ColumnMenu events and placement

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

Grid

Popover