Dynamic callback to a modalview

6 posts, 1 answers
  1. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 16 Dec 2013 Link to this post

    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.
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 16 Dec 2013 Link to this post

    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.
  5. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 16 Dec 2013 Link to this post

    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.

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready