Questions on UI for ASP.NET Core Forum

1 answer

122 views

Complex Filter

I have a Session object. Each Session can be related to many Templates and each template has a list of Items (like an Enum list). Users can define a Template and its List of enums. The fun is that the user needs to filter on these dynamic properties and I'm trying to figure out how to do it. I need your help.

Template 1

- List Item 1

- List Item 2

- List Item 3

In the field list I need the list of Templates... which is dynamic. Right now, I have "Name". I need "Template 1", "Template 2", etc. Then, I need a pick list for each of them based on their own Items. So, select template 1 and filter on List Item 1. Give me all the sessions where Template 1's value is List Item 1. How do I do this in your Filter control.

Also, a side note. There is NO documentation on how to define the Html.Kendo().DataSource object. I don't believe my example works. I actually have the values in the MODEL and would like to just use the given values without needing to perform an Action.

View:

@(Html.Kendo().DataSource<SessionOptionTemplate> ()

.Name("templateDataSource")

.Ajax(d => d.Read(

r => r.Action("Templates", "Sessions"))))

@(Html.Kendo().Filter<SessionOptionTemplate>()

.Name("filter")

.MainLogic(FilterCompositionLogicalOperator.Or)

.ApplyButton()

.ExpressionPreview()

.Fields(f =>

{

f.Add(p => p.Name).Label("Name");

})

.DataSource("templateDataSource"))

Controller:

public async Task<IActionResult> Templates(

[DataSourceRequest] DataSourceRequest request)

{

var dsResult = await profileService.SessionOptionTemplates.ToDataSourceResultAsync(request);

return Json(dsResult);

}

Template:

public partial class SessionOptionTemplate

{

public int Id { get; set; }

[MaxLength(50)]

public string Name { get; set; }

[MaxLength(128)]

public string Description { get; set; }

public int Order { get; set; }

public DateTime AddTimestamp { get; set; } = DateTime.UtcNow;

public DateTime? DeactivateTimestamp { get; set; }

public ICollection<SessionOptionItem> SessionOptionItems { get; set; } = new HashSet<SessionOptionItem>();

}

Items:

public partial class SessionOptionItem

{

[Key]

public int Id { get; set; }

public int SessionOptionTemplateId { get; set; }

[MaxLength(50)]

public string Name { get; set; }

[MaxLength(128)]

public string Description { get; set; }

public DateTime AddTimestamp { get; set; } = DateTime.UtcNow;

public DateTime? DeactivateTimestamp { get; set; }

}

Filter

answered on 03 Nov 2020

1 answer

642 views

upload file with extra parameter

Dear Admin,

I would like to ask about can FileManager upload with extra parameter?

Regards,

EL

FileManager

answered on 03 Nov 2020

4 answers

3.7K+ views

how to refresh grid.

I put a button, call the post method to change data. I want to refresh the grid to show the data. Please help.

Grid

answered on 03 Nov 2020

1 answer

1.0K+ views

Unable to resolve service for type 'Kendo.Mvc.Rendering.IKendoHtmlGenerator'

I am running a project using asp.net core 3.1 and my view which contains the Kendo Grid is throwing this error

InvalidOperationException: Unable to resolve service for type 'Kendo.Mvc.Rendering.IKendoHtmlGenerator' while attempting to activate 'Kendo.Mvc.TagHelpers.GridTagHelper'.
Microsoft.Extensions.DependencyInjection.ActivatorUtilities.GetService(IServiceProvider sp, Type type, Type requiredBy, bool isDefaultParameterRequired)
lambda_method(Closure , IServiceProvider , object[] )
Microsoft.AspNetCore.Mvc.Infrastructure.TypeActivatorCache.CreateInstance<TInstance>(IServiceProvider serviceProvider, Type implementationType)
Microsoft.AspNetCore.Mvc.Razor.Infrastructure.DefaultTagHelperActivator.Create<TTagHelper>(ViewContext context)
Microsoft.AspNetCore.Mvc.Razor.DefaultTagHelperFactory.CreateTagHelper<TTagHelper>(ViewContext context)
Microsoft.AspNetCore.Mvc.Razor.RazorPageBase.CreateTagHelper<TTagHelper>()
AspNetCore.Views_Product_Index.ExecuteAsync() in Index.cshtml
+
ViewData["Title"] = "Home Page";
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts)
Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, string contentType, Nullable<int> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)
Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeResultAsync>g__Logged|21_0(ResourceInvoker invoker, IActionResult result)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

My project references this Kendo package

<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2020.2.812-Internal" />

These lines are in my _ViewImports.cshtml

@using Kendo.Mvc.UI

@addTagHelper *, Kendo.Mvc

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

In my Index.cshtml I have this code
@{
ViewData["Title"] = "Home Page";
}

<div class="row">
<div class="col-12">
<kendo-grid name="grid" height="550">
<columns>
<column field="Id" title="Id">
<filterable enabled="false"></filterable>
</column>
<column field="BinNum" title="BinNum" />
<column field="RunDate" title="RunDate" format="{0:MM/dd/yyyy}" />
<column field="Type" title="Type" />
<column field="Fee" title="Fee" />
</columns>
<scrollable enabled="true" />
<sortable enabled="true" />
<pageable enabled="true" />
<filterable enabled="true" />
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
<transport>
<read url="@Url.Action("Read_Product", "ProductGrid")" />
</transport>
</datasource>
</kendo-grid>
</div>
</div>

Grid

answered on 30 Oct 2020

1 answer

391 views

Column count for related table

Hi to all,

I have this collection routine

contacts = from rec in _context.Contacts.Include("SellToContacts")

where rec.ParentContactFK.HasValue == false

select rec;

DataSourceResult result = contacts.ToDataSourceResult(request);

return Json(result);

Contact model is configured in this mode

[...]

public Contact ContactParent { get; set; }

[Column("Parent Contact Id", TypeName = "int")]

[Display(Name = "Società Principale")]

public int? ParentContactFK { get; set; }

[ForeignKey("ParentContactFK")]

public ICollection<Contact> SellToContacts{ get; set; }

[...]

with this collection I would show a column that shows a Count of SellToContacts, that there are children of primary contact.

If a try to debug a collection, I found , correctly, some SellToContacts loaded of several children.

[...]

@(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(c => c.Date).Format("{0:dd/MM/yyyy}");

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

columns.Bound(c => c.SellToContacts.Count);

[...]

Why not appears into a grid?

Where I wrong?

Grid

answered on 29 Oct 2020

5 answers

352 views

Style broken in edit mode

Hello,

I am using an aspnetcore Grid and I noticed that the style of the edit form is different from the rest of the site.

For information, my site is setup to use the telerik bootstrap 4 style with custom colors (used the Telerik Theme Builder)

The problem I experience seems related to the classes used in my site versus the demo. In the demo (https://demos.telerik.com/aspnet-core/grid/editing-popup), the control classes all use a k- prefix. "k-textbox" "k-input" "k-numerictextbox". On my site, the classes are text-box single-line only. When I manually change them to k-textbox for example, the css applies and is displayed properly.

Did I configure something improperly for the classes used to be different from the demo?

Any help would be appreciated!

Grid

answered on 29 Oct 2020

2 answers

493 views

Group by column in descending order by default

Hi Everyone,

I am trying to set the Kendo Grid with Group by specific column by default, so I have used the code snippet as shown below:

@(Html.Kendo().Grid<StudentRecord>().Name("Grid")

.Groupable()

.Sortable()

.GroupPaging(true)

.Group(x => x.Add(y => y.StartYear))

And I realised it always displays the StartYear groups in ascending order by default.

Please advise how I could set the StartYear groups to sort in descending order by default.

Thank you.

Grid

answered on 28 Oct 2020

16 answers

2.2K+ views

data binding and serialization issue with System.Text.Json core 3.0

I am using the new System.Text.Json in asp.net core and I noticed that the grid does not bind to the model when using the new .net Core Json library. If I use Newtonsoft.Json the bind binding works fine.

public void ConfigureServices(IServiceCollection services)
{
services.AddAuthentication(IISDefaults.AuthenticationScheme);
services.AddKendo();
services.AddControllersWithViews();

//.AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
}

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

.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.email);
columns.Bound(e => e.username);
})

.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("Read", "home"))
)
)

Model

public class TestModel
{

public string archiveGuid { get; set; }
public string orgUid { get; set; }
public string orgName { get; set; }
public string orgExtRef { get; set; }
public string userUid { get; set; }
public string username { get; set; }
public string email { get; set; }

}

Here is what is returned with NewtonSoft JSON. I also noticed that D in the data response sent is capitalized when using Newtonsoft.json. Any ideas? It could be due to the contract resolver not being set when we are using the System.Text.Json as posted here https://www.telerik.com/forums/grid---binding-doesn't-work but I don't think there is a contract resolver option for the System.Text.Json.

Grid

answered on 28 Oct 2020

2 answers

820 views

Grid - ClientTemplate and Delete

So I have a grid, with a template for the command buttons. The reason I have the template, is I'm not allowing in-line editing, and the "edit" button will take the user to a detail page where they get access to the full model record.

I also have a "delete" button, but I can't figure out how to perform the delete from the template. I tried what I've seen in others and attempt to get the closest "tr" and then call "removerRow", but that did not work.

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

<form method="post" action="@Url.Page("/clients/client", new { area = "" })" style="float: left; margin-right: .55rem">

<button type="submit" class="btn btn-info waves-effect waves-light">Edit</button>

<input name="companyId" type="number" value="#= CompanyId #" hidden="hidden" />

@Html.AntiForgeryToken()

</form>

<button name="btnDelete" class="btn btn-danger waves-effect waves-light" onclick="deleteObject()">Delete</button>

</script>

<script>

var commandTemplate = kendo.template($('#Commands').html());

</script>

<script type="text/javascript">

function deleteObject() {

var row = $(this).closest("tr");

$("#clientGrid").data("kendoGrid").removeRow(row);

}

</script>

@(Html.Kendo().Grid<CaterX2.Models.Client.Client>()

.Name("clientGrid")

.Columns(columns =>

{

columns.Bound(p => p.CompanyName).Title("Client");

columns.Bound(p => p.Address1);

columns.Bound(p => p.Address2);

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

columns.Bound(p => p.State.StateCode).Title("State").Width(100);

columns.Bound(p => p.ZipCode).Title("Zip Code").Width(150);

columns.Bound(p => p.PhoneNumber).Title("Phone").Width(150);

columns.Bound(p => p.CompanyId).ClientTemplate("#=commandTemplate(data)#").Width(200);

})

.Pageable()

.Sortable()

.Scrollable()

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

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.CompanyId))

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

.Update(e => e.Url("index?handler=Edit"))

.Destroy(d => d.Url("index?handler=Delete").Data("forgeryToken"))

)

Grid

answered on 27 Oct 2020

1 answer

304 views

Row Template

I'm trying to define a grid where the first column is a checkbox and the 2nd has a large font bound to "name" with a small font below it showing the "description". I'd appreciate a working example.

This is NOT working:

<script id="rowTemplate" type="text/x-kendo-tmpl">

<tr data-uid="#: uid #">

<td class="checkbox">

<input type="checkbox" name="optCheck" />

</td>

<td class="details">

<span class="name">#: Name #</span>

<span class="desc">#: Description #</span>

</td>

</tr>

</script>