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

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.

Stoyan
Telerik team
 answered on 23 Mar 2023
1 answer
209 views

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

Alexander
Telerik team
 answered on 22 Mar 2023
1 answer
286 views

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

Aleksandar
Telerik team
 answered on 21 Mar 2023
1 answer
123 views

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>()
                        .Name("users")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.UserName);
                            columns.Bound(p => p.FirstName);
                            columns.Bound(p => p.LastName);
                            columns.Bound(p => p.Email);
                            columns.Bound(p => p.LastLoginDate).Format("{0:MM/dd/yyyy hh:mm}");
                            columns.Bound(p=> p.UserPONames).Title("Program Office Names");
                            columns.Bound(p=> p.UserRoleName).Title("User Role Names");
                            columns.Command(command => { command.Custom("Edit").Click("showCreate");@* command.Destroy().Text(" ");*@ }).Width(150);
                        })

 

Alexander
Telerik team
 answered on 20 Mar 2023
0 answers
487 views

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});
and this goes on further. This code works as expected up to and including the NuGet package Telerik.UI.for.AspNet.Core 2022.2.621. Any version after that, from 2022.2.802 up to and including the latest as of writing this post (2023.1.314) exhibit the issue where the tab is not selected by default when .Selected is true. 

For now I am just using the older version that is working, but I would like to upgrade at some stage to get all of the other changes in later versions. It would great if this could be fixed, whether on my end or in a future release.

Thanks
Bradley
Top achievements
Rank 1
 asked on 17 Mar 2023
2 answers
137 views

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?

CPS
Top achievements
Rank 1
Iron
Iron
 answered on 15 Mar 2023
0 answers
250 views
I'm using two related listboxes to transfer data from one list to another.  In my backend, when I reference Request.Form["lstAssociated"] I can get a list of the id's from the listbox that contains the item I selected to send to the other list, however, I don't see anywhere in the data how I can obtain the ID of just the item I have selected.  We are using Razor forms.
Danielle
Top achievements
Rank 1
Iron
Iron
 asked on 14 Mar 2023
1 answer
138 views
I try to upload a 15MB xlsx file but it seems to crash/freeze my browser.
Alexander
Telerik team
 answered on 13 Mar 2023
1 answer
1.4K+ views

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. 

Aleksandar
Telerik team
 answered on 13 Mar 2023
1 answer
650 views

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,

 


Alexander
Telerik team
 answered on 10 Mar 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?