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

2 posts, 0 answers
  1. hector ventura
    hector ventura avatar
    3 posts
    Member since:
    Aug 2012

    Posted 06 Sep 2012 Link to this post

    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:

         $(document).ready(function() {
                var dataSource = new{
                        pageSize: 8,
                        transport: {
                            read: "tours_lista.php",
                                 dataType: "jsonp"
                        schema: {  
                            data: "data",
                            total: "data.length"
                    dataSource: dataSource,
                    dataSource: dataSource,
                    template: kendo.template($("#template").html())

    Here is my HTML code :

    <div id="intro" >
        <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>
                    <dt>Adulto: </dt>
                    <dd>$ ${rate_adult}</dd>
                    <dt>Niño: </dt>
                    <dd>$ ${rate_child}</dd>
                 <div style="text-align:right;float:right;border:0px solid red;padding-top:7px;padding-left:5px;width:250px;height:30px;">
         <!-- end .intro -->

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

  2. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 07 Sep 2012 Link to this post

    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);
    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.
Back to Top