Questions on UI for ASP.NET Core Forum

1 answer

154 views

Keystroke to Add new record or Save Changes in grid

hi, I have a simple grid set up for data entry in batch mode. The users don't like having to take their fingers off the keyboard and use the mouse to click a button to either start a new entry or save the changes in the current row. Hitting the Enter key doesn't do anything. Is there a keystroke available that would save the changes in the current row without having to click the Save button?

Similarly, is there a keystroke that would start a new record entry?

If not, any ideas for implementing something like this?

many thanks,

Yvette

Grid

answered on 15 Aug 2022

1 answer

1.1K+ views

Problems trying to activate Kendo UI Tabstrip tab programatically

I have the below tabstrip and on a button click I am trying to select/activate the second tab programatically. Actually, I can't get it to select/activate any tabe programatically. Below my tabstrip definition below I have listed all of the things I have tried but, none of these seem to work. I am using Visual Studio 2022 and Telerik.UI.for.AspNet.Core 2022.2.510. What am I doing wrong?

@(Html.Kendo().TabStrip()
.Name("tabMain")
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))

.Items(tabstrip =>
{
tabstrip.Add().Text("Table Status")
.HtmlAttributes(new { id="tabMain-tab-1", name="tabMain-tab-1"})
.Selected(true)
.Content(@<text>
<div>
</div>
</text>);

tabstrip.Add().Text("Filters")
.HtmlAttributes(new { id="tabMain-tab-2", name="tabMain-tab-2"})
.Content(@<text>
<div>
</div>
</text>);

tabstrip.Add().Text("Bill List")
.HtmlAttributes(new { id="tabMain-tab-3", name="tabMain-tab-3" })
.Content(@<text>
<div>
</div>
</text>);

tabstrip.Add().Text("Main Data")
.HtmlAttributes(new { id="tabMain-tab-4", name="tabMain-tab-4" })
.Content(@<text>
<div>
</div>
</text>);

tabstrip.Add().Text("Details")
.HtmlAttributes(new { id="tabMain-tab-5", name="tabMain-tab-5" })
.Content(@<text>
<div>
</div>
</text>);

tabstrip.Add().Text("Reports")
.HtmlAttributes(new { id="tabMain-tab-6", name="tabMain-tab-6" })
.Content(@<text>
<div>
</div>
</text>);

tabstrip.Add().Text("Export")
.HtmlAttributes(new { id="tabMain-tab-7", name="tabMain-tab-7" })
.Content(@<text>
<div>
</div>
</text>);
})
)

I have tried all of the following but, none of these seem to work.

$("#tabMain").kendoTabStrip().data("kendoTabStrip").select(2);

$("#tabMain").kendoTabStrip().select(2);

$("#tabMain").kendoTabStrip().data("kendoTabStrip").activateTab(2);

$("#tabMain").kendoTabStrip().activateTab(2);

var tabToActivate = $("#tabMain-tab-2");
$("#tabMain").kendoTabStrip().data("kendoTabStrip").activateTab(tabToActivate);

var tabToActivate = $("#tabMain-tab-2");
$("#tabMain").kendoTabStrip().activateTab(tabToActivate);

var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select("li:1");

var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);

var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select((tabStrip.tabGroup.children("li").length - 5));

var tabStrip = $("#tabMain").data("kendoTabStrip");
tabStrip.select((tabStrip.tabGroup.children("li").length - 5));

var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.activateTab((tabStrip.tabGroup.children("li").length - 5));

var tabStrip = $("#tabMain").data("kendoTabStrip");
tabStrip.activateTab((tabStrip.tabGroup.children("li").length - 5));

var tabStrip = $("#tabMain").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);

Inspecting the tab I want to select I see:

<li class="k-state-default k-item k-tabstrip-item" id="tabMain-tab-2" name="tabMain-tab-2" role="tab" aria-controls="tabMain-2"><span class="k-loading k-complete"></span><span class="k-link" unselectable="on">Filters</span></li>
<span class="k-loading k-complete"></span>
<span class="k-link" unselectable="on">Filters</span>
</li>

TabStrip

answered on 15 Aug 2022

1 answer

98 views

Unwanted Package References

Hello,

I found something but I don't know whether this is a bug.

When I installed the latest version (2022.2.802) I saw some unwanted references in the package like MVC.Core 2.1.0. They belong to ASP.NET Core 2.1.0. Because of that, I can't use some extension methods like UseStaticFiles.

General Discussions

answered on 15 Aug 2022

1 answer

291 views

Scheduler - making Title a required field

I cannot figure out how to make Title a required field using HtmlHelper.

There does not seem to be an easy way to make Title required. I want the error message to show up in the UI, I don't want the error message to be a JavaScript alert.

m.Field(f => f.Title);

In the JSON configuration has a validation parameter which makes this very simple. But I am not using the JSON config.

@(Html.Kendo().Scheduler<SchedulePrototype.ViewModels.CalendarViewModel>()
    .Name("scheduler")
    .Date(startDate)
    .StartTime(new DateTime(startDate.Year, startDate.Month, startDate.Day, 8, 0, 0))
   // .Timezone("Etc/UTC")
    .Selectable(true)
    .Editable(e => e.Template("customEditorTemplate"))
    .Events(e =>
    {
        e.DataBinding("scheduler_dataBinding");
        e.DataBound("scheduler_dataBound");
      //  e.change("scheduler_change");
        e.Save("scheduler_save");
       // e.remove("scheduler_remove");
       // e.cancel("scheduler_cancel");
       e.Edit("scheduler_edit");
      //  e.add("scheduler_add");
       // e.movestart("scheduler_movestart");
        e.Move("scheduler_move");
    @*        e.moveend("scheduler_moveend");
        e.resizestart("scheduler_resizestart");
        e.resize("scheduler_resize");
        e.resizeend("scheduler_resizeend");*@
        e.Navigate("scheduler_navigate");
    })
    .Timezone("Etc/UTC")
     .Resources(resource =>
    {
         resource.Add(m => m.CalendarEventTypeId)
            .Title("Type")
            .Multiple(false)
            .DataTextField("Name")
            .DataValueField("CalendarEventTypeId")
            .DataSource(ds => ds.Read(read => read.Action("GetCalendarEventTypes", "Calendar")).ServerFiltering(false));
        resource.Add(m => m.DealList)
            .Multiple(true)
            .DataTextField("Title")
            .DataValueField("DealId")
            .DataSource(ds => ds.Read(read => read.Action("GetDealsToScheduleForDropDown", "Deal")).ServerFiltering(false));
    })
    .Views(views =>
    {
        views.DayView(dayView => dayView.Selected(true));
        views.WeekView();
        views.MonthView();
        views.AgendaView();
        views.TimelineView();
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.Field(f => f.Title);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Events(events => events.Error("error_handler"))
        .Read("Events_Read", "Calendar")
        .Create("Events_Create", "Calendar")
        .Destroy("Events_Destroy", "Calendar")
        .Update("Events_Update", "Calendar")
    )
)

Scheduler

answered on 10 Aug 2022

1 answer

127 views

DropDownButton Popup Position

Dear all,

i'm try to set the position of the DropDownButton Popup, but seams this option is not available?

In the Documentation it says "See Popup Documentation", where you have the Option "Position"

https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI.Fluent/DropDownButtonBuilder#popupsystemactionkendomvcuifluentdropdownbuttonpopupsettingsbuilder

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownbutton/configuration/popup

Thanks, best regards
Patrick

PS: DropDownButton is missing as Tags here ;)

Button

DropDownList

DropDownTree

answered on 10 Aug 2022

1 answer

996 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

623 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

256 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

582 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

1 answer

306 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