First time using the Wizard control and I am running into a serious problem. Here is the console error I receive when I try to run:
Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '$id' is not a valid attribute name.
at attr (https://kendo.cdn.telerik.com/2023.1.314/js/jquery.min.js:4:11364)
at Y (https://kendo.cdn.telerik.com/2023.1.314/js/jquery.min.js:3:4598)
at Y (https://kendo.cdn.telerik.com/2023.1.314/js/jquery.min.js:3:4436)
at Te.fn.init.attr (https://kendo.cdn.telerik.com/2023.1.314/js/jquery.min.js:4:10935)
at string (https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js:10:1312585)
at init.editor (https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js:10:1315704)
at init.refresh (https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js:10:1317046)
at new init (https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js:10:1314677)
at HTMLDivElement.<anonymous> (https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js:9:40719)
at Function.each (https://kendo.cdn.telerik.com/2023.1.314/js/jquery.min.js:2:2898)
This happens in any time I try to add anything more than just Content items. Here is my page using the sample code I found in Telerik's Github repo:
@page
@model WilliamsKastner.Pages.CreateCarrierInvoiceModel
@{
ViewData["Title"] = "Create Carrier Invoice";
}
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@{
var token = Xsrf.GetAndStoreTokens(HttpContext).RequestToken;
}
<h2 style="text-align: center;">Create Carrier Invoice</h2>
<p style="text-align: center;">Please select whether you want to create an end of month or end of quarter invoice. Verify the dates and click the Next button to continue.</p>
<hr class="dividerBar"/>
@(Html.Kendo().Wizard()
.Name("wizard")
.Tag("form")
.Events(ev => ev.Done("wizardDone"))
.HtmlAttributes(new { url = @Url.Page("CreateCarrierInvoice"), method = "POST" })
.Steps(s =>
{
s.Add<CreateCarrierInvoiceModel.UserModel>()
.Title("Account Details")
.Form(f => f
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.FormData(Model.UserViewModel)
.Items(items =>
{
items.Add().Field(p => p.AccountDetails.Username).Label(l => l.Text("Username:")).InputHtmlAttributes(new { required = "required", validationMessage = "Username is required !" });
items.Add().Field(p => p.AccountDetails.Email).Label(l => l.Text("Email:")).InputHtmlAttributes(new { type = "email", required = "required", validationMessage = "Email is not valid !" });
items.Add().Field(p => p.AccountDetails.Password).Label(l => l.Text("Password:")).InputHtmlAttributes(new { @type = "password", required = "required", validationMessage = "Password is required !" }).Hint("Hint: enter alphanumeric characters only.");
})
)
.Buttons(b =>
{
b.Next();
});
s.Add<CreateCarrierInvoiceModel.UserModel>()
.Title("Personal details")
.Form(f => f
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.FormData(Model.UserViewModel)
.Items(items =>
{
items.Add().Field(p => p.PersonalDetails.FullName).Label(l => l.Text("Full Name:")).InputHtmlAttributes(new { required = "required", validationMessage = "Full Name is required !" });
items.Add()
.Field(p => p.PersonalDetails.Country)
.Label(label => label.Text("Country:"))
.Editor(e =>
{
e.AutoComplete()
.DataTextField("Text")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "France",
},
new SelectListItem() {
Text = "Germany",
},
new SelectListItem() {
Text = "Italy",
},
new SelectListItem() {
Text = "Netherlands",
},
new SelectListItem() {
Text = "Norway",
},
new SelectListItem() {
Text = "Spain",
}
});
});
items.Add()
.Field(p => p.PersonalDetails.About)
.Label(l => l.Text("About:").Optional(true));
})
)
.Buttons(b =>
{
b.Previous();
b.Next();
});
s.Add().Content("<h3>Click on the \"Done\" button to complete your registration.</h3>");
})
)
<script>
function wizardDone(e) {
$("#wizard").append($("<input type='hidden' name='__RequestVerificationToken' value='@token' data-stop='true' />"))
}
</script>
And finally, the code behind for the page:
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using WilliamsKastner.Data;
namespace WilliamsKastner.Pages
{
public class CreateCarrierInvoiceModel : PageModel
{
[BindProperty]
public CarrierInvoiceModel InvoiceViewModel { get; set; }
[BindProperty]
public UserModel UserViewModel { get; set; }
//[BindProperty(SupportsGet = true)]
//public string InvoiceTypeID { get; set; }
private readonly ExtranetDbContext _context;
private readonly UserManager<ExtranetUser> _userManager;
public CreateCarrierInvoiceModel(ExtranetDbContext context, UserManager<ExtranetUser> InjectedUser)
{
_context = context;
_userManager = InjectedUser;
}
public void OnGet()
{
UserViewModel = new UserModel()
{
AccountDetails = new Account()
{
Username = "kev123",
Email = "kevin@mymail.com"
},
PersonalDetails = new Person()
{
FullName = "Kevin Carter",
Country = "Norway"
}
};
//InvoiceViewModel = new CarrierInvoiceModel
//{
// EndDate = "This is a test",
// Period = "0",
// StartDate = "This is another test",
// UserID = ""
//};
}
public IActionResult OnPost()
{
var model = Request.Form;
if (!ModelState.IsValid)
{
return Page();
}
return RedirectToPage("Success");
}
public class CarrierInvoiceModel
{
[Required]
public string Period { get; set; }
[Required]
public string StartDate { get; set; }
[Required]
public string EndDate { get; set; }
public string? UserID { get; set; }
}
public class UserModel
{
public Account AccountDetails { get; set; }
public Person PersonalDetails { get; set; }
}
public class Account
{
[Required]
public string Username { get; set; }
[Required]
public string Email { get; set; }
[Required]
public string Password { get; set; }
}
public class Person
{
[Required]
public string FullName { get; set; }
[Required]
public string Country { get; set; }
public string About { get; set; }
}
}
}
This is the Head tag in the _Layout file:
@{
var kendoVersion = "2023.1.314";
}
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link href="https://kendo.cdn.telerik.com/themes/6.2.0/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.all.min.js"></script>
<script src="~/kendo-ui-license.js"></script>
<script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.aspnetmvc.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
FYI, I have tried every v5 version of Bootstrap. If I download and run the sample solution from Github, all of the steps are rendered together on the page - in other words, all steps are shown and none hidden. And if I just put 3 Content items here, the Wizard shows all 3 as steps and everything just works.
What in the world am I doing wrong? All of the other Telerik UI controls that I am using (Grid and Chart) work as expected. Just not the Wizard.
Hi,
My website layout contains a nav, main and footer part (see attached file).
Is it possible to have the nav (header) and footer always visible on the page?
If I now have a long main part, the footer is at startup not visible and when scrolling the header will disappear.
Thanks and best regards
Hello,
How do I disable popup if no DropDownList/Multiselect contains no data or filtering does not find any items using html helpers:
@(
Html.Kendo().DropDownList()
.Name("Testi")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Source)
)
If I instantate controls using jQuery I would get this done setting noDataTemplate to false:
$("#Testi").kendoDropDownList({ noDataTemplate: false, ..
On html helpers there is no option to set NoDataTemplate boolean value and setting string value empty or null does not work.
Mikko
I need to add a scope attribute to make the KendoUI Grid 508 Compliant. How do I do that?
<th scope="col" </th>
<th scope="row"></th>
@(Html.Kendo().Grid <PGC.Administration.ViewModels.UsersVM>()
Hi all,
I'm having an issue with my TabStrip code.
Basically, .Selected and .SelectedIndex do not work to open the given tab when the page loads. I have to manually click on a tab to display it, and there is some strange formatting that makes it seem like the desired tab was selected but it was never displayed (borders around the tab etc).
I can pinpoint precisely the version of the NuGet package where this problem is introduced, and can confirm it exists up to the latest.
Code excerpt:
@(Html.Kendo().TabStrip()
.Name(Model.SessionId + "_SessionPanelTabStrip")
.Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
.Items(ts =>
{
ts.Add().Text("General")
.Selected(true)
.LoadContentFrom("SessionPanelGeneral", "Sessions", new {sessionId = Model.SessionId});
I got a grid that displays orders and details
This is the main grid:
@(
Html.Kendo().Grid<BoWeb.Web.Models.OrderModel>().Name("gridOrders")
.Sortable()
.Scrollable()
.Columns(cols =>{
cols.Bound(col => col.OrderNr);
cols.Bound(col => col.CreateDate).Format("{0:dd.MM.yyyy hh:mm}");
cols.Bound(col => col.PaymentResource);
cols.Bound(col => col.ShippingResource);
cols.Bound(col => col.ShippingSurcharge);
cols.Bound(col => col.TotalIncl);
})
.ClientDetailTemplateId("tmplOrderItem")
.DataSource(ds => ds
.Ajax()
.Read(r => r.Url("/Customer/Admin?handler=ReadOrders").Data("forgeryToken"))
.Model(m =>{
m.Id(id => id.PKOrder);
})
)
.Deferred()
)
This works fine.
The template looks like this:
<script id="tmplOrderItem" type="text/kendo-tmpl">
@(
Html.Kendo().Grid<BoWeb.Web.Models.OrderItem>().Name("gridCart_#=PKOrder#")
.Sortable()
.Editable(edit => edit.Mode(GridEditMode.InLine))
.Columns(cols =>{
cols.Bound(col => col.Quantity).EditorTemplateName("IntegerEditor");
cols.Bound(col => col.Caption);
cols.Bound(col => col.SinglePriceIncl);
cols.Bound(col => col.TotalPriceIncl);
cols.Command(col =>
{
col.Edit().Text(" ").UpdateText(" ").CancelText(" ");
}).Width(120);
})
.DataSource(ds => ds
.Ajax()
.Read(r => r.Url("/Customer/Admin?handler=ReadOrderItems&orderId=#=PKOrder#").Data("forgeryToken"))
.Update(u => u.Url("/Customer/Admin?handler=UpdateOrderItem").Data("forgeryToken"))
.Model(m =>
{
m.Id(id => id.FKSubItem);
m.Field(f => f.Quantity);
m.Field(f => f.Caption).Editable(false);
m.Field(f => f.SinglePriceIncl).Editable(false);
m.Field(f => f.TotalPriceIncl).Editable(false);
})
)
.ToClientTemplate()
)
</script>
The read works. No problem and data is displayed correctly.
But the update-handler is not called.
The handler looks like this:
public JsonResult OnPostUpdateOrderItem([DataSourceRequest]DataSourceRequest request, OrderItem item)
{
if(item != null && ModelState.IsValid)
{
}
return new JsonResult(new[] { item }.ToDataSourceResult(request, ModelState));
}
I also inject Xsrf and added
@Html.AntiForgeryToken()
Of course there is also the
@Html.Kendo().DeferredScripts()
Any ideas why this is not working?
Hi,
How do we take a drop down with a list of values and put it on a gridview. and save the chosen values as text.
What would be the best way and easiest way ?
For Example
I have Table A which is bound to the Grid View. I want to show values from one of the column from Table B as a dropdown list of values in one of the column of the grid view. There is no foreign key relationship between the tables.
2 EXAMPLE FOR IDEA:
1) For Example : https://demos.telerik.com/aspnet-core/grid/custom-datasource
How can you add a dropdown list in the product name column, product list is coming from another table where there is no foreign key relationship
2) Another example : https://demos.telerik.com/aspnet-core/grid/foreignkeycolumnbinding : How can we achieve category binding without a foreign key.
Hi
I'm converting some code from Kendo MVC to Kendo aspnet core, and I've found something different, this used to work in the .cshtml
@(Html.Kendo().Grid<AppointmentDateModel>()
.Name("grid")
.Columns(columns =>
{
columns.Template(c => { }).ClientTemplate("<div>#= TemplateString #</div>");
})
)
But it won't compile for Kendo asp.net core, it looks like ClientTemplate() has to be on a bound column (GridBoundColumnBuilder), rather than a template column (GridTemplateColumnBuilder).
Is there a standard way to code this, I don't have a column to bind to?
Thanks,