New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Item drag and drop with client data binding


The get_clientDataKeyValue() method of the listview returns nothing (undefined) when drag-and-drop is used with client-side data binding.


The drag-and-drop feature is supported with the server-side binding only, and so is the get_clientDataKeyValue() method.


You can use data-\* attributes on the items to store the data item, and you can implement a custom drag handle for the items to allow dragging. Note that you must also implement methods that provide the custom handle with the listview ClientID and with the item index.

    /*dummy styles for the custom drag handle*/
    .rlvDrag {
        width: 30px;
        height: 30px;
        background: blue;
        cursor: move;

    /*dummy styles for the items*/
    .item {
        border: 1px solid black;
    function getListViewID() {
        return "<%=RadListView1.ClientID%>";

    //replace class name and ID with your actual item class and item placeholder ID
    //this example uses #items and .item
    function getItemIndex(dragHandle) {
        return $telerik.$("#items .item").index($telerik.$(dragHandle).parents(".item").first());
    function OnItemDragStarted(sender, args) {

    function OnItemDropping(sender, args) {


        args.set_cancel(true);//prevent the postback on drop

    //this function shows how you can use data-attributes to get data from the client-bound items
    function getDataFromItem(itemIndex) {
        var item = $telerik.$($telerik.$("#items .item")[itemIndex]);
<div id="dropZone" style="width: 300px; height: 50px; background: green; color: white;">DUMMY DROP ZONE</div>
<telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight">
        <div id="listView">

            <%--The ID of the container is needed in the scripts for the example traversal--%>
            <div id="items">
    <ClientSettings AllowItemsDragDrop="true">
        <DataBinding ItemPlaceHolderID="items">

                <%--the data-attributes on the item are used to fetch data in the events of the control--%>
                <div class="item rlvI" data-ContactName="#=ContactName#" data-CompanyName="#=CompanyName#">

                    <%--this element allows dragging. You can find example implementations of the needed functions above--%>
                    <div class="rlvDrag" onmousedown="Telerik.Web.UI.RadListView.HandleDrag(event, getListViewID(), getItemIndex(this))">

                    <%--some sample item template--%>
                        <span class="name">#= ContactName #</span>
                        <span class="company">#= CompanyName #</span>
        <ClientEvents OnItemDragStarted="OnItemDragStarted" OnItemDropping="OnItemDropping"></ClientEvents>
    function dataBindListView() {
        var data = [{
            ContactName: "name 1",
            CompanyName: "company 1"
        }, {
            ContactName: "name 2",
            CompanyName: "company 2"
        }, {
            ContactName: "name 3",
            CompanyName: "company 3"
        }, {
            ContactName: "name 4",
            CompanyName: "company 4"
        }, ];
        //this is only a dummy data source to showcase drag-and-drop
        //for an actual implementation of data binding, paging, sorting, filtering and so on
        //see the following demo:
        var listView = $find(getListViewID());
In this article