Telerik Forums
UI for ASP.NET MVC Forum
0 answers
26 views

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

sudo
Top achievements
Rank 1
 asked on 25 Oct 2023
1 answer
39 views

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.

Ivan Danchev
Telerik team
 answered on 04 Sep 2023
1 answer
56 views

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()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {

                        for (int i = 0; i < Model.SomeCollection.Count; i++)
                        {
                            panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
                                .Expanded(false)
                                .Selected(false)
                                .Content(@<text>
                                             
                                @Html.HiddenFor(model => model.SomeCollection[i].SectionUid)

                          </text>);
                        }
                    }))

 

If I don't reference the i of the for loop within the content it works fine e.g.:

 

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {

                        for (int i = 0; i < Model.SomeCollection.Count; i++)
                        {
                            panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
                                .Expanded(false)
                                .Selected(false)
                                .Content(@<text>
                                
                                             <div>Some Text</div>

 

                          </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.

 

 

Vasko
Telerik team
 answered on 21 Jul 2023
1 answer
72 views

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

Anton Mironov
Telerik team
 answered on 12 Jul 2023
1 answer
119 views

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>

                                                                                                                                                        
Anton Mironov
Telerik team
 answered on 08 Jun 2023
1 answer
68 views

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?

Anton Mironov
Telerik team
 answered on 08 Jun 2023
0 answers
28 views

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?

 

 

Mike
Top achievements
Rank 1
 asked on 25 May 2023
0 answers
125 views

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

Robert
Top achievements
Rank 1
 asked on 03 May 2023
1 answer
179 views

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

Aleksandar
Telerik team
 answered on 25 Apr 2023
0 answers
100 views

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"))


 

Jordan
Top achievements
Rank 1
Iron
 asked on 27 Mar 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?