Questions on UI for ASP.NET Core Forum

3 answers

1.1K+ views

Does the kendo non-stacked or stacked bar chart have the ability to have multple groups displayed like the attached example?

I am looking to replicate the coffee/tea per month part of the picture

Chart

answered on 28 Apr 2020

1 answer

381 views

Need help on convert .pttx to .pdf

I want to convert the file powerpoint to PDF using Telerik.Windows.Documents.Flow.FormatProviders.Pdf

PDFViewer

answered on 28 Apr 2020

2 answers

537 views

Get/Set selected row woes

This should be easy, but appears not.

I have a grid with a custom command:

columns.Command(c => c.Custom("Run Report").Click("OnRunReport")).Width(140);

selectable is set as

.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

My OnRunReport needs to get the selected row index and set it as the selected row. This needs to happen before I call:

// this next line only works if .Selectable() is set.

var idx = $("#grid").data("kendoGrid").select().index()

because otherwise idx is -1. If I click on the desired row before clicking on the Run Report button, idx is correctly set.

How to force the selection of the row in the click event of the custom command (In my case OnRunReport)???

The ultimate goal it to get the value of a particular cell for the selected row to be able to pass it to a report.

Any help would be great!

Thanks ... Ed

function OnRunReport(arg)

{

// this next line only works if .Selectable() is set.

var idx = $("#grid").data("kendoGrid").select().index();

var certid = this.dataSource._data[idx].id;

window.location.replace = "/CertificateReport/" + certid;

}

@(Html.Kendo().Grid<IndexModel.CertificateModel>()

.Name("grid")

.ToolBar(t =>

{

if (User.IsInRole("Admin"))

{

t.Create().Text("Add New"); t.Save().Text("Save Changes");

}

})

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

.Editable(e =>

{

if (User.IsInRole("Admin"))

{

e.Mode(GridEditMode.InCell);

}

else

{

e.Enabled(false);

}

})

.Columns(columns =>

{

columns.Bound(c => c.CertId).Width(100).Visible(false);

columns.ForeignKey(c => c.Crop.CropId, (System.Collections.IEnumerable)ViewData["crops"], "CropId", "CommonName")

.Title("Crop").Width(150);

columns.ForeignKey(c => c.Trait.TraitId, (System.Collections.IEnumerable)ViewData["traits"], "TraitId", "TraitDesc").Title("Trait").Width(150);

columns.Bound(c => c.UserFullName).ClientTemplate("#=UserFullName#").Width(150);

columns.ForeignKey(c => c.OriginCountry.CountryId, (System.Collections.IEnumerable)ViewData["originCountries"], "CountryId", "CountryName").Title("Origin Country").Width(150).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });

columns.ForeignKey(c => c.IssuingCountry.CountryId, (System.Collections.IEnumerable)ViewData["issuingCountries"], "CountryId", "CountryName").Title("Issuing Country").Width(150).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });

columns.Bound(c => c.YearIssued).Width(110)

.HtmlAttributes(new { style = "text-align:right; " })

.HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });

columns.Bound(c => c.ExpirationDate).Width(175).Format("{0:d}").HtmlAttributes(new { style = "text-align:right; " })

.HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }); ;

columns.Command(c =>

{

c.Destroy().Text("Delete");

}).Visible(User.IsInRole("Admin")).Width(100);

//columns.Command(c => c.Custom("Upload").Click("OnShowUpload")).Visible(User.IsInRole("Admin")).Width(100);

columns.Command(c => c.Custom("Run Report").Click("OnRunReport")).Width(140);

}).HtmlAttributes(new { style = "margin-left:3px" })

.Events(ge => ge.Change("OnChange"))

.Resizable(resize => resize.Columns(true))

.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

.Scrollable()

.Groupable()

.Filterable()

.Sortable()

.Pageable() //p => { p.PageSizes(true); })

.DataSource(ds =>

ds.Ajax()

.Batch(true)

.Events(ev => ev.Error("errorHandler"))

.ServerOperation(false)

.Read(r => r.Url("/Certificates?handler=CertsRead").Data("forgeryToken"))

.Update(u => u.Url("/Certificates?handler=CertsUpdate").Data("forgeryToken"))

.Create(c => c.Url("/Certificates?handler=CertsCreate").Data("forgeryToken"))

.Destroy(d => d.Url("/Certificates?handler=CertsDestroy").Data("forgeryToken"))

.Model(m =>

{

m.Id(c => c.CertId);

m.Field(f => f.CertId).Editable(false);

m.Field(f => f.Crop).DefaultValue(ViewData["defaultCrop"] as Crop);

m.Field(f => f.Trait).DefaultValue(ViewData["defaultTrait"] as Trait).Editable(User.IsInRole("Admin"));

m.Field(f => f.UserFullName).DefaultValue((string)ViewData["defaultUserFullName"]).Editable(false);

m.Field(f => f.IssuingCountry).DefaultValue(ViewData["defaultIssuingCountry"] as Country).Editable(User.IsInRole("Admin"));

m.Field(f => f.OriginCountry).DefaultValue(ViewData["defaultOriginCountry"] as Country).Editable(User.IsInRole("Admin"));

m.Field(f => f.YearIssued).DefaultValue((int)ViewData["defaultYearIssued"]).Editable(User.IsInRole("Admin"));

m.Field(f => f.ExpirationDate).DefaultValue((DateTime)ViewData["defaultExpiryDate"]).Editable(User.IsInRole("Admin"));

})

.PageSize(10)

)

Grid

answered on 24 Apr 2020

1 answer

174 views

Ensure selected node is visible

I know understand how to set a node in the TreeList as selected on databound. However, if this tree data is long how do I get the control to scroll to the selected node?

My Tree:

<script id="icon-template" type="text/x-kendo-template">

<div class='group-icon'

style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>

<div class='group-name'>#: Name #</div>

</script>

@(Html.Kendo().TreeList<Group>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(225);

})

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

.Selectable(s => s.Mode(TreeListSelectionMode.Single))

.DataSource(dataSource => dataSource

.ServerOperation(false)

.Read(read => read.Action("IndexJson", "Groups").Data("treeGetData"))

.Model(m =>

{

m.Id(f => f.Id);

m.ParentId(f => f.ParentId);

m.Expanded(true);

m.Field(f => f.Name);

})

.Sort(s => s.Add(f => f.Name)))

.Events(events =>

{

events.DataBound("onDataBound");

})

)

JavaScript:

// show the matching groupId as selected in the treelist

function onDataBound(e) {

// Handle the dataBound event.

var treelist = e.sender;

//alert(treelist == null);

var initiallySelectedID = $("#groupId").val();

alert(initiallySelectedID);

var dataItem = treelist.dataSource.get(initiallySelectedID);

//alert(dataItem == null);

var row = $("tr[data-uid='" + dataItem.uid + "']");

treelist.select(row);

}

TreeList

answered on 24 Apr 2020

1 answer

335 views

Difference between CDN resources and NPM resources

I'm trying to add the Kendo UI (v2020.1.406) to my ASP.net Core project through NPM and copy it with Webpack to the lib folder.

Now the problem I'm hitting is the following, If I add the CDN resources to my project, everything works like a charm,... but when I'm adding the same resources with the same version that I installed via NPM to the project, I'm confronted with a wall of error's in the console of my browser. Now I'm not completely sure what is happening, but you can see what happens in the project below

Github Repo KendoNPMResources.

A nudge in the right direction would be awesome !

General Discussions

answered on 24 Apr 2020

4 answers

348 views

Treelist always empty

Hi,

I created a project and i need to put a treelist view to handle parents and child elements of a grid. I created a father and a child, but the page doesn't load any record in my grid. Am i missing something?

The attached files are the grid viewed in my page and the model received from the datasource

Here is the model

public class ProjectTaskViewModel

{

public string IdTask { get; set; }

public string FatherId { get; set; }

public string TaskTitle { get; set; }

}

The View:

@(Html.Kendo().TreeList<Models.ProjectTaskViewModel>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(p => p.IdTask).Title(" ").Filterable(false).Sortable(false).Width("105px").Template("#=customformatter(Id)#");

columns.Add().Field(p => p.TaskTitle).Title("Nsme");

})

.Pageable(p => p.Refresh(true).PageSize(20).PageSizes(new int[] { 20, 50, 100 }))

.Sortable()

.Filterable()

.DataSource(dataSource => dataSource

.Read(read => read.Action("TreeViewDataSource", "ProjectTask").Data("CustomData")) //Function that contains correctly the IdProject param

.ServerOperation(false)

.Model(m => {

m.Id<string>(p => p.IdTask);

m.ParentId<string>(p => p.FatherId);

m.Field(p => p.TaskTitle);

m.Field<string>(p => p.FatherId);

})

)

And finally the TreeViewDataSource:

public JsonResult TreeViewDataSource([DataSourceRequest]DataSourceRequest request, string IdProject)

{

var temp = _db.ProjectTasks.Where(o => o.IdProject == IdProject).Select(o => new ProjectTaskViewModel

{

FatherId = o.ParentId,

IdTask = o.Id,

TaskTitle = o.Title

});

var result = temp.ToTreeDataSourceResult(request, o => o.IdTask, o => o.FatherId, o => o);

return Json(result);

}

TreeList

answered on 23 Apr 2020

5 answers

883 views

Add/Edit records in a popup window

Hello,
I just start to use Telerik UI for core in razor pages project
I have a grid holding some records. I would like to create a custom popup for new and edit records.
The functionality for the add and edit records exist in a view component.
The booking issues for me are
How to use the view component with a popup window.
After successful saving, how to close the popup window to set the focus to the grid.
Appreciate your help, preferable with sample code.

Grid

answered on 22 Apr 2020

1 answer

2.5K+ views

Where is icon list for IconClass

I found several icons list, but I would like to know which list works with commands.

columns.Command(command => command.Custom("DetailsCommand").IconClass("filter").Click("showDetails"));

Grid

answered on 22 Apr 2020

1 answer

337 views

Error after applyed filter on column

I'm wrote this action

[Authorize]

public IActionResult Item_ReadData([DataSourceRequest] DataSourceRequest request, string dateFiler)

{

CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");

var selectedDate = DateTime.Parse(dateFiler, culture);

System.Security.Claims.ClaimsPrincipal currentUser = this.User;

var scope = currentUser.Claims.ToList().SingleOrDefault(c => c.Type == "Scope")?.Value;

using (DbNavision ctx = new DbNavision())

{

var itemsFound = (from rec in ctx.UpSrlItem

select new ItemModel(rec, selectedDate, scope));

var dataResult = itemsFound.ToDataSourceResult(request);

return Json(dataResult);

}

It works ok! But if I apply a filter on a column (attach what I'm doing), it shows me this error.

System.InvalidOperationException: 'The LINQ expression 'DbSet<UpSrlItem>

.Where(u => new ItemModel(

u,

__selectedDate_0,

__scope_1

).No.ToLower() == "fratverde")' could not be translated. Either rewrite the query in a form that can be translated, or switch to client evaluation explicitly by inserting a call to either AsEnumerable(), AsAsyncEnumerable(), ToList(), or ToListAsync().

Model output is a custom, because I need to update additional properties of model that aggregate several information.

I can't use ToList() or other, because result contains a lot of rows. Infact I added .Scrollable(scrollable => scrollable.Virtual(true)) property on Grid.

This is my model costructor

01.public ItemModel(UpSrlItem item, Nullable<DateTime> dateFilter, string locationFilter)

02. {

03. No = item.No;

04. Description = item.Description;

05. Brand = item.Brand;

06.

07. using (DbNavision ctx = new DbNavision())

08. {

09. //Net Change

10. List<UpSrlItemLedgerEntry> netChange;

11.

12. if (locationFilter != "")

13. netChange = (from rec in ctx.UpSrlItemLedgerEntry

14. where rec.ItemNo == No &&

15. rec.LocationCode == locationFilter &&

16. rec.PostingDate <= dateFilter

17. select rec).ToList();

18. else

19. netChange = (from rec in ctx.UpSrlItemLedgerEntry

20. where rec.ItemNo == No &&

21. rec.PostingDate <= dateFilter

22. select rec).ToList();

23.

24. NetChange = netChange.Sum(ile => ile.Quantity);

25.

26. //Purchases (Qty.) + Positive Adjmt. (Qty.)

27. List<UpSrlItemLedgerEntry> purchasesQty;

28.

29. if (locationFilter != "")

30. purchasesQty = (from rec in ctx.UpSrlItemLedgerEntry

31. where rec.ItemNo == No &&

32. rec.LocationCode == locationFilter &&

33. rec.PostingDate <= dateFilter &&

34. (rec.EntryType == (int)UpSrlItemLedgerEntryEntryTypes.Purchase ||

35. rec.EntryType == (int)UpSrlItemLedgerEntryEntryTypes.Positive_Adjmt)

36. select rec).ToList();

37. else

38. purchasesQty = (from rec in ctx.UpSrlItemLedgerEntry

39. where rec.ItemNo == No &&

40. rec.PostingDate <= dateFilter &&

41. (rec.EntryType == (int)UpSrlItemLedgerEntryEntryTypes.Purchase ||

42. rec.EntryType == (int)UpSrlItemLedgerEntryEntryTypes.Positive_Adjmt)

43. select rec).ToList();

44.

45. PurchasesQty = purchasesQty.Sum(ile => ile.Quantity);

46.

47. UpSrlItemLedgerEntry lastEntry;

48. if (locationFilter != "")

49. lastEntry = (from rec in ctx.UpSrlItemLedgerEntry

50. where rec.ItemNo == No &&

51. rec.LocationCode == locationFilter &&

52. rec.PostingDate <= dateFilter

53. select rec).ToList().LastOrDefault();

54. else

55. lastEntry = (from rec in ctx.UpSrlItemLedgerEntry

56. where rec.ItemNo == No &&

57. rec.PostingDate <= dateFilter

58. select rec).ToList().LastOrDefault();

59.

60. LastEntryDate = lastEntry?.PostingDate;

61.

62. }

63. }

Grid

answered on 21 Apr 2020

1 answer

341 views

TimePicker Grid Column Filter

My Grid Column Filter for a Time value is not working by this definition:

Model

public partial class Session : PropertyBase

{

[Display(Name = "Id")]

public int Id { get; set; }

[Display(Name = "Device Id")]

public System.Int32? DeviceId { get; set; }

[Display(Name = "Group Id")]

public System.Int32? GroupId { get; set; }

[MaxLength(50)]

public System.String UniqueId { get; set; } = $"{Guid.NewGuid()}";

/// <summary>

/// Track when the session took place

/// </summary>

public System.DateTime? Timestamp { get; set; }

[NotMapped]

[DataType(DataType.Date)]

public System.DateTime? Date => Timestamp;

[NotMapped]

[DataType(DataType.Time)]

public System.DateTime? Time => Timestamp;

Grid

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

.Name("grid")

.Columns(columns =>

{

columns.Command(command => command

.Custom("Detail")

.Click("goDetail"))

.Width(Glossary.Portal.ButtonWidth);

columns.Bound(p => p.Date).Title("Date").Format("{0:MM/dd/yyyy}")

.Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")

.ShowOperators(false)));

columns.Bound(p => p.Time).Title("Time")

.Format("{0:hh:dd:mm tt}")

.Filterable(x => x.UI(GridFilterUIRole.TimePicker));

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

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

.Selectable()

.Navigatable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("IndexJson", "Sessions")

.Data("gridGetData"))))

Grid

answered on 21 Apr 2020