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:
     

    <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
  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);
    $('#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.
  3. Kendo UI is VS 2017 Ready
Back to Top