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

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

1 Answer 199 Views
ListView
This is a migrated thread and some comments may be shown as answers.
hector ventura
Top achievements
Rank 1
hector ventura asked on 06 Sep 2012, 09:52 PM
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

1 Answer, 1 is accepted

Sort by
0
Nohinn
Top achievements
Rank 1
answered on 07 Sep 2012, 08:53 AM
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.
Tags
ListView
Asked by
hector ventura
Top achievements
Rank 1
Answers by
Nohinn
Top achievements
Rank 1
Share this question
or