This is a migrated thread and some comments may be shown as answers.

ImageBrowser display options

7 Answers 215 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 13 Sep 2013, 11:07 PM
Hi,

I am currently evaluating your MVC framework and have a question about the ImageBrowser control. Is there a way to remove the Path field on the top?
I would also remove the create folder button. Our users will be using this tool to add or remove images to a specific directory and those features (path and create folder) would only confuse them.

If we cannot remove them, can we disable them?

Thank you.

7 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 17 Sep 2013, 12:19 PM
Hi Daniel,

Both of your requirements can be achieved using JavaScript:

  • Hide the Path textbox: 
    $(".k-breadcrumbs.k-textbox").css('display', 'none');
  • Hide the create folder button:
    $(".k-addfolder").parent().css('display','none');

Regards,

Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

0
Daniel
Top achievements
Rank 1
answered on 17 Sep 2013, 07:18 PM
Thank you for your help. This was exactly what I was looking for.
Best Regards.
0
Jason
Top achievements
Rank 1
answered on 07 Oct 2015, 12:50 PM
Where would this code go?  I added this to the page that is hosting the Editor but that did not work.
0
Iliana Nikolova
Telerik team
answered on 09 Oct 2015, 10:51 AM
Hi Jason,

You could use this code in the Editor execute . As an example: 
@(Html.Kendo().Editor()
   //.....
   .Events(ev=>ev.Execute("onExecute"))
)
<script>
function onExecute() {
   setTimeout(function () {
       $(".k-breadcrumbs.k-textbox").css('display', 'none');
       $(".k-addfolder").parent().css('display', 'none');
   });
}
</script>


Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joel
Top achievements
Rank 1
answered on 06 Sep 2019, 10:13 AM

Hi,

  I am using the Image Browser as a standalone widget without the Editor. 

  Where should i put the script to hide the create folder button?

 

<div>
                    @(Html.Kendo().PanelBar()
                        .Name("panelbar")
                        .ExpandMode(PanelBarExpandMode.Multiple)
                        .Items(panelbar =>
                        {
                            panelbar.Add().Text("Image Browser")
                                .Expanded(false)
                                .Content(@<div id="imgBrowser"/>);
                        })
                    )
</div>
 
<script>
    $("#imgBrowser").kendoImageBrowser({
        transport: {
            type: "imagebrowser-aspnetmvc",
            read: "/ImageBrowser/Read",
            destroy: {
                url: "/ImageBrowser/Destroy",
                type: "POST"
            },
            create: {
                url: "/ImageBrowser/Create",
                type: "POST"
            },
            imageUrl: "@Url.Content("~/shared/UserFiles/Images/{0}")",
            thumbnailUrl: "/ImageBrowser/Thumbnail",
            uploadUrl: "/ImageBrowser/Upload",
        },
        change: insertImagePath
    });
</script>
0
Dimitar
Telerik team
answered on 10 Sep 2019, 07:16 AM

Hi Joel,

In such scenario the add folder could be hidden on document ready as follows:

 

<div id="imgBrowser"></div>

<script>    
    $(document).ready(function () {
        $("#imgBrowser").kendoImageBrowser({
            transport: {
                type: "imagebrowser-aspnetmvc",
                read: "/ImageBrowser/Read",
                destroy: {
                    url: "/ImageBrowser/Destroy",
                    type: "POST"
                },
                create: {
                    url: "/ImageBrowser/Create",
                    type: "POST"
                },
                imageUrl: "@Url.Content("~/Content/UserFiles/Images/{0}")",
                thumbnailUrl: "/ImageBrowser/Thumbnail",
                uploadUrl: "/ImageBrowser/Upload",
            

            }
        });

        $("#imgBrowser .k-i-folder-add").parent().css('display', 'none');
    });
</script>

 

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joel
Top achievements
Rank 1
answered on 10 Sep 2019, 08:08 AM

Hi Dimitar,

  It works. Thanks.

regards,

joel

Tags
Editor
Asked by
Daniel
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Daniel
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or