Cannot Load from URL in Kendo Panel Bar tab

Question

I need to load the content of a new tab from a URL but I cannot get this to work

I need the same kind of thing as would have been done with an IFrame before HTML 5

The website I am going to has no link to the hosting site whatsoever

I have tried a simple version first

  @(Html.Kendo().PanelBar()
                  .Items(panelbar =>
                  {
                      panelbar.Add().Text("Test").LoadContentFrom(@"<object data='https://www.google.com' type='text/html'/>");                    
                  })
                  )

Has anyone been able to do this?

I am using the MVC wrappers as you can see

Paul

Answer 1

Firstly, you need to specify a name for your panelbar, otherwise it won't work. With regards to LoadContentFrom you should simply supply it with a url. Including this html markup makes no sense. So your code needs to look like this:

@(Html.Kendo().PanelBar()
                  .Name("Test")
                  .Items(panelbar =>
                  {
                      panelbar.Add().Text("Test").LoadContentFrom(@"https://www.google.com/");
                  })
)

However, this is still not going to work, because the request to google.com (or any other https site without the proper access-control-allow-origin header) will be blocked by CORS.

So this scenario may or may not work, depending on the external site you want to load from.

Furthermore, if you do not have a CORS issue and you are able to load the contents, this is still not going to work like an iframe, because you will receive only HTML, which will likely have broken images and no CSS. That's because you will be placing this html in a document, which has no access to those resources, unless they are referenced by domain name. You would have to search the entire html you receive and replace any image, css, and javascript references... and that still might not provide the same experience as an iframe.