Telerik Forums
UI for ASP.NET Core Forum
1 answer
154 views

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

 

Momchil
Telerik team
 answered on 15 Aug 2022
1 answer
1.1K+ views

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>
Momchil
Telerik team
 answered on 15 Aug 2022
1 answer
98 views

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.

 

 

Viktor Tachev
Telerik team
 answered on 15 Aug 2022
1 answer
291 views

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

Alexander
Telerik team
 answered on 10 Aug 2022
1 answer
127 views

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

Aleksandar
Telerik team
 answered on 10 Aug 2022
1 answer
996 views

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.


Stacey
Telerik team
 answered on 09 Aug 2022
1 answer
623 views

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,
Alexander
Telerik team
 answered on 08 Aug 2022
1 answer
256 views

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

 

Aleksandar
Telerik team
 answered on 08 Aug 2022
0 answers
582 views

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.
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 06 Aug 2022
1 answer
306 views

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!
Stoyan
Telerik team
 answered on 04 Aug 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?