[Solved] How to customize the tools inside the Upload window on Image browser from Kendo Editor

[shashank]

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?

[Matthew]

Could i please ask if you could provide your code of applying the css and their values for the above?

[Anton Mironov]

Hi Matthew,

In order to achieve the desired behavior, I would recommend using the following approach:

1. In the "document.ready" scope, handle the click for opening the Image Browser.
2. For the handler, use the jQuery selector for the element by using its title - "$("button[title='Insert image']")".
3. Add a small setTimeout scope for providing time for the popup for the Image Browser to be rendered.
4. Use the jQuery selectors for the elements that should be removed. For example, the selector for the Home icon is ".k-svg-i-home".
5. Here is an example:
   

   <script>
       $(document).ready(function(){
           $("button[title='Insert image']").on("click", function(){
               setTimeout(function(){
                   $(".k-svg-i-home").css("display", "none");
                   $(".k-svg-i-folder-add").css("display", "none");
                   $(".k-icon-button").css("display", "none");
                   $(".k-tiles-arrange").css("display", "none");
                   $(".k-form-field").css("display", "none");
               })
           })
       })
   </script>

Here is a REPL example that I prepared for the case:

• https://netcorerepl.telerik.com/mIaIPMvP52wlKbsQ19

Give a try to the approach above and let me know if this is the desired result.

 

Kind Regards,
Anton Mironov

 

 

[Anton Mironov]

Hi Shashank,

Thank you for the details provided.

Yes, you are totally correct - using CSS is a perfect decision.

In order to use the built-in configurations, use the following article where they are listed:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/editor/configuration/imagebrowser

 

Kind Regards,
Anton Mironov
Progress Telerik