Questions on UI for ASP.NET Core Forum

1 answer

208 views

Is there a way to refresh an Asp.Net Core PivotGri?

i.e.: I have a PivotGrid open. I know that there are changes to the underlying tables and I want to see the changes in the PivotGrid without having to close it and then re-open it.

Using Asp.Net Core 6, C# and Telerik 2323.1.307

Thanks

PivotGrid

answered on 29 Mar 2023

1 answer

110 views

How to set autowidth for column on server exported Excel

Hello,

We are exporting data to Excel server-using something similar to:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/export/server-export

How do we set the column to autowidth=true or to adjust the width of the column to the size of the content?

Thanks

Grid

answered on 27 Mar 2023

1 answer

112 views

Chiplist Clear Items

Is there a way to clear the chiplist items using jquery. Can populate, however have not found a way to clear list.

ChipList

answered on 27 Mar 2023

0 answers

109 views

Spreadsheet - Count of rows set by datasource

Hey guys,

I'm currently working newly with the kendo spreadsheet. Default amount of rows is 200 and I can define it programatically, I know.

My spreadsheet has a datasource. Is there a smart solution to handle the count of rows by it's datasource? So if the datasource has 400 elements, that my spreadsheet increase the rows?

Best Regards,
Daniel

@(Html.Kendo().Spreadsheet()
	.Name("bestandsliste")
	.HtmlAttributes(new { style = "width:100%" })
	.Sheets(x =>
	{
		x.Add()
			.Name("Bestandsliste")
			.DataSource<Fahnenbestand>(y => y
				.Custom()
				.Transport(z => z.Read("spreadsheet_onRead"))
			);
	})
	.Sheetsbar(false)
	.Toolbar(false)
)

function spreadsheet_onRead(options) {
	$.ajax({
		url: `@ViewData[ViewDataVariables.UrlWebApi]/FlagCategory/GetOverviewAllFlagsAsSpreadsheet`,
		headers: { 'Authorization': '@token' },
		success: function (result) {
			console.log(options);
			console.log(options.rows);
			options.success(result.Data);
		},
		error: function (result) {
			options.error(result);
		}
	});
}

Spreadsheet

asked on 27 Mar 2023

1 answer

176 views

expanding a column not working in kendo-react-grid v5.12.0

expanding a column in a data grid was working fine in the previous version but not in version 5.12.0.

when I click on the + sign to expand it's showing the -sign (like it's expanded) but it's not triggering any event to show the hidden content.

Grid

answered on 27 Mar 2023

1 answer

156 views

Where is SelectedValue on DropDownTree-Item?

How do you set, and get back the selected value of an dropdownlist-item set through local data binding? Here you can see that I have a list of judges, and a list of court dates for each judge, I would like to be able to set, and get back the id of each court date in the PostBack in razor pages. How do I do so?

<kendo-dropdowntree name="dropdowntree" auto-width="true" >
<items>
@{
foreach (var judge in @Model.JudgesTreeView)
{
<dropdowntree-item text="@judge.Name" title="@judge.Name">
<items>
@{
foreach (var hearings in judge.HearingDate)
{
<dropdowntree-item text="@hearings.Text" >
</dropdowntree-item>
}
}
</items>
</dropdowntree-item>
}
}
</items>
</kendo-dropdowntree>

DropDownTree

answered on 24 Mar 2023

1 answer

116 views

How to ensure grid has values returned from its Data method

Have a similar scenario as below (taken from example)
https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/faq

However, in my case, the "additionalData" method is trying to read the values from a Kendo DropDownlist, that has its own .Read method and it appears the Grid is trying to load via its Read method before the dropdown has finished loading via the controller method it calls. How can I ensure the grids .Data method has all its vallues available before its .Read method is called. The Dropdown's read method doesnt return in time before it returns its JSON object with one of its values is null and this causes the grid .Read method to take way too long.

// Omitted for brevity.
.DataSource(dataSource => dataSource.Ajax()
.Read(read => read
.Action("Read", "Home")
.Data("additionalData")
)
)
// Omitted for brevity.
<script>
function additionalData() {
return {
userID: 42,
search: $("#search").val()
};
}
</script>

DropDownList

answered on 23 Mar 2023

1 answer

472 views

Wizard will not render when using a form

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.

Wizard

answered on 23 Mar 2023

1 answer

198 views

Header and footer always visible in every page?

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

General Discussions

answered on 22 Mar 2023

1 answer

256 views

How to disable popup if no data is found, DropDownList / Multiselect

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

DropDownList

MultiSelect