How to pass data to a modal?

3 posts, 0 answers
  1. Jens
    Jens avatar
    2 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    I have the following template which opens a modal with the id "terminAbsagen".

    In the modal i have a button with id "absagen" which needs the id of the entry i clicked, so i can take further actions for that item, e.g. delete the entry via Ajax:

    <script id="termineTemplate" type="text/x-kendo-template">
            <a
                class="details-link"
                data-role="listview-link"
                href="\#termindetails?id=#:id#">
                <h2>#:titel# #:date# um #:time# Uhr, #:ort#</h2>
            </a>
            
            
            <div class="options">     
                <a data-role="button" data-item-id="#:id#" href="\#terminAbsagen" data-rel="modalview">absagen</a>
            </div>
            
            <div data-role="modalview" id="terminAbsagen" style="width: 95%; height: 80%;">
                <div data-role="header">
                    <div data-role="navbar">
                        <span>Abmelden</span>
                        
                    </div>
                </div>
                <ul data-role="listview">
                    <li> Möchten Sie sich wirklich abmelden?</li>
                </ul>
               <div data-role="footer">
                    <div data-role="navbar">
                         <a data-click="doSomething(idOfItem)" id="absagen" type="button" data-role="button" class="btn-primary">Ja</a>                 
                    </div>
                 </div>
               


            </div>
               
        </script>
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 21 Oct 2012 Link to this post

    Hi,

    You can obtain a reference to the DOM element which opened the modalview in the open event. By the way, the modalview should reside outside of the template, otherwise it will be outputted multiple times. 

     

    Greetings,
    Petyo
    the Telerik team
    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. Craig
    Craig avatar
    43 posts
    Member since:
    Aug 2013

    Posted 07 Nov 2013 Link to this post


    Here is an example of calling a modal and passing an id variable through the ID of the <a> id attribute.
    ---------------
            <script type="text/x-kendo-template" id="template">
                #
                var recordid =  ID;
                #
                <a data-role="button" data-rel="modalview" href="\#modal1" id="${recordid}" myid="${ID}" >
                    Example Link
                </a>
            </script>
    --------------------------------
    Open: function(e) {
       var btnID =  e.target.context.id; // this grabs the id from the link
    },
    --------------------------------

    If someone has a cleaner way I would love to hear about it - but it looked to me to like I would have to traverse the DOM to find a custom variable ("myid" sample above).
Back to Top