Questions on UI for ASP.NET Core Forum

4 answers

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

401 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

358 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

525 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

846 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

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

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

.Name("template-grid")

.ClientRowTemplate("rowTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

.Data("getData"))

))

Style

<style>

.checkbox {

width: 75px;

}

.details {

width: 400px;

}

.name {

display: block;

font-size: 1.6em;

}

.desc {

display: block;

padding-top: 1.6em;

font-size: small

}

</style>

Grid

answered on 23 Oct 2020

6 answers

1.0K+ views

Error Handling

I'm failing somewhere in my load of a TreeList. I added a simple error handler like this:

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

<div class='group-photo'

style='background-image: url(@Url.Content("~/images/32/neighbourhood.png"));'></div>

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

</script>

<div class="demo-section k-content">

<h4>Customer Groups</h4>

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

.Name("treelist")

.Columns(columns =>

{

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

columns.Add().Field(e => e.Description);

columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");

columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new {style = "text-align: center;"});

columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });

columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });

})

.Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))

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

.DataSource(dataSource => dataSource

.ServerOperation(false)

.Create(create => create.Action("CreateJson", "Groups"))

.Read(read => read.Action("AllJson", "Groups")

.Data("groupsRead"))

.Update(update => update.Action("UpdateJson", "Groups"))

.Destroy(delete => delete.Action("DestroyJson", "Groups"))

.Model(m =>

{

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

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

m.Expanded(true);

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

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

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

})

.Events(x => x.Error("onError"))

))

<script>

var groupId = Number(@(ViewBag.GroupId));

function groupsRead() {

return { id: groupId };

}

function onError(e) {

alert(e.toString());

}

</script>

However, this doesn't give me any clue as to what object type is there to pull the message from. What is the recommended way of doing Error Handling with this control that will give me some actionable information?

Thanks, Joel

TreeList

answered on 23 Oct 2020

1 answer

157 views

Grid PDFExport Column Width

I've implemented PDF export functionality with a Grid. I'm trying to set the column width (auto) for one of columns of the report that gets generated because the some values in the column of the report are being truncated, or not seen in the PDF. I've tried