This is a migrated thread and some comments may be shown as answers.
FileBrowser issues
2 Answers 23 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Sergei asked on 06 Jun 2016, 09:07 AM

Hi! I have Editor control, which I use for a comments section on one of my pages.

I use FileBrowser to select attachments.

Here are the issues I found:

  1. No upload function or even uploaded event. To get correct fileUrl I'm maintaining list of existing attachments to query against them when matching filename of selected file to id, which should be a part of fileUrl. I can run synchronous http.get in fileUrl function to update existing attachments list, but this is not absolutely correct solution. I would prefer getting id of uploaded file in a response to upload request. But I don't see how to get this response, as uploadUrl property of FileBrowser's transport doesn't support using function, which can provide a callback when done.
  2. How to customize FileBrowser dialog? I want to set fixed width/height, position, resizeable property, etc.
  3. How to set custom Title programmatically in fileUrl method? How do I access Title property? Should I set it with jquery or there is a built-in support for that?
  4. When using "stock" editor without tools customization, it renders lists of styles, fonts, colors, with predefined list of values and selected default values. When setting the same tools manually, there's no style tool and font face and font size tools doesn't have default values as when using "stock" configuration. How do I set styles tool manually?
  5. Outdent tool, when setting in a list of custom tools, seems to be broken.

my code:

02.    .kendoEditor({
03.        resizable: {
04.            content: true,
05.            toolbar: true
06.        },
07.        tools: [
08.            "bold", "italic", "underline", "strikethrough", "fontName", "fontSize", "foreColor",
09.            "backColor", "justifyLeft", "justifyCenter", "justifyRight","insertUnorderedList",
10.            "insertOrderedList", "indent", "insertFile", "pdf"
11.        ],
12.        fileBrowser: {
13.            transport: {
14.                read: function(options) {
15.                    $.ajax({
16.                        url: "api/PAWorkOrderDocuments/Source/" + woId,
17.                        success: function (result) {
18.                            // notify the data source that the request succeeded
19.                            self.attachments = result;
20.                            options.success(result);
21.                        },
22.                        error: function (result) {
23.                            // notify the data source that the request failed
24.                            options.error(result);
25.                        }
26.                    });
27.                },
28.                uploadUrl: "/api/PAWorkOrderDocuments/Upload/" + woId,
29.                fileUrl: function (options) {
30.                    var url = "";
31.                    for (var i = 0; i < self.attachments.length; i++) {
32.                        if (self.attachments[i].name === options) {
33.                            url = "/api/PAWorkOrderDocuments/Download/" + self.attachments[i].ID.toString();
34.                            break;
35.                        }
36.                    }
37.                    return url;
38.                }
39.            }
40.        }
41.    });

2 Answers, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 06 Jun 2016, 09:23 AM
UPD: found answer on my 1st question
Telerik team
answered on 08 Jun 2016, 07:03 AM
Hello Sergei,

Here are the answers to your questions:

  1. I see you have been able to handle that;

  2. The built-in dialogs are not customizable. You can possibly understand programmatically that a dialog is opened by handling the execute event and further modify the dialog by using jQuery. That said, you can easily set a fixed width and height and make the fields readonly. But for position and resizibale attributes I am unable to suggest a possible solution to do that. 

    Typically, when it comes to custom requirements regarding dialogs, it is recommended to build one from scratch and implement it as per to the exact requirements. 

  3. I assume you refer to the label in front of the input where the fileUrl appears in the dialog. I can suggest you changing its name by using jQuery. 

  4. I created this sample Dojo ( with two custom tools. As you can see custom tool and the "stock" tool have the same styles. If, however, you refer to the custom template tools, there is no built-in approach to match the built-in styles are the rendering is different. In this case you should decorate it by using custom styles and achieve the required results.

    You can inspect the built-in tools' rendering and the classes used and reuse them for the templates as long as rendering is similar or the same.

  5. Can you create a Dojo that shows the issue with the outdent tool? Does it appears broken in terms of layout or functionality. 


Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Telerik team
Share this question