Hi,
I'd like to know if it's possible to resize the View HTML popup window on the Editor widget? I've tried to hook an execute function I created in TypeScript to the ViewHtml event on the toolbar but I keep getting an undefined when trying to grab the window.
@(Html.Kendo().EditorFor(a => Description)
.Tag("div")
.PasteCleanup(p => p
.MsTags(true)
.MsConvertLists(true)
.MsAllFormatting(false))
.Tools(tools => tools
.ViewHtml()
)
.Events(e => e.Execute("CareerAds.onViwHtmlExecute")))
export function onViwHtmlExecute(e) {
console.log(e.name);
if (e.name == "viewhtml") {
let window = $(".k-editor-dialog").data("kendoWindow");
console.log(window);
window.setOptions({ width: 1000 });
}
}
window is always undefined and I'm struggling to figure out how to actually grab a hold of the window as I can't call window.setOptions on this for obvious reasons.
Thanks
Hi, we were previously using the Telerik editor for asp.net/webforms and it had the option to use <br> elements instead of <p> for line breaks. We used this for many years and are now transitioning to MVC.
The new Kendo editor has the same options (kind of) for using <br>, but now the ordered/unordered lists (and possibly other functionality we haven't tested yet) no longer work with the the <br> tags where they did in the previous asp.net editor.
This is a big issue for us as we are maintaining backwards compatibilty with the old version and need to keep the functionality and formatting the same.
I found a similar issue posted in 2013 here (https://www.telerik.com/forums/headers-or-bullet-list-in-editor-without-p-) and was hoping that in the 10 years since, some support for this, or at least a better work-around, might have been implemented. The one suggested here wont exactly work for us as we do intend to allow for paragraph tags if the user inserts them intentionally, but just not as standard carriage returns. We might could do somethin like intercept the carriage return and add a special class to them and have that swapped out, but I'm not sure that will work for all cases and I'm hoping there is a better way.
Hi,
I first tried using a loop creating expansion panels which works fine on the face of it but each expansion panel needs to have a Rich Text Editor inside of it and it was not allowing me to click into the editor so I read it may be better to use a PanelBar to achieve what i need.
Basically what I need it to loop through a collection within the ViewModel and create a Panel Bar Item for each one. Each Panel Bar Item will generate 3 Rich Text Editors with Labels.
The markup shows no errors but when running I get "System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index'". This happens with even a single control referencing the index of the for loop e.g.:
An example of the code is:
@(Html.Kendo().PanelBar()
If I don't reference the i of the for loop within the content it works fine e.g.:
@(Html.Kendo().PanelBar()
</text>);
The reason I am using a 'for i =' loop instead of a foreach loop is because the collection was not being returned to the controller on post when I used a foreach loop but this method worked which could be down to my inexperience with MVC but I went with what worked.
The Expansion Panels worked great other than not being able to click into the Kendo().Editor() controls at all when they were inside the for loop. If I bound them to a control outside of the loop then they worked fine.
Any help would be greatly appreciated.
Hi,
I have a kendo grid, user wants to enter html data in one of the column.
user clicks edit button on the grid row then an edit form opens as popup. This edit form is a model.cshtml with all the fields of the model on it. This edit cshtml does not have any button on it. "Update" button is created on fly.
User enters html data (tags etc) and clicks Update button then it return 401 error. Which I think is because its taking the tags as an injection attack. If user enters normal text then it works fine.
what can do to make the edit form allow submit html tags data? can you please help me?
Thanks
CNS
I am using the Image Browser https://demos.telerik.com/aspnet-mvc/editor/imagebrowser on my Razor pages.
How do I add a feature to auto check for the Image resolution and size down to below 650 or 650px in here?
I have a preview container where the max-width I am allowed to see the preview is 650px.
but when on ImageBrowser--> Insert Window --> I have a list of uploaded images --> if i am selecting images below max size but resolution is above 650px the images on preview are too stretched out.
I know we have an option to set the width n height when inserting but how do I auto set it before I hit insert button?
I am thinking to use this:
<script>
$(document).ready(function () {
// Attach a click handler to the ImageBrowser tool of the Editor.
$(".k-i-image").click(function () {
setTimeout(function(){
// Attach a select handler to the Upload embedded in the ImageBrowser.
$(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", function (e) {
// Prevent the event if the selected file exceeds the specified limit.
if (e.files[0].size > 1048576) {
e.preventDefault();
alert("Maximum allowed file size: 1MB");
}
// Check image resolution and limit width if necessary.
var img = new Image();
img.src = URL.createObjectURL(e.files[0].rawFile);
img.onload = function() {
if (img.width > 550) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// Calculate new height while maintaining the aspect ratio.
var ratio = 550 / img.width;
var newHeight = img.height * ratio;
canvas.width = 550;
canvas.height = newHeight;
// Draw the image on the canvas with the adjusted dimensions.
ctx.drawImage(img, 0, 0, 550, newHeight);
// Convert the canvas content back to a Blob object.
canvas.toBlob(function (blob) {
// Replace the original file with the resized image file.
e.files[0].rawFile = blob;
}, e.files[0].type);
}
};
});
});
});
});
</script>
I am using the Kendo Editor Image Browser from : https://demos.telerik.com/aspnet-mvc/editor/imagebrowser.
Where I have hidden/removed the
1. Home icon
2.New Folder
3. Delete
4. Arrange By
5. Web Address
6. Alternate Text
using css on my local.
Is there any way to customize this without CSS?
RadEditor is closing the source element that is nested inside the video element . For example, in the attached screen shots show the “source” element which we add it to Rich text field. After we save the Rich Text field and open it again, we see the source element is closed. Is there a configuration setting that would allow us to bypass the closure of the source element?
Greetings,
We are using the kendo editor for asp.net MVC. I need to apply some custom styling to tables created with the Add Table Wizard. I see that the wizard provides the ability to add a css class to the table. I am wondering if there is a way I could have a css class added automatically anytime a user creates a table with the wizard. I am trying to avoid having the users type in that css class value every time they create a table. It would be ideal if it could happen in the background, but populating the text box on the wizard with the class name would also work.
Any help would be appreciated.
Thanks,
Bob
Hello,
I am struggling with why my Save button on my Kendo Grid is not calling my update action (inline edit mode). The edit column uses a dropdown list editor template. The dropdown list editor fills fine with my values and I can select one. But when I click the Save button (from toolbar) it does not call my add function in the controller. I see no errors in F12 utility. Any help is appreciated as I've been struggling with this all day.
Here is my relevant code:
Edit Grid:
<style>
.k-grid-content td {
position: relative;
}
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
.k-grid .k-grid-header .k-header .k-column-title .k-header {
white-space: normal;
}
</style>
@{
ViewData["Title"] = "Administration";
}
<div style="margin-left:10px; margin-top:10px">
<div>Manage Assignees</div>
<div class="row" style="margin-top:10px">
<div class="col-auto">
@(
Html.Kendo().Grid<Assignees>()
.Name("grid")
.Width("250px")
.Columns(columns =>
{
columns.Bound(p => p.SortName).Width(130).Title("Assignee").EditorTemplateName("AssigneesAdd");
})
.Sortable(true)
.Navigatable()
.Scrollable(scr => scr.Height(200))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable()
.AutoBind(true)
.ColumnMenu(false)
.ToolBar(tb =>
{
tb.Create().Text("New");
tb.Save().Text("Save").CancelText("Cancel");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAssigneesForAddGridDisplay", "Home").Type(HttpVerbs.Post))
.Update(update => update.Action("AddAssigneeRecord", "Home").Type(HttpVerbs.Post))
.Destroy(destroy => destroy.Action("DeleteAssigneeRecord", "Home").Type(HttpVerbs.Post))
.Events(e => e.Error("onError"))
.Batch(false)
.Model(model =>
{
model.Id(p => p.SortName);
model.Field(p => p.SortName);
})
)
.Deferred()
)
</div>
</div>
</div>
@section Scripts{
@Html.Kendo().DeferredScripts()
<script>
$(document).ready(function () {
});
function onError() {
@*window.location='@Url.Action("Index", "Error")';*@
}
</script>
}
===============================================
Controller Add Function called by .Update event in grid
[HttpPost]
public async Task<ActionResult> AddAssigneeRecordAsync([DataSourceRequest] DataSourceRequest request, SelectListItem assigneeRecord)
{
try
{
await _dataService.AddAssigneeRecordAsync(assigneeRecord);
return Json(await new[] { assigneeRecord }.ToDataSourceResultAsync(request, ModelState));
}
catch (Exception ex)
{
await _dataService.LogExceptionAsync("HomeController", "AddAssigneeRecordAsync", _username, ex);
return BadRequest();
}
}
===============================================
DropDownList editor template("AssigneesAdd"):
@using Estimating_State_Licensing_Certification.Controllers
@using Kendo.Mvc.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@model string;
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("Text")
.DataTextField("Text")
.Filter("startswith")
.OptionLabel("Select an Employee")
.DataSource(source =>
{
source.Read(read =>
{
//this is the edit template used for the Admin assignee grid for adding NEW assignees
read.Action("GetAssigneesForAdminAdd", "Home").Type(HttpVerbs.Post);
});
})
)
==============================================
"Assignees" class/entity used by the grid
public class Assignees
{
public string? SortName { get; set; } = string.Empty;
}
Thanks!
Acadia
I am not able to get the State dropdown menu to work with the browser autocomplete for address using Kendo control. See the screenshot below.
I have tried several versions but I am using a very, very simple drodpown for testing and it will not autocomplete:
@(Html.Kendo().DropDownList()//(m=>m.State)
.Name("state")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "AL",
Value = "AL"
},
new SelectListItem() {
Text = "AK",
Value = "AK",
}
})
.HtmlAttributes(new {style = "width: 100%", @class = "autocomplete-input"})
.DataTextField("Text")
.DataValueField("Value"))