Questions on UI for ASP.NET Core Forum

1 answer

616 views

Using ClientTemplate with enum and badge

Hi to all,

I'm trying to use a badge to show a value of enum with a color for each items.

this is a enum

public enum ContactSourceTypes

{

[Display(Name = "Telefono")]

Phone = 0,

[Display(Name = "Mail")]

Mail = 1,

[Display(Name = "Sistema di Marketing")]

Mautic = 2,

[Display(Name = "Altro")]

Other = 3

}

Actually it shows a Display Value of item into a grid

[...]

columns.Bound(product => product.SouceType)

[...]

Now, I would obtain a badge with a specific color and displayvalue of item's enum type. To do this I try to change column setup in this way.

columns.Bound(product => product.SouceType).ClientTemplate("<span id='badge_#=SouceType#' class='sourceTypeBadgeTemplate'>#=SouceType#</span>");

And relative script

function onDataBound(e) {

var grid = this;

grid.table.find("tr").each(function () {

var dataItem = grid.dataItem(this);

//Formattazione tipo origine

var sourceType = dataItem.SouceType;

var type = 'primary';

//alert(sourceType);

switch (sourceType) {

case 0:

type = 'primaty';

break;

case 1:

type = 'info';

break;

case 2:

type = 'success';

break;

case 3:

type = 'warning';

break;

}

var text = sourceType;

$(this).find('script').each(function () {

eval($(this).html());

});

$(this).find(".badgeTemplate").kendoBadge({

type: type,

value: text,

});

kendo.bind($(this), dataItem);

});

}

But it's wrong.....where I wrong?

Grid

answered on 19 May 2020

1 answer

120 views

Context Menu on Node

I use TreeList a lot in my Portal. However, instead of having big buttons showing in the grid the users would like to have a context menu. In the simplest form, I'd need to right click and get an option to go to the details or add a sub-node of the selected node.

The node Template:

<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>

My current TreeList:

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

.Name("treelist")

.Columns(columns =>

{

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

})

.DataSource(dataSource => dataSource

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

.ServerOperation(false)

.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.Error("onError"))

)

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

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

.Events(events =>

{

events.DataBound("onDataBound");

}))

TreeList

answered on 19 May 2020

2 answers

308 views

Set Selected Item on Load

I have a grid that lists people. When it loads, I need to select a row matching the key I submit and then ensure the row is visible in the window. How do I do this? My attempt (based on what I know of the TreeList):

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

.Name("grid")

.Columns(columns =>

{

columns.Command(command => command

.Custom("Select")

.Click("goDetail"))

.Width(Glossary.Portal.ButtonWidth);

columns.Bound(p => p.FirstName)

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

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

columns.Bound(p => p.LastName)

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

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

})

.Pageable()

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

.Sortable()

.Scrollable()

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

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("IndexJson", "Patients").Data("getData"))

).Events(e => e.DataBound("onGridDataBound")))

Script:

function onGridDataBound(e) {

// Handle the dataBound event.

var grid = e.sender;

alert(grid == null);

var personId = $("#personId").val();

alert(personId);

if (grid != null)

{

var dataItem = grid.dataSource.get(personId);

alert(dataItem == null);

if (dataItem != null)

{

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

alert(row == null);

if (row != null)

{

grid.select(row);

row[0].scrollIntoView();

}

Grid

answered on 18 May 2020

2 answers

154 views

Asp Net Core Grid Search Toolbar

Из какой версии Telerik Grid поддерживается панель инструментов поиска:

.ToolBar (toolbar =>
{
toolbar.Search ();
toolbar.Excel ();
toolbar.Pdf ();
})

А как реализовать панель инструментов поиска в 2019.2.619?

General Discussions

answered on 18 May 2020

1 answer

264 views

group a field generates error fw core

I have this tag

@(Html.Kendo().Grid<Portale.Web2.Data.Entities.Contact>()

.Name("contactGrid")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetContacts", "Contacts").Data("addInfo"))

)

.Columns(columns =>

{

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

columns.Bound(product => product.Name);

columns.Bound(product => product.City);

columns.Bound(product => product.SouceType);

columns.Bound(product => product.Type);

columns.Bound(product => product.Status);

columns.Command(command => command.Custom("Completa").Visible("isNew").Click("completeContact"));

})

.Pageable(p =>

{

p.PageSizes(new[] { 5, 10, 30 });

p.Info(true);

p.Enabled(true);

})

.Sortable()

.Groupable()

.Filterable()

)

<script>

function addInfo(e) {

var statusFilter = $("#statusFilter").val();

}

</script>

I call this action

public ActionResult GetContacts([DataSourceRequest]DataSourceRequest request, string status = "")

{

if (status != "")

{

var contacts = from rec in _context.Contacts

where rec.Status == status.ToContactStatus()

select rec;

DataSourceResult result = contacts.ToDataSourceResult(request);

return Json(result);

}

else

{

var contacts = from rec in _context.Contacts

select rec;

DataSourceResult result = contacts.ToDataSourceResult(request);

return Json(result);

If I try to set a group, it shows me this exception

System.InvalidOperationException

HResult=0x80131509

Messaggio=Processing of the LINQ expression '(GroupByShaperExpression:

KeySelector: (t.Source Type),

ElementSelector:(EntityShaperExpression:

EntityType: Contact

ValueBufferExpression:

(ProjectionBindingExpression: EmptyProjectionMember)

IsNullable: False

)

)' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core.

I'm using a EF Core 3.1.4 that it connects to SQL Server 2018

Grid

answered on 18 May 2020

2 answers

484 views

Error after install with Orchard Core

Hello support team,

We started a new application using Orchard Core.

We also installed version 2020.2.513 of Telerik UI for AspNet.Core.

Not sure if these can be used together?

Anyway I followed the first steps guide, https://docs.telerik.com/aspnet-core/getting-started/first-steps and added everything as mentioned.

But in the configureservices method of the startup filewe have 2 items:

services.AddOrchardCms();
services.AddKendo();

When I try to run the application, I get the following error:

InnerException {"Error while validating the service descriptor 'ServiceType: Kendo.Mvc.Rendering.IKendoHtmlGenerator Lifetime: Transient ImplementationType: Kendo.Mvc.Rendering.KendoHtmlGenerator': Unable to resolve service for type 'Microsoft.AspNetCore.Mvc.ModelBinding.IModelMetadataProvider' while attempting to activate 'Kendo.Mvc.Rendering.KendoHtmlGenerator'."} System.Exception {System.InvalidOperationException}

Maybe this is due to the combination of orchard core and telerik? Or maybe I'm missing something.

Thanks in advance.

General Discussions

answered on 15 May 2020

1 answer

218 views

row-cols-2 and form

I'm adding into a "container" a div "row" and "row-cols-2"

into a form tag.

<div id="generalPlaceHolder" class="row row-cols-2">

<div class="col form-group">

@Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label" })<br />

@(Html.Kendo().DatePickerFor(model=>model.Date)

.Min(new DateTime(1900, 1, 1))

.Max(new DateTime(2099, 12, 31))

.Format("dd/MM/yyyy")

.Value(DateTime.Today).

HtmlAttributes("form-control"))

<span asp-validation-for="Date" class="text-danger"></span>

</div>

<div class="col form-group">

<label asp-for="Name" class="control-label"></label>

<input asp-for="Name" class="form-control" />

<span asp-validation-for="Name" class="text-danger"></span>

</div>

<div class="col form-group">

<label asp-for="Name2" class="control-label"></label>

<input asp-for="Name2" class="form-control" />

<span asp-validation-for="Name2" class="text-danger"></span>

</div>

but it not splits all "col" tags, 2 "col" object for every line.

Are there any compatibility problem with bootstrap v4 theme? Or in general with theme's telerik?

Form

answered on 15 May 2020

1 answer

200 views

Generic Action Methods

Hi,

For my Kendo Grid, I'm looking to implement generic action methods such as what is described here:

https://stackoverflow.com/questions/42931042/how-can-i-create-generic-crud-operations-in-the-kendo-grid#

Thanks

Samad

Grid

answered on 15 May 2020

3 answers

135 views

Multifiltering

Hi, i am using the kendo grid, with many columns, all of them filterable. For the filtering i use the columnMenu. One filter is working fine. But if i put a second filter in it, it has some issues. Do i filter from right to left (start setting filters on the right of the table) and adding more filters from left side, it works too. But if i start filtering in the first column from the left and then add more of columns that are more on the right, i get 0 items back ...

If i click now the most left filter again, i just click filter again, it works.

I am searching for hours, but the queries are the same , just the order i insert the filter seems to make problems. Any suggestions ?

Filter