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

[Parthasarathi]

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.

[Vladimir Iliev]

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