Telerik Forums
UI for ASP.NET Core Forum
5 answers
1.1K+ views

Hi,

We've just bought the UI for ASP.NET Core components and have started using the Grid component in our ASP.NET Core 2.1 project. From what I understand, unlike the ASP.NET MVC grid, the ASP.NET Core grid is not a true server-side component and the Html and TagHelpers are basically just wrappers for the Kendo UI for jQuery client-side javascript based component, right?

If that's the case then what is the best way to implement server-side formatting/rendering of certain data in the columns of the grid? Until now we've used normal html tables and put our custom TagHelpers and text formatting functions calls directly in the cells of those tables (in the .cshtml files). For example we have a custom class that wraps an integer and converts that value to minutes and various other things.

I've noticed there is the ClientTemplate of the columns in the grid but you can't put TagHelpers or .ToString() methods in those templates since they are just evaluated in javascript on the client.

Is there a way to use the MVC grid in Core projects?

/Marcus

 

Angel Petrov
Telerik team
 answered on 15 Oct 2019
3 answers
356 views

Hallo zusammen,

ich habe in meinem Grid zwei Knöpfe, die das edit event auslösen. Ich rufe damit das gleiche Popup auf, aber abhängig davon welcher Edit button geklickt wurde, müssen im Popup verschiedene Elemente ein- oder ausgeblendet werden. Ich habe noch keine Möglichkeit gefunden wie ich herausbekomme welcher Knopf geklickt wurde.

Beide Button befinden sich in der Toolbar
        .ToolBar(t =>
        {
            t.Create().Text("Add User");
            t.Create().Text("Add Host");
        }
 und das Event folgendermaße deklariert:
        .Events(events => events
            .Edit("insertPopupCaption")
        )

Kann mir hier bitte jemand weiterhelfen?

Kind regards
Markus

Markus
Top achievements
Rank 1
 answered on 15 Oct 2019
2 answers
1.1K+ views

Hi

please help me how to use Kendo Editor Template

this is my code:

Product Model:

[UIHint("RichText")]
 
public string ProductDescription { get; set; }

 

RichText EditorTemplate

@model string
 
@* Make sure tag helpers are not available for the Editor content *@
@removeTagHelper "*, Microsoft.AspNet.Mvc.Razor"
@removeTagHelper "*, Microsoft.AspNetCore.Mvc.Razor"
 
@(Html.Kendo().EditorFor(mo => mo).Encoded(false)
          .Name("editor")
          .HtmlAttributes(new { style = "height:440px", aria_label = "editor" })
          .Resizable(resizable => resizable.Content(true).Toolbar(true))
          .ImageBrowser(imageBrowser => imageBrowser
              .Image("~/Shared/UserFiles/Images/{0}")
              .Read("Read", "ImageBrowser")
              .Create("Create", "ImageBrowser")
              .Destroy("Destroy", "ImageBrowser")
              .Upload("Upload", "ImageBrowser")
          )
 
    )

 

usage in View:

@Html.EditorFor(m => m.ProductDescription)

 

but I get Error below:

An unhandled exception occurred while processing the request.
InvalidOperationException: You cannot override component name when bound to a model expression.
Kendo.Mvc.UI.Fluent.WidgetBuilderBase<TViewComponent, TBuilder>.Name(string componentName)

 

 

InvalidOperationException: You cannot override component name when bound to a model expression.
Kendo.Mvc.UI.Fluent.WidgetBuilderBase<TViewComponent, TBuilder>.Name(string componentName)
AspNetCore.Views_Shared_EditorTemplates_RichText.ExecuteAsync() in RichText.cshtml
+
@(Html.Kendo().EditorFor(mo => mo)
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.TemplateRenderer.Render()
Microsoft.AspNetCore.Mvc.ViewFeatures.TemplateBuilder.Build()
Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper.GenerateEditor(ModelExplorer modelExplorer, string htmlFieldName, string templateName, object additionalViewData)
Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper<TModel>.EditorFor<TResult>(Expression<Func<TModel, TResult>> expression, string templateName, string htmlFieldName, object additionalViewData)
Microsoft.AspNetCore.Mvc.Rendering.HtmlHelperEditorExtensions.EditorFor<TModel, TResult>(IHtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TResult>> expression)
AspNetCore.Areas_Users_Views_Products_Edit.<ExecuteAsync>b__24_0() in Edit.cshtml
+
                @Html.EditorFor(m => m.ProductDescription)
Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.GetChildContentAsync(bool useCachedResult, HtmlEncoder encoder)
Microsoft.AspNetCore.Mvc.TagHelpers.RenderAtEndOfFormTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)
Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count)
AspNetCore.Areas_Users_Views_Products_Edit.ExecuteAsync() in Edit.cshtml
+
    Layout = "~/Areas/Users/Views/Shared/_Layout.cshtml";
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(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>g__Awaited|19_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore.MigrationsEndPointMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore.DatabaseErrorPageMiddleware.Invoke(HttpContext httpContext)
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore.DatabaseErrorPageMiddleware.Invoke(HttpContext httpContext)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
Ivan Danchev
Telerik team
 answered on 15 Oct 2019
0 answers
81 views
Do all Control components support Razor Pages development mode?
ghd258 ghd258
Top achievements
Rank 1
 asked on 14 Oct 2019
1 answer
1.2K+ views

Hi,

I'm using Telerik for ASP .NET Core and I have a model with a column that is a list.

1.columns.Bound(p => p.Actions)
2..ClientTemplate("#= actionsTemplate(data) #");

 

The client template, which is generated correctly:

01.function actionsTemplate(item) {
02.  let template = "";
03.  for(var i=0; i< item.Actions.length; i++){
04.     let action = item.Actions[i];
05.     template += kendo.format("<button class='btn btn-block btn-outline-success btn-sm action'" +
06.      "onclick='showDetails(this)' data-url='{0}' data-allowedState='{1}'>{2}</button>",
07.       action.Url, action.AllowedState, action.Title);
08.   }
09.   return template;
10.}

 

Then when I click a button in the column, I want to display a form, with 2 buttons, one that makes a POST, one that cancels/closes the form:

01.let detailsTemplate = kendo.template($("#template").html());
02. 
03.function showDetails(e) {
04.    e.preventDefault();
05. 
06.    let row = $(e).closest("tr");
07.    let closest = $(e.currentTarget).closest("tr");
08.    let dataItem = this.dataItem(closest);
09. 
10.    let wnd = $("#action").data("kendoWindow");
11. 
12.    wnd.content(detailsTemplate(dataItem));
13.    wnd.center().open();
14.}

 

The template:

01.<script type="text/x-kendo-template" id="template">
02.    <form action="#= Url #" method="post">
03.        <div id="action-container">
04.            <h2>#= Title # </h2>
05. 
06.            Do you want to perform #= Action # for #= Title # ?
07.        </div>
08.        <button type="submit" class="btn btn-primary">Yes</button>
09.        <button type="reset" class="btn btn-default float-right">No</button>
10.    </form>
11.</script>

 

The problem is that in showDetails() function, I get an error on line 8:

 this.dataItem is not a function.

Also, e.currentTarget is undefined, but $(e).closest("tr") is the containing tr element.

 

 How can I achieve this functionality?

Martin
Telerik team
 answered on 11 Oct 2019
1 answer
350 views

I have a Grid with an editable DateTime field. What happens is when I type in a date, if it doesn't adhere to the Format statement, it clears the field when I hit tab. What I want is if I enter something like 01012020, I want to try and parse it in javascript and get a valid date to use. I have tried using OnBlur, but that never gets called. The onDateChange function has null for the value of that field. I think it's already cleared it out.

The grid defines the field and the editor template as,

.Columns(proposed =>
{
proposed.Bound(prop => prop.DateProposed).Editable("true").EditorTemplateName("SelectDateDD").Format("{0:MM/dd/yyyy}").Title("Date").Width(113);
}

SelectDateDD:

@(Html.Kendo().DatePickerFor(m => m).Events(e=>e.Change("onDateChange")))

Tsvetomir
Telerik team
 answered on 10 Oct 2019
2 answers
354 views

I am able to get a client-side reference to the combobox by using:

.HtmlAttributes(new { id = "myDropDown" })

and

$("#myDropDown").data("kendoComboBox")

 

However, I can't seem to figure out how to bind to the focus event. There is no server-side event method (such as Select(), Change(), etc) for it that I can see and it doesn't appear in the API documents.I am essentially trying to do something like this:

$("#myDropDown").on('focus', function () {
                $("#myDropDown").data("kendoComboBox").open();
            });

 

Thank you

Josh
Top achievements
Rank 1
 answered on 09 Oct 2019
2 answers
447 views

Hello,

I try to change the background color regarding ON or OFF without success (note that .k-switch and .k-switch-handle works perfectly) :

 

<style>
    .k-switch {
        font-size: 12px !important;
    }
    .k-switch-on  {
        background-color: green !important;
    }
    .k-switch-off  {
        background-color: red !important;
    }
    .k-switch-handle{
        background-color: chocolate !important;
    }
</style>

 

Thank you for your precious help.

Louis
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 09 Oct 2019
1 answer
283 views

Was is the best way/practice to extend the TreeList class to have the same foreign Key Functionality of the grid?

 

ex. https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn

Nikolay
Telerik team
 answered on 08 Oct 2019
13 answers
344 views
Whether support Razor Pages 
ghd258 ghd258
Top achievements
Rank 1
 answered on 05 Oct 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?