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.
1 Answer, 1 is accepted
Hi Dave,
I appreciate you sharing the code configuration on your side.
As far as I understand you are experiencing the reported behavior in the Telerik.Examples.RazorPages GitHub repo.
Based on that I tested the behavior in the WizardIndex.cshtml located in the Pages/Wizard directory of the project. Unfortunately, I wasn't able to reproduce the problem.
Here is a screen capture of the behavior observed on my side.
Therefore could you please isolate the observed behavior in a sample project with dummy data and send it back to here? This will enable me to investigate the issue more thoroughly and suggest a possible solution faster.
Thank you for your consideration in advance.
Regards,
Stoyan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 2
Iron
Iron
Thanks, Stoyan.
When I run the sample code from Github as a standalone solution, everything works perfectly. My problem comes when I lift the Wizard example page and drop it into my current code as-is. This is when I get the error above.
I thought at first there was a problem with the layout so I created a clean layout that only had the scripts and the RenderBody method. I still get the same error with the clean layout (none of my CSS or JS files, really nothing more than what you see above).
This page along with pretty much every page except the Login page sits behind an authentication wall using ASP.NET Core Identity. So I tried turning that off, but still the same result. I went through the PROGRAM.CS file and commented out literally everything not necessary to get into debug mode. Yes, you guessed it - same problem.
I thought for a while that maybe there was a problem with the license JS file. I pulled that out and the console window first showed a message about being unlicensed (as expected), but the unhandled error was right after that.
I am truly stumped - I have tried everything and as long as it is in this project, the Wizard will not work. I would bundle this up and send it to you except the project is huge, there are many requirements plus the needed database which also serves up some configuration for the site. It is literally too big to send, and if I short circuit this and send a smaller version, you will see that it does work.
Hi Dave,
Thank you for the effort you'же done to resolve the issue and for sharing the actions you've undertaken on your side.
Since you aren't able to share an isolated sample I recommend to try removing the bootstrap.bundle.min.js file from the Layout as Twitter Bootstrap has been known to interfere with the client-side resources of Kendo in the past.
If that doesn't prove helpful please follow the steps below to find and share the serialized Wizard:
- Inspect the View source of the page.
- Search for kendoWizard.
- Copy the entire content of the script tag of the Kendo Wizard and paste it into a text file.
- Attach the file in your reply - this will enable me inspect how the Wizard serializes on your side and compare it with the one that works locally.
Rank 2
Iron
Iron
Thanks again, Stoyan. I tried it without Bootstrap and I also tried it with the version you scaffold when using the Create New Project addin. There is just something in my project that is creating the problem, but it only happens with the Wizard control.
To get around this, I wrapped the Wizard in a form and then used content script blocks for each step. I am not using the Tag option at all, just individual steps with ContentId options pointing to the appropriate script blocks. Seems to be working for me even if it is a little inelegant.
I am happy that although we weren't able to pinpoint the exact cause of the error you were able to resolve the issue on your side.
We remain available if further questions arise.