Hi,
The following code snippet is passing validation incorrectly. It is marked on the field and model as Required but is not being flagged as such when no option is selected.
HTML5 (form):
<div class="form-floating mb-3">
@(Html.Kendo().DropDownListFor(m => m.PrimaryAnalystId).OptionLabel(new { Person = "[Select a person]", PersonId = 0 }).DataTextField("Person").DataValueField("PersonId").DataSource(s => s.Read(r => r.Action("GetPeople", "Utility", new { type = "analyst" }))).HtmlAttributes(new { @class = "form-select", required = "required" }))
<label asp-for="PrimaryAnalystId">Primary Analyst</label>
</div>
C# (model):
[Required]
public int PrimaryAnalystId { get; set; }
TS/JS (validator):
const validator = $("#form1").kendoValidator({ validationSummary: { container: "#summary" } }).data("kendoValidator");
$(function () {
$("#submit").on("click", function (event) {
event.preventDefault();
if (validator.validate()) {
alert('valid');
} else {
alert('invalid');
}
});
});
page:
var dataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
pageSize: 25000,
serverPaging: false,
serverGrouping: false,
transport: {
read: {
url: urlRead,
data: kendo.antiForgeryTokens(),
type:"GET"
},
create: {
url: urlCreate,
data: kendo.antiForgeryTokens(),
cache: true,
},
update: {
url: urlUpdate,
data: kendo.antiForgeryTokens(),
cache: true,
},
destroy: {
url: urlDestroy,
data: kendo.antiForgeryTokens(),
cache: true
},
parameterMap: function (data, type) {
//if (type == "create") {
// // send the created data items as the "models" service parameter encoded in JSON
// return { models: kendo.stringify(data.models) };
//}
}
},
//requestStart: function() {
// kendo.ui.progress($("#"+gridName), true);
//},
//requestEnd: function() {
// kendo.ui.progress($("#"+gridName), false);
//},
sync: function (e) {
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: model,
errors: function (response) {
//ShowNotification(response);
return response.error;
}
},
error: function (e) {
//ShowNotification("Error");
dataSource.cancelChanges();
}
});
//dataSource.bind("error", function () { ShowNotification("dsError") });
grid.setOptions({
dataSource: dataSource,
persistSelection: true,
navigatable: true,
resizable:true,
reorderable:true,
dataBound: function (e) {
if (e.sender.dataSource.view().length > 0) {
e.sender.select("tr:eq(0)");
grid.trigger("change");
grid.unbind("dataBound");
}
}
});
backend: Controller
[HttpPost("AddCoatingType")]I want to display a boolean value in an ASP.NET Core Kendo grid column. However, I need it to display a checkbox in the column because I don't want to show the users the raw data. So, I put in a custom client template because it's not an option to have booleans display a checkbox despite that seeming like an option that should be available by default. However, this grid is supposed to be editable inline using the default CRUD operations and you have to click on the cells to bring up the editor.
The default editor for a boolean column is a checkbox. So, the users click on a checkbox to bring up a different checkbox and it looks like it just didn't work. If I make the initial checkbox greyed out, it looks like they can't edit it. So, no matter what I do, I can't make a column a checkbox and use the default editor without a bunch of ugly design issues which is ridiculous.
Am I just missing something? Is there a better way than resorting to doing scripting with Javascript and setting the column to uneditable?
Using custom validity as below...
@(Html.Kendo()
.TextBoxFor(m => m.Task)
.Value(null)
.HtmlAttributes(new
{
required = "required",
oninvalid = "this.setCustomValidity('Enter a task')",
oninput = "this.setCustomValidity('')"
})
)
I've tried to do the same for other controls (numeric textbox, datetime picker, autocomplete) but it doesn't work.
For example, when trying the same thing for numeric textbox, in console I get an error "An invalid form control with name='Advance' is not focusable.
@(Html.Kendo()Hi,
I upgraded my asp.net mvc project to DotNet7 and updated Telerik to Progress® Telerik® UI for ASP.NET Core version 2023.3.1010, which is the latest. This Telerik package pulls in Microsoft.AspNetCore.Mvc.Core and Microsoft.AspNetCore.Mvc.Cors. Both these packages are depreciated and contain vulnerabilities as noted in CVE-2019-0548: https://msrc.microsoft.com/update-guide/en-US/advisory/CVE-2019-0548
Questions:
- Do you plan on removing the reference to the depreciated packages? Apparently everything is now included in the base aspnet SDK Microsoft.NET.Sdk.Web.
- Does using this package leave us vulnerable to the issue noted in the CVE?
Thanks!
I'm having trouble setting the DateTimePicker to use the European style calendar (where weeks start on Monday) and a 24-hour time picker. Despite my attempts, I haven't been successful in achieving this configuration. I'm seeking guidance or a solution to implement this specific style for the DateTimePicker.
I have a listview that a user can click a button on and go to a new page. I pass the current page and the id of the selected item to the new page. When the user clicks on a link to return to the page with the listview, the page and the id are passed back. I can change the page to the correct page and select the record in the dataBound event as shown below but, I have not been able to figure out how to scroll it into view. Is there a way to do that?
function dataBound(e){
var listViewDS = $("#lvDisplay").data("kendoListView").dataSource;
var myPage = '@ViewBag.CurrentPage';
var myId = '@ViewBag.CurrentId';
if (myPage != 1){
setTimeout(() => { listViewDS.page(myPage); }, 1000);
var listView = $("#lvDisplay").data("kendoListView");
var dataItems = listView.dataSource.view();
var index = 0;
for (var j = 0; j < dataItems.length; j++) {
if (dataItems[j].Id == myId) {
index = j;
listView.select(index);
var row = e.sender.element.find("[data-uid='" + dataItems[j].uid + "']");
row.addClass("k-state-selected");
};
};
}
}
I have tried the code below but always get an error for top.
$("#lvDisplay").scrollTop($("#lvDisplay").find(".k-state-selected").position().top);