KendoWindow close behaviour not working correctly with Kendo Mobile

[Edwin Kwok]

I try using KendoWindow in the Kendo Mobile app but whenever the window close, it also close the current view and go back to the main index view. It did the same for locally defined view by using data-role="view" in a div of the index.html or external view having <div data-role="view" as the beginning of the page.

 Please help.

 Thanks

Edwin

[Alexander Valchev]

Hello Edwin,

We are not aware of such problem and the provided information is not sufficient enough in order to determine that is going wrong. Could you please send me a small but runnable project or an example in jsFiddle (you can use this one as a base) that reproduces the problem? Thus way I would be able to investigate your case in details and do my best to provide you with an accurate solution. Please provide such sample and we will check it right away.

Greetings,
Alexander Valchev
the Telerik team

[Edwin Kwok]

Hi Alexander,

   To see the potential problem load the index.html, select <Survey Local> then click on <test> button. When click on the <cancel> button the KendoWindow closed so do the current view and will show the index.html the URL also change according ly, however close the window by click on the “X” on the upper right hand corner did close the window w/o any side effects.

 I also try external view that behaves the same way. You can test this by click on <Take Survey>

 Accoriding to my test the only time the KendoWindow.Close works is when it executes on its own pgae (i.e. not using Kendo Mobile Framework Application model). For example if I have a “full html5” page called xyz.html and I load that page from index.html the KendoWindow.Close will works ok.

PS the method that create the KendoWindow is called tesClick()

 Thanks

Edwin

[Petyo]

Hi,

You need to remove the href of the cancel button in order to prevent it from causing mobile application to navigate.

<a class="k-button k-button-icontext" id="btnCancel">
        <span class="k-icon k-cancel"></span>
        Cancel
    </a>

 

All the best,
Petyo
the Telerik team

[Edwin Kwok]

Hi Telerik,

  Thanks for you reply and it works. But what is the purpose of href="\\#"? I try to use this code with and w/o href="\\#" in a html5 web page (not mobile framework) example and it works in both case.

  I actually copy the code from one of the forums post that was targeting Kendo Window Web UI that means when I use Kendo web UI component in the Kendo Mobile framework the code may need adjustment right and where can I found that information/documentations?

  Also thing like k-icon k-... where can I find documentation of the value and effect of those k-icons?

Thanks
Edwin

[Alexander Valchev]

Hi Edwin,

The double back slash (" \\ ") is used in order to escape the hash characters (" # ") in the template definitions. 
Regarding to your second question, in the documentation you can find a help topic that discusses the KendoUI widget appearance and styling. The available icons for those widgets who support them are listed in the corresponding overview sections of the docs (for example - link), there you will also find a detailed explanations how to create custom icons.

Regards,
Alexander Valchev
the Telerik team