Custom editor for InBound editing

2 posts, 0 answers
  1. Einkauf
    Einkauf avatar
    1 posts
    Member since:
    Oct 2013

    Posted 13 Apr 2018 Link to this post

    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.

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    771 posts

    Posted 17 Apr 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top