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)
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?
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")))
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
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.
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
I'm trying to pass a selected value from one drop down but not through cascade as the child DDL does not directly have the properties in which to cascade from. One of the challenges here is each drop down is built from a collection.
My initial approach is to capture the selected value from the parent via the selected event then pass it to the child drop down through the child's data source "data" method. Will this work?
<div class="col-12 col-md-4 col-lg-4 col-xl-4 order-1"> <kendo-dropdownlist for="Expenses[i].ActivityCenterId" datatextfield="Name" datavaluefield="PrimaryId" class="w-100" on-select="LoadActivityTypes"> <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax"> <transport> <read url="@Url.Action("GetActivityCentersForActivity", "Controller"datatype="json" /> </transport> </datasource> </kendo-dropdownlist> <span asp-validation-for="Expenses[i].ActivityCenterId" class="text-danger"></span> </div> <div class="col-12 col-md-4 col-lg-4 col-xl-4 order-2"> <kendo-dropdownlist for="Expenses[i].ActivityTypeId" datatextfield="Name" datavaluefield="PrimaryId" class="w-100"> <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax"> <transport> <read url="@Url.Action("GetActivityTypes", "Controller" datatype="json" /> </transport> </datasource> </kendo-dropdownlist> <span asp-validation-for="Expenses[i].ActivityTypeId" class="text-danger"></span></div>
function LoadActivityTypes(e){ var activityCenterIdValue = e.dataItem.PrimaryId; var acDdlId = e.sender.element.prop("id"); //Expenses[i].ActivityCenterId var atDdlId = acDdlId.substring(0, acDdlId.indexOf(".") + 1) + "ActivityTypeId"; var activityTypeDS = $(document.getElementById(atDdlId)).data("kendoDropDownList").dataSource; activityTypeDS.data = [{ activityCenterId: activityCenterIdValue }]; activityTypeDS.read();}I have a grid that is summary order information, it has its editable mode set to popup.
What I am trying to achieve is that when you 'edit' a row, the edit window pops up with another grid inside it. I cannot for the life of me, figure out how to get this to work, I've tried every template method I could find online. Is this possible?
I am prepared to just have a custom 'edit' button open a kendo window that loads the other grid, I could then refresh the summary grid on the window close event, but I wanted to make sure I could not achieve this though more appropriate methods first.
Thanks