how to add a button to open a modal window on a Listview

[hector ventura]

HI :
I'm new on Kendoui, I have searching for a couple of days and I getting crazy, can someone help me to know how can I add a button, on each element of a Listview (PHP/Json) result, to open a modal window, where the customer can enter his reservation information, as Date, Adults and Childrens, here is my JavaScript code: 

<script>

     $(document).ready(function() {

            var dataSource = new kendo.data.DataSource({

                    pageSize: 8,

                    transport: {

                        read: "tours_lista.php",

                             dataType: "jsonp"

                    },

                    schema: {  

                        data: "data",

                        total: "data.length"

                    }

                     

                });

 

            $("#pager").kendoPager({

                dataSource: dataSource,

                 

                 

            });

 

            $("#listView").kendoListView({

                dataSource: dataSource,

                   

                template: kendo.template($("#template").html())

            });

             

        });

</script>

Here is my HTML code :

<div id="intro" >

        <H3>TOURS</H3>

    <div id="listView"></div>

    <div id="pager" class="k-pager-wrap"></div>

    <script type="text/x-kendo-tmpl" id="template">

      <div class="product">

           <a class="t-link"  href="inicio.php?action=detalle&tourid=${recid}"><img  src="controlc/test/${main_pic}" title="Ver detalles de ${tit_esp}" /></a>

            <h3>${tit_esp}</h3>

            <dl>

                <dt>Adulto: </dt>

                <dd>$ ${rate_adult}</dd>

                <dt>Niño: </dt>

                <dd>$ ${rate_child}</dd>

                 

            </dl>

             <div style="text-align:right;float:right;border:0px solid red;padding-top:7px;padding-left:5px;width:250px;height:30px;">

             </div>

        </div>

    </script>

    </div>

     <!-- end .intro -->

Attached is an image that explain a little mor what I need to do. In advances, thank you !!

Hector

[Nohinn]

Add a button in your template, then on the click event (through jquery or declared through html with onclick), to get the info of that object:

var lvData = $('#listView').data('kendoListView');

var index = $(this).parents('.product:first').index() + lvData.dataSource._skip;

 

var itemInfo = lvData.dataSource._data[index];
$('<div id="itemWindow"></div>').appendTo(document.body);
$('#itemWindow').kendoWindow();

In the itemInfo var you will have rate_adult, rate_child, and any other property of the item.
And of course, set the properties you need for the window.