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
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>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.
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")
)
)
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/kendo-ui/api/javascript/ui/dropdownbutton/configuration/popup
Thanks, best regards
Patrick
PS: DropDownButton is missing as Tags here ;)
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();
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"); }); }