Announcement

Collapse
No announcement yet.

Retyped.bootstrap3_dialog.BootstrapDialog

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    Retyped.bootstrap3_dialog.BootstrapDialog

    I've been trying to add an instance of a Bootstrap dialog using the retyped library to a body, div, or otherwise, without success. Is there something simple that I'm missing? I'm brand new to this, but LOVE it.

    Perhaps I have to create the instance IN HTML on the form, and this typed instance just allows me to access it as an object? Maybe I'm over-thinking this.. it's just a reference to HTML object that's already there?
    Last edited by losdude; 2019-05-04 @ 05:12 AM.

    #2
    Hi. Welcome to Bridge!

    Can you share a simplified .cs code sample demonstrating what you have configured so far?

    Comment


      #3
      var dialogInstance = new bootstrap3_dialog.BootstrapDialog.DialogInstance() ;
      var modalinside = dialogInstance._modal.bootstrap();
      Just trying to create a modal instance with headers, body, etc. But I'm SURE I'm doing this wrong...
      Last edited by geoffrey.mcgill; 2019-05-04 @ 08:45 PM.

      Comment


        #4
        Hi. I was able to get a basic BootstrapDialog demo with Buttons working using the following:

        using System;
        using static Retyped.dom;
        using static Retyped.bootstrap3_dialog;
        
        namespace demo
        {
            public class Program
            {
                public static void Main()
                {
                    var button = new HTMLButtonElement();
        
                    button.innerText = "Open Dialog";
                    button.className = "btn btn-primary";
                    button.onclick += (e) => {
                        OpenDialog();
                    };
        
                    document.body.appendChild(button);
                }
        
                public static void OpenDialog()
                {
                    var count = 1;
        
                    var options = new BootstrapDialog.DialogOptions
                    {
                        title = "BoostrapDialog Demo",
                        message = "Bridge.NET and Retyped",
                        buttons = new BootstrapDialog.DialogButton[]
                        {
                            new BootstrapDialog.DialogButton
                            {
                                label = "Count",
                                cssClass = "btn btn-primary",
                                action = (e) =>
                                {
                                    e.setMessage($"Clicked {count} times");
                                    count++;
                                }
                            },
                            new BootstrapDialog.DialogButton
                            {
                                label = "Cancel",
                                cssClass = "btn btn-light",
                                action = (e) =>
                                {
                                    e.close();
                                }
                            }
                        }
                    };
        
                    BootstrapDialog2.show(options);
                }
            }
        }
        Retyped does not automatically include the required jQuery, Bootstrap, and BootstrapDialog JavaScript files, so you'll need to manually include the .js files into your own .html file. Here's the sample I was using to test:

        <!DOCTYPE html>
        
        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8" />
            <title>Bridge.NET Demo</title>
        
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
            <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
        
            <script src="bridge.min.js"></script>
            <script src="demo.min.js"></script>
        
            <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
        </head>
        <body style="padding: 30px;">
        </body>
        </html>
        Last edited by geoffrey.mcgill; 2019-05-04 @ 11:22 AM.

        Comment


          #5
          Brilliant, thank you! I do believe (after my intense search) that this might be the first documented version of this? Are there more samples for other retyped items anywhere? It's possible that my search didn't lead me to them?

          Also,
          * what is BootstrapDialog.DialogInstance used for?
          * in what why might I connect to an existing dialog on an HTML page by use of possibly a jquery select and then interact with it as using this retyped class?

          THANK YOU! I'm so glad I found this site. Where have you been hiding?
          Last edited by losdude; 2019-05-04 @ 07:06 PM.

          Comment


            #6
            We have a few additional Retyped demos at https://demos.retyped.com.

            I'll get back to you soon with additional information on the DialogInstance class.

            Comment


              #7
              Yes, I went through all of those demos, but none of them included any of the dialog stuff, or really any other bootstrap stuff in detail. Of course, we all can simply create a generic item and programmatically add classes to them, thus making them "bootstrap" items, but I really like using the Retyped classes. Call me a purist "of sorts".

              I'd LOVE to put together some samples of not only other Bootstrap items and interactions, but the Material Design ones as well. Has anyone done that yet? THANK YOU so much for your help. Let me know if there's a DONATE button anywhere to help with the cause here.

              Comment


                #8
                Has anyone done that yet?
                Not that I'm aware of. We would love your contribution to the Retyped demos if you want to build an additional demo focused on Bootstrap samples. All the Retyped demos are available in the following GitHub repo:

                https://github.com/Retyped/Demos
                Last edited by geoffrey.mcgill; 2019-05-04 @ 08:45 PM.

                Comment


                  #9
                  Fantastic, I'd love to. Once I get a grip on the retyped classes, I'll shout back to you. They're wonderful, but a bit confusing when you first dive into them. If the architecture is the same (or close) on each, I should be able to produce some samples that would be of use. I scoured for many hours attempting to grasp the one you just did, not realizing that the BootstrapDialog2 was the object I needed to call the method against the setup class, so thank you. Hopefully the others (Material Design) are similar?

                  Thank you, again.

                  Comment

                  Working...
                  X