Questions on UI for ASP.NET Core Forum

1 answer

318 views

I am using the Tag Helpers and have a grid working with the edit popup dialog. My question is how do I customize the popup? Change the title? Change the button colors or text? Change the height and width?

Grid

answered on 09 Feb 2021

1 answer

294 views

Wizard with Upload Component

Hello,

is it possible to Add the Upload Component in the Wizard. I tried it by myself but if i upload a file i get two files. My Issue is the Same like this:

https://stackoverflow.com/questions/54467957/kendo-upload-duplicating-file-after-initial-file-selection

Can Somebody post a code snippet?

Here is my test:

<div id="wizard">

<div>

<h1>Upload Labeling File</h1>

@(Html.Kendo().Upload()

.Name("files")

.Async(a=> a.SaveUrl("./Masterdata/LabelExport?handler=Save")

.RemoveUrl("./Masterdata/LabelExport?handler=Save")

)

.Validation(validation => validation.AllowedExtensions(new string[] { ".json" }))

.Validation(validation => validation.MaxFileSize(2000000))

)

<h3>Click "Next" </h3>

</div>

<div>

<h1>Personal data</h1>

<form class="k-form">

<div class="k-form-container">

<div class="k-form-field">

<label>Name: <input type="text" id="drop"></label>

</div>

<div class="k-form-field">

<label>Surname: <input type="text"></label>

</div>

</form>

</div>

<div>

<h1>Contacts data</h1>

<form class="k-form">

<div class="k-form-container">

<div class="k-form-field">

<label>Telephone: <input type="text"></label>

</div>

<div class="k-form-field">

<label>Mail: <input type="text"></label>

</div>

</form>

</div>

<script>

$("#wizard").kendoWizard({

steps: [{

title: "Welcome",

}, {

title: "Personal Details",

}, {

title: "Contact Details"

}]

});

</script>

Wizard

answered on 09 Feb 2021

3 answers

4.6K+ views

Uncaught RangeError: Maximum call stack size exceeded

Hi I'm getting a JS error when trying to using cascading dropdowns (defined below)

@(Html.Kendo().DropDownList()

.Name("makes")

.HtmlAttributes(new { style = "width:100%" })

.OptionLabel("Select make...")

.DataTextField("text")

.DataValueField("value")

.DataSource(source =>

{

source.Read(read =>

{

read.Url("/NoMatchVehicle/GetMakeValues");

});

})

)

@(Html.Kendo().DropDownList()

.Name("models")

.HtmlAttributes(new { style = "width:100%" })

.OptionLabel("Select model...")

.DataTextField("text")

.DataValueField("value")

.DataSource(source =>

{

source.Read(read =>

{

read.Url("/NoMatchVehicle/GetModelValues?make=");

read.Data("makes");

})

.ServerFiltering(true);

})

.CascadeFrom("makes")

.Enable(false)

.AutoBind(false)

)

The first dropdown is populated fine but upon the selection on the first dropdown I get a JS error

jquery.js:8641 Uncaught RangeError: Maximum call stack size exceeded
at Function.isArray (<anonymous>)
at buildParams (jquery.js:8641)

Any Ideas on why this could be happening I am basing this of this example

DropDownList

answered on 09 Feb 2021

1 answer

114 views

Week view : flip columns

Is it possibly to swap the date and time columns, so the date will appear on the left and vice versa?

Scheduler

answered on 05 Feb 2021

6 answers

1.5K+ views

Can EditorTemplateName be set dynamically?

I have two different editor templates I want to use with the columns in my grid. When the page first initializes I have code that will choose the correct editor name, like this:

.EditorTemplateName(Model.IsUnique ? "UniqueEditor" : "Date");

This part works fine, but I have a scenario where if the user changes the value in a drop-down I need to swap the EditorTemplateName to use the other one. So basically assume when the page loads that Model.IsUnique = false so it gets assigned the default 'Date' editor, I want to be able to swap that out and use 'UniqueEditor' when they choose a particular value from a dropdown change event. Is this possible?

thanks

Grid

answered on 04 Feb 2021

1 answer

227 views

PDF Viewer Dependencies/References

What Telerik Nuget source do I pull down in order to use the PDF Viewer? I have not found this information anywhere in the documentation.

PDFViewer

answered on 04 Feb 2021

2 answers

227 views

Draw Chart Control and get the image stream

Hello,

Can you help me and tell if its possible to "export" Kendo .NET Core Chart to image and save it as a stream so I can process it further ? for example add it to the PDF page in Kendo Document Processing Library

So far I have been using WIndows.Forms.DataVisualization in my .NET Framework project but since we moved to .NET Core and we cant use ported version due to .NET Standard dependencies (https://www.nuget.org/packages/System.Windows.Forms.DataVisualization/), I dont know what we can do now.

Is there any other option... ? I just want to add a chart to a dynamically created PDF in C#

Chart

answered on 02 Feb 2021

8 answers

879 views

All grids stopped showing the data

I have like 17 grids on templates that display and service the CMS portion of a site. Until I noticed today, all grids were functioning fine for display and crud operations. Now the grids do not show the data.

I can put a breakpoint at the end of the read function and see that the data is there.

IQueryable<Product> res = viewModel.Products.AsQueryable<Product>();

DataSourceResult data = res.ToDataSourceResult(request);

JsonResult result = Json(data);

return Json(data);

So as the Read functions exit they have their data but the grids do not display anything! I have been working in an entirely different area on the retail part of the site over the last few days that has nothing to do with Telerik and have not changed any of the code on that controller or associated views that have to do with the CMS portion. I am completely stumped on this one

Any suggestions would greatly help. This is an important issue that has the CMS side of the site down.

Thanks

Grid

answered on 30 Jan 2021

4 answers

391 views

Unable to make grid editable with custom Editor Template

I've been following the sample posted here https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/templates/editor-templates for creating a drop down list editor for the grid.

Initially the column will display fine, but as soon as I try to make the grid editable the entire grid breaks and displays nothing, not even an error message or anything.

@(Html.Kendo().Grid<TestTelerikGrid.Models.ActualExpenditureDto>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.Quantity);

columns.Bound(c => c.RawCostRate);

columns.Bound(c => c.ExpenditureTypeOption).ClientTemplate("#=ExpenditureTypeOption.Name#").Sortable(false).Width(180);

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Sortable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Sort(sort => sort.Add("Id").Ascending())

.ServerOperation(false)

.Batch(true)

.Model(model =>

{

model.Id(r => r.Id);

})

.Read(read => read.Action("Expenditure_Read", "Home"))

)

public class ActualExpenditureDto

{

public int Id { get; set; }

[Display(Name = "Quantity")]

public string Quantity { get; set; }

[Display(Name = "Raw Cost Rate")]

public string RawCostRate { get; set; }

[UIHint("ExpenditureTypeEditor")]

[Display(Name = "Expenditure Type")]

public ExpenditureTypeModel ExpenditureTypeOption { get; set; }

}

public class ExpenditureTypeModel

{

public int Id { get; set; }

public string Name { get; set; }

}

Controller:

public IActionResult Index()

{

ViewData["lookupExpenditureType"] = GetExpenditureTypes();

return View();

}

public ActionResult Expenditure_Read([DataSourceRequest] DataSourceRequest request)

{

List<ActualExpenditureDto> dtos = new List<ActualExpenditureDto>();

ActualExpenditureDto dto = new ActualExpenditureDto();

dto.Id = 1;

dto.Quantity = "3";

dto.RawCostRate = "7";

dto.ExpenditureTypeOption = GetExpenditureTypes().First();

dtos.Add(dto);

dto = new ActualExpenditureDto();

dto.Id = 1;

dto.Quantity = "55";

dto.RawCostRate = "98";

dto.ExpenditureTypeOption = GetExpenditureTypes().Last();

dtos.Add(dto);

var toReturn = Json(dtos.ToDataSourceResult(request));

return toReturn;

}

private List<ExpenditureTypeModel> GetExpenditureTypes()

{

List<ExpenditureTypeModel> expTypes = new List<ExpenditureTypeModel>();

ExpenditureTypeModel typ = new ExpenditureTypeModel();

typ.Id = 1;

typ.Name = "Type 1";

expTypes.Add(typ);

typ = new ExpenditureTypeModel();

typ.Id = 2;

typ.Name = "Type 2";

expTypes.Add(typ);

return expTypes;

}

ExpenditureTypeEditor.cshtml

@using Kendo.Mvc.UI;

@(Html.Kendo().DropDownList()

.Name("ExpenditureTypeOption")

.DataValueField("Id")

.DataTextField("Name")

.BindTo((System.Collections.IEnumerable)ViewData["lookupExpenditureType"]) // A list of all expenditure types which is populated in the controller.

)

I have a full sample project which shows the problem as well, if the above is not enough, but it is too large to attach here as a zip file, so I'm not sure the best way to share it.

Grid

answered on 28 Jan 2021

8 answers

643 views

Project Creation

With all the various options available to us these days, it is becoming more difficult to create a empty project that is actually usable. I am starting to wonder if I am completely missing something obvious and hope someone can point out the error in my ways.

First, I am a strong Telerik advocate so while this might come out as a negative towards them, it is not intended to be so. I fully expect this is a result of changes Microsoft made between VS 2019 and its predecessor.

Creating a project in Visual Studio used to be as simple as "File/New Project". Upon selection of a template the requisite Telerik wizard would launch and you could pick from various options. The end result was a usable project which would compile and produce code in the required framework. Simple, usable and very reliable.

Then Microsoft added some new wizards to the mix and, in my opinion, things went to the dog house.

For example try to create a Telerik UI Asp.net Core 3.1 project. You can't. In the created projects only .NET Core 2.1 is available as the only option. All the websites show options to select 3.0, 3.1, .NET Core 5.0 however those options to not appear available to mere mortals. My frameworks are all current or better.

As an example consider the following:

Launch VS 2019
Use Telerik Extension Menu
Select Telerik UI for ASP.NET Core menu item
Select create New Telerik Project. The VS 2019 "wizard" launches asking for project name, location to place project, and solution name. Upon pressing the "Create" button, the Telerik "wizard" appears. I am presented with Core 2.1 as my only option. No 3.0, 3.1, or .net 5.0 available. I am allowed to pick HTML or Tag options.

Another option tried:

Use VS 2019 "New Project" menu item.

Select ASP.Net Core Web Application from choices of templates. I can select from multiple project types along with choice of .NET Core frameworks. .NET 2.1, 3.1, and 5.0 are available choices. For example, choose .NET Core 3.1 and ASP.NET Core Web Application (Model-View-Controller) works. Right Clicking upon the .NET Core 3.1 project created allows you to use the "Convert to Telerik UI for ASP.NET Core" menu item. The resulting project actually works. I see no direct way to creating a Telerik project except by this upgrade process.

Using the .NET Core 5.0 option fails when the "Convert to Telerik UI for ASP.NET Core" menu item. A cryptic error is displayed which looks like a exception occurred during the conversion process. The resulting project is not usable.

This all leads me to ask how is one to "officially" create .NET Core 3.1 or newer Telerik based projects? Have I somehow missed downloading some templates I should have and do not know it? Have I somehow gotten myself too "current" and suffering the consequences?

While the default Microsoft wizards seem to be working, I prefer to create Telerik based projects as their toolsets historically have been extremely valuable.

Your guidance is appreciated.

Installer and VS Extensions

answered on 27 Jan 2021