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

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

1 Answer 710 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Parthasarathi
Top achievements
Rank 1
Parthasarathi asked on 14 Dec 2012, 10:24 AM
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.

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 17 Dec 2012, 03:48 PM
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!
Tags
ListView
Asked by
Parthasarathi
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or