Dynamic callback to a modalview

[N Mackay]

In WPF RadControls you can pass a function call back to a RadWindow. Can you use a similar approach with Kendo modalView?

WPF Example

this.commandWindowClosing = new RelayCommand<CancelEventArgs>((args) =>

            {

                if (!_closing)

                {

                    args.Cancel = true;

                    RadWindow.Confirm(AppConstConfirmShutdown, this.RequestShutdown);

                }

            });

 

private void RequestShutdown(object sender, WindowClosedEventArgs e)

        {

            try

            {

 

                if (e.DialogResult == true)

                {

                            // Do something


                }

Sorry for posting C# :-)

Is this approach possible with Javascipt and modalView in am mobile app? the samples I've seen don't do this

I know you can override the close event but that doesn't help me, If Kendo implemented Confirm,Alert etc like RadWindow it would be very useful.

[Kiril Nikolov]

Hello Norman,

The functionality that you are looking for is not supported.

You can use the Kendo UI Mobile ModalWindow's events - open, close, init and perform the custom functionality that you need there.

Please do not hesitate to contact us if any further help is needed.

Regards,
Kiril Nikolov
Telerik

[N Mackay]

Hi Kiril,

Thanks for such a quick response.

I had a look at the close event and overriding it but I can't see how I could get a return value from the modalView with a yes/no buttons and implement it in a reusable way like a simple MessageBox in .NET or RadWindow.Confirm.

Maybe I'm missing something

Kind Regards,
Norman.

[Kiril Nikolov]

Hi Norman,

This behavior is not built-in the ModalView as it was not created to server this type of functionality. However it is pretty easy to implement something like this, using regular buttons placed inside the ModalView. Please check the following example, and let me know if it helps:

http://jsbin.com/IKOLIwE/1/edit

Regards,
Kiril Nikolov
Telerik

[N Mackay]

Hi Kiril,

Thanks for your sample. I've implemented something similar already and it works fine but it's not reusable so as far as I can see if you had 6 different views that needed a yes/no confirm they'd have to be a separate implementation for each one unless you wrapped it into a helper class that could be called.

Ended up doing this as far as I can see each conform dialog needs it;s own implementation (luckily I only have one.

Markup

<div data-role="modalview" id="modalviewAppClose" style="width: 70%; height: 25%;">
            <div data-role="header">
                <div id="notifyNavbar" data-role="navbar">
                    <span>
                        <label id="notifyTitle">Exit</label>
                    </span>
                </div>
            </div>
            <div>
                <span>
                    <label id="shutdownMessage" style="vertical-align:middle;">Are you sure you wish to exit the app?</label>
                </span>
            </div>
            <footer data-role="footer">
                <span>
                    <center>
                        <a data-click="appShutdown" type="button" data-role="button">Confirm</a>
                        <a data-click="appShutdownCancel" type="button" data-role="button">Cancel</a>
                    </center>
                </span>
            </footer>
        </div>

Code

// Support for back button on Android devices
           function onLoad() {
               document.addEventListener("deviceready", onDeviceReady, false);
           }

           function onDeviceReady() {
               // Register the event listener
               document.addEventListener("backbutton", onBackKeyDown, false);
           }

           function onBackKeyDown() {

               if (kendo.support.mobileOS.android) {
                   app.hideLoading();
                   $("#modalviewAppClose").data("kendoMobileModalView").open();
               }
           }

           // Handles confirm click on shutdown modal view
           function appShutdown() {
               $("#modalviewAppClose").kendoMobileModalView("close");
               navigator.app.exitApp()
           }

           // Handles confirm click on shutdown modal view
           function appShutdowCancel() {
               $("#modalviewAppClose").kendoMobileModalView("close");
           }

Thanks for you assistance,
Norman.

[Kiril Nikolov]

Hello Norman,

I am glad you found a solution that fits your app requirements. 

Please keep in mind that we always have our User Voice section opened, so if you have any suggestions, please do not hesitate to share.

Regards,
Kiril Nikolov
Telerik