How to display kendo listview as popup on button click event?

2 posts, 0 answers
  1. Parthasarathi
    Parthasarathi avatar
    24 posts
    Member since:
    Oct 2012

    Posted 14 Dec 2012 Link to this post

    Hi All,

    As per project requirement, I have to display kendo list-view as popup on button/link click?
    How we can do that? Please help in this case. Immediate response would be appreciated.

    Regards,
    Partha.
  2.
  3. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 17 Dec 2012 Link to this post

    Hi Parthasarathi,

     
    Basically you should just add ListView control inside Kendo Window content and open the window. Please check the example below:

    Html:

    <div id="windowId">
        <!-- Window content -->
        <div id="listView"></div>
    </div>
     
    <!-- ListView template -->
    <script type="text/x-kendo-tmpl" id="template">
        <div class="twit">
            <a class="t-link" href="http://www.twitter.com/${from_user}" title="${from_user}"><img width="48" height="48" src="${profile_image_url}" alt="${from_user}" /></a>
            <p>${text}</p>
        </div>
    </script>

    JavaScript:
    //ListView dataSource
    var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://search.twitter.com/search.json",
                    contentType: "application/json; charset=utf-8",
                    type: "GET",
                    dataType: "jsonp",
                    data: {
                        q: "#kendoui"
                    }
                }
            },
            schema: {
                data: "results",
                total: "results_per_page"
            }
        });
         
    //ListView initialize
    $("#listView").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#template").html())
    });
     
    var mywindow ="";
     
    // window initializing
    mywindow = $(windowId).kendoWindow({
        actions: ["Close"],
        draggable: true,
        height: "550px",
        modal: true,
        resizable: true,
        title: "ListView inside KendoWindow",
        width: "650px",
        visible: false
    });
     
     
    //Open the initialized Window on button click
    function openWindow()
    {
        if ($(windowId).data("kendoWindow")) {
            window = $(windowId).data("kendoWindow")
            window.center();
            window.open();
        }
    }

    For convenience I created small demo based on the above example and attached it to the current thread.
    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top