Load pane with ajax

[Fernando]

Can you please share a simple working sample in which we have:

- vertical splitter with three panes (A,B,C)
- in pane A there area images(logos)
- in pane B there is a menu
- when you select an option(item) of the menu, you can load a page (url) into the pane C
- pane C could be a pane or iframe

I had been searching in the forum, but there is not a sample like the one I mentioned, using ajaxrequest or contentUrl it doesnt work

[Fernando]

For a better understandng I create a short sample:

https://dojo.telerik.com/@Fernando/edEMOBoQ

I have the next issues:

- how can I stop the menu propagation  (I found in the forums an alternative way, but I dont know if it is correct)

- the loading animation always is present, even when the pane is loaded for the first time, as if you select a menuitem

- when you select an subitem from the menu (i.e. item 2 subitem2), the iframe src property is loaded ok, but the menu isnot closing after you select 

- I used an iframe, because changing the contentURL and ajaxrequest after clicking(select event) a menu item doesnt work

Any comment is welcomed.

 

Thanks.

 

[Ianko]

Hi Fernando,

Here you are a modified dojo: https://dojo.telerik.com/aLAKuJUl/3. 

The menu navigation is prevented correctly this way. I cannot think of possible side effects by using this code.

The loading animation is present because of the contentUrl defined as about:blank. Thus, there is no success for the ajax request. On a side note, you should use https instead of http in urls as the dojo is used through SSL-enabled protocol. 

The closing of the menu popups depend on blur event on the window. Having an iframe, focusing on the iframe will not trigger blur. Thus, it will not close the menus. A click in the same document, where Menu is added will close it. You could possibly handle the DOM events of the iframe and close the menu programmatically: https://docs.telerik.com/kendo-ui/api/javascript/ui/menu/methods/close. 

In order to change the utl of the pane, you can use the ajaxRequest method. In this case it does not load content because if the result from the URL. You can check out the warnings in the console for further details. If, however, you are using local requests (i.e., using endpoints that are in the same domain) you should be fine. 

Regards,
Ianko
Progress Telerik

[Fernando]

Thanks in advance lanko.

I tried the following code and it works fine:

http://dojo.telerik.com/@Fernando/ixevOroc