This is a migrated thread and some comments may be shown as answers.

How to pass data to a modal?

2 Answers 829 Views
ModalView
This is a migrated thread and some comments may be shown as answers.
Jens
Top achievements
Rank 1
Jens asked on 17 Oct 2012, 08:01 AM
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 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 22 Oct 2012, 03:22 AM
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!
0
Craig
Top achievements
Rank 1
answered on 07 Nov 2013, 06:22 PM

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).
Tags
ModalView
Asked by
Jens
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Craig
Top achievements
Rank 1
Share this question
or