Questions on UI for ASP.NET Core Forum

11 answers

850 views

Ok, so what is the deal with the Progress/Telerik Theme builder? My hopes was that it would skin the kendo controls so I wouldn't have to mess (much) with the CSS, and to possibly have multiple color versions.

The problem is, it seems there are two, both have issues but the "newer" one seems to have less functionality.

There is this: http://themebuilder.telerik.com (The "newer" builder)

But this "newer" builder just seems to ignore some controls. For example, the Grid's hover feature seems to be ignored, and colorization seems to have no effect on the grid (for example, selecting a row).

I guess more granularized options are out of the question? If I have to add more css AFTER using the theme builder, why am I using the theme builder?

I tried the Bootstrap4 version, but it has weird issues as well. things like headers are out of alignment or just completely malformed. I thought maybe it was because I didn't have Bootstrap4 setup in my project, but that didn't seem to help either!

Then there is this: https://demos.telerik.com/kendo-ui/themebuilder

This one seems to be more complete but has it's issues too. This one seems to work better than the "Progress Sass" version, but I'm worried it is going to disappear because of the "newer", "better" Progress Theme Builder.

Can someone explain/clarify?

Thanks!

General Discussions

answered on 02 Dec 2020

1 answer

412 views

UIHint ignored on form items

I have properties decorated with the UIHint attribute on my view models. When binding one of these properties to a Form control's items, it ignores the UIHint (and the type completely in some cases). Can you only set a Form's item control type via the Editor method? Or can the Form control infer the control type via UIHint somehow?

Form

answered on 27 Nov 2020

1 answer

295 views

kendo grid paging not work - "No items to display"

hi.

i wrote a module for Orchardcore Cms and use telerik kendo grid for asp.net core. i added kendo resource to my "ResourceManifest" class and use it in "index.cshtml" file:

public class ResourceManifest : IResourceManifestProvider

{

public void BuildManifests(IResourceManifestBuilder builder)

{

var manifest = builder.Add();

manifest

.DefineScript("kendo1")

.SetUrl("~/PMS/Assets/lib/kendo/js/kendo.all.min.js");

manifest

.DefineScript("kendo2")

.SetUrl("~/PMS/Assets/lib/kendo/js/kendo.core.min.js");

manifest

.DefineScript("kendo3")

.SetUrl("~/PMS/Assets/lib/kendo/js/kendo.data.min.js");

manifest

.DefineScript("kendo4")

.SetUrl("~/PMS/Assets/lib/kendo/js/kendo.aspnetmvc.min.js");

manifest

.DefineStyle("kendo1-style")

.SetUrl("~/PMS/Assets/lib/kendo/css/web/kendo.bootstrap-v4.min.css");

manifest

.DefineStyle("kendo2-style")

.SetUrl("~/PMS/Assets/lib/kendo/css/web/kendo.nova.min.css");

}

and index.cshtml:

@using Kendo.Mvc.UI

@addTagHelper *, OrchardCore.ResourceManagement

<style asp-name="kendo1-style"></style>

<script asp-name="jQuery" at="Head"></script>

<script asp-name="kendo1" depends-on="jQuery"></script>

<script asp-name="kendo2" depends-on="jQuery"></script>

<script asp-name="kendo3" depends-on="jQuery"></script>

<script asp-name="kendo4" depends-on="jQuery"></script>

<div class="k-rtl">

@(Html.Kendo().Grid<PMS.ViewModels.PersonsViewModel>

()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(name => name.Fullname).Title("name");

columns.Bound(name => name.PersonalID).Title("code");

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.HtmlAttributes(new { style = "height:430px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Model(model =>

{

model.Id(p => p.ID);

})

.Read(read => read.Action("Persons_Read", "Persons").Data("sendAntiForgery"))

))

</div>

and this is my controller:

[AcceptVerbs("Post")]

public async Task<ActionResult> Persons_Read([DataSourceRequest] DataSourceRequest request)

{

var ret = await Getpersons().ToDataSourceResultAsync(request);

return Json(ret);

}

 all things is ok. no javascript error and total item of request is 1157 records but kendo grid is not show page numbers and  "No items to display" message show on buttom of grid!!!

plz help.

thanks.

Grid

answered on 26 Nov 2020

1 answer

2.1K+ views

Uploading files is sending no files to controller

Hello,

When you select a file to be uploaded, it is not being sent to the controller to be saved to a directory or SQL Server. When the controller Async_MedicalCertificateSave is called the parameter files always has 0 count.

Thanks in advance for your help.

My code is as follows:

HTML

@(Html.Kendo().Upload()

.Name("Popupfiles")

.Multiple(false)

.Async(a => a

.Save("Async_MedicalCertificateSave", "SAC")

.Remove("Async_MedicalCertificateRemove", "SAC")

.AutoUpload(true)

)

.Events(events => events

.Upload("OnUpload")

.Select("onSelect")

)

JAVSCRIPT

function OnUpload(e) {

var cboStudent = $("#StudentId").data("kendoMultiColumnComboBox");

e.data = { StudentId: cboStudent.value() };

}

function onSelect(e) {

document.getElementById("OriginalFilename").value = getFileInfo(e);

}

CONTROLLER

public async Task<ActionResult> Async_MedicalCertificateSave(IEnumerable<IFormFile> files, int StudentId)

{

ccwFormsModel db = new ccwFormsModel();

// The Name of the Upload component is "files"

if (files != null)

{

foreach (var file in files)

{

var filetype = file.ContentType;

var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

//var filetype = fileContent.DispositionType;

string dt = DateTime.Now.ToString("yyyyMMdd_HHmm");

string extension = Path.GetExtension(fileContent.FileName.ToString().Trim('"'));

var fileName = StudentId.ToString() + "_MedicalCert_" + dt + extension;

var physicalPath = Path.Combine(HostingEnvironment.WebRootPath, "App_Data", fileName);

using (var fileStream = new FileStream(physicalPath, FileMode.Create))

{

var objfiles = new TmpFileUpload()

{

TmpFileId = 0,

StudentId = StudentId,

Filename = fileName,

OriginalFilename = file.FileName,

FileType = filetype

};

using (var target = new MemoryStream())

{

file.CopyTo(target);

objfiles.UploadedFile = target.ToArray();

}

db.TmpFileUploads.Add(objfiles);

db.SaveChanges();

}

// Return an empty string to signify success

return Content("");

}

public ActionResult Async_MedicalCertificateRemove(string[] fileNames)

{

// The parameter of the Remove action must be called "fileNames"

ccwFormsModel db = new ccwFormsModel();

if (fileNames != null)

{

foreach (var fullName in fileNames)

{

var fileName = Path.GetFileName(fullName);

var physicalPath = Path.Combine(HostingEnvironment.WebRootPath, "App_Data", fileName);

TmpFileUpload lst = db.TmpFileUploads.FirstOrDefault(a => a.OriginalFilename.Equals(fileName));

db.TmpFileUploads.Remove(lst);

db.SaveChanges();

}

// Return an empty string to signify success

return Content("");

}

Upload

answered on 26 Nov 2020

1 answer

100 views

BatchEdit with bad performance

So I have used a grid with batch edit (in cell) for editing offer positions. The offers are quiet big and usually have between 20 and 500 positions.The performance is now really bad and this is almost not usable...

The reason are quiet simple the DOM is getting to big. The simple solution would of course be to implement paging. But the customer needs to see all positions and can even move the positions with drag & drop. It feels kinda too late to change it to paging. It would be a step backwards.

With some tests I have found out that mostly the EditorTemplates are mostly the issue. I use here quiet complex controlls.

Do you have any ideas how to easily improve the performance? Is it maybe possible to render the EditorTemplate during runtime if a cell is clicked?

Here the code for the grid, it is dynamic with some definition classes:

@(Html.Kendo().Grid<dynamic>

()

.Name(gridName)

.Events(events => events

.DataBound("insertRowCount"))

.Columns(columns =>

{

foreach (var col in definition.Grid.Fields.Where(f => !f.Internal))

{

var clientTemplate = "";

var kCol = columns.Bound(!string.IsNullOrEmpty(col.Alias) ?

$"{col.Alias}_{col.Name}" : col.Name)

.Title(col.Title);

if (col.FieldType is IntegerField)

{

kCol.EditorTemplateName("GridIntegerField").EditorViewData(new { fieldType = col.FieldType });

}

else if (col.FieldType is DoubleField)

{

kCol.EditorTemplateName("GridDoubleField").EditorViewData(new { fieldType = col.FieldType });

}

else if (col.FieldType is ListValueField)

{

kCol.EditorTemplateName("GridListValueField").EditorViewData(new { fieldType = col.FieldType });

clientTemplate = $"#= htmlDecode({col.Name}_Display) #";

}

else if (col.FieldType is DataEntityLinkField)

{

//columns.Bound(typeof(string), $"{col.Name}_Display").Hidden(true);

kCol.EditorTemplateName("GridDataEntityLinkField").EditorViewData(new { fieldType = col.FieldType });

clientTemplate = $"#= htmlDecode({col.Name}_Display) #";

}

else if (col.FieldType is CurrencyField)

{

kCol.EditorTemplateName("GridCurrencyField").EditorViewData(new { fieldType = col.FieldType });

clientTemplate = $"#=grid.currencyFormat({col.Name}) #";

}

else if (col.FieldType is BoolField)

{

kCol.EditorTemplateName("GridBoolField").EditorViewData(new { fieldType = col.FieldType });

}

else if (col.FieldType is TextField)

{

kCol.EditorTemplateName("GridTextField").EditorViewData(new { fieldType = col.FieldType });

}

else if (col.FieldType is DateField)

{

clientTemplate = $"#=grid.dateFormat({col.Name}) #";

kCol.Editable("function () { return false; }");

}

if (!string.IsNullOrEmpty(col.ClientTemplate))

{

clientTemplate = col.ClientTemplate;

}

else if (col.FieldType is EditorField)

{

clientTemplate = $"#= htmlDecode({col.Name}) #";

}

if (!string.IsNullOrEmpty(clientTemplate))

kCol.ClientTemplate(clientTemplate);

if (!string.IsNullOrEmpty(col.ClientGroupHeaderColumnTemplate))

kCol.ClientGroupHeaderColumnTemplate(col.ClientGroupHeaderColumnTemplate);

if (col.Width > 0)

{

kCol.Width(col.Width);

}

if (!string.IsNullOrEmpty(col.Format))

{

kCol.Format(col.Format);

}

if (autoIncrementFields.Contains(col.Name))

kCol.Editable("function () { return false; }");

}

if (!definition.Grid.HideBatchEditButtons)

columns.Command(command =>

{

command.Custom("Löschen").Text(" ").IconClass("k-icon k-i-delete").Click("batchEditDelete")

.HtmlAttributes(new { @class = "nu-grid-button", @title = "Löschen" });

if (definition.Grid.ShowNewButton)

command.Custom("Neu").Text(" ").IconClass("k-icon k-i-add").Click("batchEditNewAfter")

.HtmlAttributes(new { @class = "nu-grid-button", @title = "Neue Zeile einfügen" });

});

})

.ToolBar(toolbar =>

{

if (definition.Grid.ShowNewButton)

toolbar.Custom()

.HtmlAttributes(new { onclick = "batchEditNew();" })

.Name("new")

.Text("Neu")

.IconClass("k-icon k-i-plus");

if (!definition.Grid.HideBatchEditButtons)

toolbar.Save().SaveText("Änderungen speichern").CancelText("Änderungen verwerfen");

})

.Sortable(false)

.Filterable()

.Selectable()

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

.DataSource(datasource =>

datasource.Ajax()

.Model(model =>

{

model.Id("Id");

if (sortField is IntegerField)

{

model.Field(sortField.Name, typeof(int));

}

model.Field(Model.ParentLink, typeof(Guid)).DefaultValue(Model.ParentId).Editable(false);

model.Field("Id", typeof(Guid)).DefaultValue(Guid.Empty).Editable(false);

model.Field("Entity", typeof(string)).DefaultValue(Model.Entity).Editable(false);

foreach (var col in definition.Grid.Fields.Where(f => f.FieldType is DataEntityLinkField || f.FieldType is ListValueField))

{

model.Field($"{col.Name}", typeof(Guid)).DefaultValue(Guid.Empty);

model.Field($"{col.Name}_Display", typeof(string)).DefaultValue(string.Empty);

}

foreach (var col in definition.Grid.Fields.Where(f => f.FieldType is CurrencyField))

{

model.Field(col.Name, typeof(double)).DefaultValue(0.0);

}

})

.Batch(true)

.Read(read => read.Action("BatchEditRead", "Entities", new { parentId = Model.ParentId, entity = Model.Entity, useLink = Model.ParentLink, orderBy = sortField.Name }))

.Create("BatchEditUpdateOrCreate", "Entities")

.Update("BatchEditUpdateOrCreate", "Entities")

.Destroy("BatchEditDelete", "Entities")

.Events(events => events.Error("error").Change(definition.Grid.ChangeEvent))

.ServerOperation(false)

)

.AutoBind(true)

)

Grid

answered on 25 Nov 2020

2 answers

535 views

Server Side Grid Grouping not working properly

Hello, I am using kendo grid in .NET core,

We have load dynamically data in grid using Data table I have bind data and also functional server side pagination. I have facing the issue in grouping on dynamically. Can you please help how can I resolved this issue. or share any document?

I have also attached my code screenshots. Please review and let me know asap.

Grid

answered on 25 Nov 2020

7 answers

4.8K+ views

Kendo Grid InCell Drop down list editing

Hi All,

I am working kendo grid and using incell editing mode also adding a simple drop down box, my problem is that drop down box is not rending in the grid, it appears for a while and this disappear.

Can anybody help me? Any event i am missing?? timeout issue ??

thanks

Grid

answered on 24 Nov 2020

4 answers

724 views

Razor Pages and Kendo Tag Helpers

Hi,

I have a razor page where I have two separate forms. Each form will submit and call a separate OnPostAsync method.

To make this happen normally you would use the following:

Which would call the method OnPostFormOneAsync().

How do I achieve the same using a TagHelper button, e.g.

<kendo-button name="TestButton" icon="filter" type="submit" asp-page-handler="FormTwo">Test</kendo-button>

Thanks

Russell

Button

answered on 23 Nov 2020

1 answer

121 views

Aggregate

Hello.

I have two questions.

- Is it possible to calculate server side aggregation ?

- Can we only display a global aggregation (total) but not in the TreeList (sub-total)?

Thank you.

TreeList

answered on 20 Nov 2020

11 answers

351 views

Telerik under netcore 3.1 retro-compatibility issue

Hello,

I currently have a working .netcore 2.2 web project that has telerik 2019.1.115 installed. This project has .netframework 4.7.2 references.

In the process of migrating .netcore from 2.2 to 3.1, we have encountered retro-compatibility issues. From the moment we upgraded our .netcore version, we started getting errors on loading libraries in the startup class on endpoint configuration :

"Unable to load one or more of the requested types.\r\nCould not load file or assembly 'System.Data.Linq, Version=4.0.0.0'. The system cannot find the file specified.\r\nCould not load file or assembly 'System.Data.Linq, Version=4.0.0.0'.

After alot of investigation, we pinpointed that the combination of .netcore 3.1 and telerik together was causing this problem. After migration to 3.1, if we remove the telerik libraries and references, the endpoints get configured properly and we are able to access the website. When adding back the telerik package, the endpoints immediately fail to configure.

Any help would be appreciated

David

General Discussions

answered on 20 Nov 2020