Questions on UI for ASP.NET Core Forum

6 answers

263 views

Hello,

The generation of the identifier in TagHelpers is different from HtmlHelpers. The dot is not replaced by underscore :

<input asp-for="SubModel.Name" /> generates SubModel_Name

@Html.Kendo().AutoCompleteFor(m => m.SubModel.Name) generates SubModel_Name

<kendo-autocomplete for="SubModel.Name"></kendo-autocomplete> generates SubModel.Name

Is there an option to replace dot with underscore in TagHelpers ?

Cordially,
Stephane.

General Discussions

answered on 04 Nov 2020

1 answer

829 views

Multiple grid on one page

Hi everyone,

I have a page with two grids on the page and each grid has grouping. I want to collapse the groups in both grids and also allow the user to click on the labels to expand and collapse the groups. I am using version 2020.2.513

So what is happening is that grid 1 is collapsing as expected, but grid 2 is not collapsing at all. What do I have wrong?

My code is below:

Grid 1

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

.Name("ActiveForms")

.Groupable()

.Columns(columns =>

{

columns.Bound(p => p.FormSubmissionId).Hidden(true);

columns.Bound(p => p.FormName).Title("Form Name").Width(200).Hidden(true);

columns.Bound(p => p.SubjectName).Title("Subject").Width(200).MinScreenWidth(800);

columns.Group(group => group

.Title("Form Agreement")

.Columns(info =>

{

info.Bound(x => x.AgreementRequired).Title("Required").Width(75);

info.Bound(x => x.AgreementStatusDescription).Title("Status").Width(75);

})

);

columns.Bound(p => p.AgreementStatusId).Hidden(true);

})

.ToolBar(toolbar =>

{

toolbar.Search();

})

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

.Navigatable()

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

.Sortable()

.Groupable(true)

.Events(events => events.DataBound("collapseGroupRows_Forms"))

.Events(ev => ev.Change("onChange"))

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.GroupPaging(true)

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

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

.Read("vwFormSubmissionMenuList_Active", "Grid", new { StudentId = -1 })

.Group(x =>

{

x.Add(y => y.FormName);

})

)

Grid 2

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

.Name("SubjectChange")

.Groupable()

.Columns(columns =>

{

columns.Bound(p => p.SubjectChangeId).Hidden(true);

columns.Bound(p => p.Timetable).Title("Timetable").Width(200).Hidden(true);

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

columns.Bound(p => p.Preferred).Title("Preferred").Width(100).MinScreenWidth(800);

columns.Bound(p => p.Yearlevel).Title("Current Year").Width(50);

columns.Bound(p => p.Studentnumber).Title("Student Id").Width(50);

})

.ToolBar(toolbar =>

{

toolbar.Search();

})

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

.Navigatable()

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

.Sortable()

.Groupable(true)

.Events(events => events.DataBound("collapseGroupRows_SubjectChange"))

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.GroupPaging(true)

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

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

.Read("VwSubjectChange", "Grid", new { username = @User.Identity.Name })

.Group(x =>

{

x.Add(y => y.Timetable);

x.Add(y => y.CurrentStatus);

})

)

Javascript code:

function collapseGroupRows_SubjectChange() {

var grid = $("#SubjectChange").data("kendoGrid");

$(".k-grouping-row").each(function (e) {

var expanded = $(this).find(".k-i-collapse").length > 0;

if (expanded) {

grid.collapseGroup(this);

}

else {

grid.expandGroup(this);

}

//grid.collapseGroup(this);

});

$(".k-grouping-row").click(function () {

var expanded = $(this).find(".k-i-collapse").length > 0;

if (expanded) {

grid.collapseGroup(this);

}

else {

grid.expandGroup(this);

}

});

}

function collapseGroupRows_Forms() {

var grid = $("#ActiveForms").data("kendoGrid");

$(".k-grouping-row").each(function (e) {

var expanded = $(this).find(".k-i-collapse").length > 0;

if (expanded) {

grid.collapseGroup(this);

}

else {

grid.expandGroup(this);

}

});

$(".k-grouping-row").click(function () {

var expanded = $(this).find(".k-i-collapse").length > 0;

if (expanded) {

grid.collapseGroup(this);

}

else {

grid.expandGroup(this);

}

});

}

Grid

answered on 04 Nov 2020

8 answers

1.5K+ views

Send anti forgery token AND additional data

I want to send the token and additional data on my update call.

Something like the below, is this possible? Do i even need the token for an intranet app? If not, how do I get rid of it?

Javascript

function additionalInfo() {

return {

token: kendo.antiForgeryTokens(),

whatChanged: 2

}

PageModel

public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, OCHODisplayReply reply, int whatChanged) {

if (reply != null && ModelState.IsValid) {

/...

}

Grid method

.Update(u => u.Url("/Index/?handler=Update").Data("additionalInfo")

Grid

answered on 04 Nov 2020

2 answers

164 views

Grid Template with ComboBox

How do I include and populate a ComboBox inside a Grid template? I have it list my Templates successfully as defined. But, I need a ComboBox that lists the Template's Items. The data is served up from the Model.

Then, on selection of the items in the ComboBox, I need to store the Item index to a local array/list (because we don't know how many templates there are) for consumption on a button press.

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

}

Grid:

@(Html.Kendo().Grid((IEnumerable<SessionOptionTemplate>)Model.SessionOptionTemplates)

.Name("template-grid")

.HtmlAttributes(new { @class = "GridNoHeader" })

.Columns(columns =>

{

columns.Template(" ").Title("Name").Width(200);

})

.ClientRowTemplate(@"

<div style='margin-bottom: 10px;'>

<input class='select' type='checkbox' #=IsSelected ? " + @"checked='checked' " + @" : '' # />

<span class='name'>#: Name #</span><br />

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

</div>")

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.ServerOperation(false))

)

Grid

answered on 03 Nov 2020

1 answer

121 views

Handle Selection Events from Menu

I need to create a filtering mechanism and I'm attempting to figure out the best way to do it. Yes, I have a post to the Filter forum... but I'm likely going to be told that it is more complex than what the users will want. So, I have a menu bound to a collection of user-defined Templates as shown. Each Template has multiple Items as bound to the children/sub-menu.

As the user selects options from this menu, I need to retain the Child Item's Id in order to build a Filter set that I can submit to a REST service. Because the menu will not provide feedback like your Filter control, I'll need to display the filter in a field that'll grow as they add criteria much like the "ExpressionPreview" on the Filter control.

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>();

}

Item:

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

}

Menu:

@model IEnumerable<SessionOptionTemplate>

@(Html.Kendo().Menu()

.Name("Menu")

.Scrollable(true)

.BindTo(Model, mappings =>

{

mappings.For<SessionOptionTemplate>(binding => binding

.ItemDataBound((item, template) =>

{

item.Text = template.Name;

})

.Children(category => category.SessionOptionItems));

mappings.For<SessionOptionItem>(binding => binding

.ItemDataBound((item, option) =>

{

item.Text = option.Name;

}));

}))

Menu

answered on 03 Nov 2020

1 answer

133 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

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