Questions on UI for ASP.NET Core Forum

1 answer

300 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.2K+ 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

104 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

557 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.9K+ 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

747 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

133 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

370 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

2 answers

142 views

Can't create .NET 5 Telerik Application

I'm trying to create a Telerik ASP .NET Core MVC Application (Grid Razor Pages) that uses .NET 5. However, there's not an option for .NET 5. Is this not possible?

Thanks,

Tim

Installer and VS Extensions