Custom editor for InBound editing

[Einkauf]

Hi,

I have a TreeList with several columns. One of them is displaying an image. The others just some short text.
The image column contains the url in it's model and I use a custom template to show the image. This is gonna work as expected:

columns.Add().Field(i => i.ImageUrl).Template("<img src=\"#: ImageUrl #\">")

 

But no I wand to edit this row and have a custom editor for this image column. At the end I wand to embedd DropZone to upload a new image. How can I assign a custom editor (any kind) instead of the default textbox which appears for basically every kind of data type?

I've seen that the column builder has a method called "Editor(string value)". But the API documentation of Kendo is as useless as ever. I don't understand why a enterprise grade component provider can survive with such bad quality. Nevertheless, is this maybe the way to go? If yes, how should I use this method? Because it's not the name of a kendo-template, editor template, javascript function nor html id.

Thank you. Best regards.

[Alex Hajigeorgieva]

Hello,

I am sorry to hear that you are not able to find the resources that you need to move forward. We are always striving to improve the documentation to the best of our abilities and clients feedback. We recently overhauled the jQuery documentation which is the core of the jQuery Kendo UI and the richest in terms of examples, troubleshooting, API, knowledge base articles. It is on our task list to revise the wrappers documentation also in the future. 

I am unsure why the Kendo UI TreeList in your project generates a textbox for each data type. This is not the way the widget behaves out of the box. 

https://demos.telerik.com/aspnet-mvc/treelist/editing

The jQuery widgets generate a Kendo UI NumericTextBox for number types, a Kendo UI DatePicker for dates, a bound input with "k-textbox" class for strings. For MVC, you should have the editors in the ~EditorTemplates folder for each type.

For example:

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m))

And:

@model double?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
)

To add a custom editor, the Editor() property is the way to go indeed. It accepts a string - the name of the JavaScript function which will be called when the Kendo UI TreeList is editable. The function provides two parameters. Sample usage is available at:

https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist/configuration/columns.editor

In the context of UI for ASP.NET MVC, here is an example that I tested with:

.Columns(columns =>
{
 columns.Add().Field(p => p.ImageField).Editor("uploadEditor");
 columns.Add().Title("Edit").Width(250).Command(c =>
 {
     c.Edit();
 });
})
.Editable(e => e.Mode("inline"))


<script>
    function uploadEditor(container, options) {
        $('<input type="file" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoUpload();
    }
</script>

- Kendo UI Upload API for your reference: https://docs.telerik.com/kendo-ui/api/javascript/ui/upload
- Upload in grid project that you may find useful (the Kendo UI TreeList and Grid have a lot in common) : https://www.telerik.com/support/code-library/upload-in-grid-popup-editor

Should you face any further difficulties, please let me know, I will do my best to guide you in the right direction.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik