ImageBrowser display options

[Daniel]

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.

[Iliana Dyankova]

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

[Daniel]

Thank you for your help. This was exactly what I was looking for.
Best Regards.

[Jason]

Where would this code go?  I added this to the page that is hosting the Editor but that did not work.

[Iliana Dyankova]

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

 

 

[Joel]

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>

[Dimitar]

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

[Joel]

Hi Dimitar,

  It works. Thanks.

regards,

joel