Questions on UI for ASP.NET Core Forum

2 answers

323 views

I have a page bound to model with multiple comboboxes and textboxes which like
@(Html.Kendo().ComboBoxFor(i => i.Accountant)...) and @(Html.Kendo().TextBoxFor(m => m.ZipCode)...) etc.
I also have a textbox bound to "Name" property of the model:
@(Html.Kendo().TextBoxFor(m => m.Name)...)

Also on the same page I have a grid (bound to another data) with popup editable window.
And this popup window also has a textbox bound to "Name" property (but from another model).
This particular textbox looks like simple input, not like kendo ui element.

I think, this is because I have two TextBoxFor elements, each bound to a property "Name" and so they have same id attributes ("#Name").

Is it possible to make textbox in popup window to looki like kendo element without renaming property of the model? Or is it possible to change the id of the second TextBoxFor element?

I tried to add the .Name("AnotherName") method to the second TextBoxFor element, but it doesn't work, the page doesn't load correctly. I tried to add the .Name("AnotherName") method to the first TextBoxFor element, but I received an error "You cannot override component name when bound to a model expression"

TextBox

answered on 02 Dec 2020

11 answers

961 views

What's with the Theme Builder?

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

460 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

318 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.3K+ 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

116 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

580 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

5.1K+ 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