How to make RadListView items drag and drop.

2 posts, 0 answers
  1. Saifulla
    Saifulla avatar
    15 posts
    Member since:
    Sep 2018

    Posted 11 Oct 2018 Link to this post

    I am generating a dynamic table based on user input, for giving input i am using ribbonbar combobox. And i have a list view, contain some items. I want to drag and drop listview items in generated table cells. How can i achieve this?? can someone help me with code i am new to teleriks.

    Thank, regards.


    var getValue = null;
            function OnClientComboBoxTextChanged(sender, args) {
                getValue = args.get_comboBox().get_text();
    function CreateTable() {
                var rowCtr;
                var cellCtr;
                var rowCnt = getValue;
                var cellCnt = getValue;
                var myTableDiv = document.getElementById('myDynamicTable');
                var table = document.createElement('TABLE');
                table.setAttribute("contenteditable", "true");
                table.border = '1';
       = 'myTable';
                var tableBody = document.createElement('TBODY');
                for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
                    var tr = document.createElement('TR');
                    for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                        var td = document.createElement('TD');
                        td.width = '120';
                        td.height = '50';



      <telerik:RibbonBarGroup Text="Table Generator">
                                <telerik:RibbonBarControlGroup Orientation="Horizontal">
                                        <telerik:RibbonBarComboBox ID="txtRow" Width="60" runat="server">
                                                <telerik:RibbonBarListItem Selected="true" />
                                        <telerik:RibbonBarComboBox ID="txtCol" Width="60" runat="server">
                                                <telerik:RibbonBarListItem Selected="true" />
                                        <telerik:RibbonBarButton ID="btnGenerate" runat="server" Text="Create" />
    <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight">
                        <div style="padding:10px 0 0 10px">
                        <telerik:RadLabel Text="RadLabel1" ID="rlb1" runat="server" RenderMode="Lightweight" CssClass="listViewStyles">
                        <br />
                        <div style="padding:10px 0 0 10px">
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" RenderMode="Lightweight">
                        <div style="padding:10px 0 0 10px">
                        <telerik:RadTimePicker ID="RadTimePicker1" runat="server" RenderMode="Lightweight">
                        <div style="padding:10px 0 0 10px">
                        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" RenderMode="Lightweight">
                        <div style="padding:10px 0 0 10px">
                        <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" RenderMode="Lightweight">
                        <DataBinding ItemPlaceHolderID="itemContainer">
                                <div id="#= ItemHeader #" class="ListViewStyle">
                                    <div style="vertical-align: top; width: 100%">
                                        <table id="ListviewTable">
                                                <td colspan="2">
                                                    <span id="ItemHeader" class="ItemHeaderStyle"><b>#= ItemHeader #</b></span>



  2. Attila Antal
    Attila Antal avatar
    592 posts

    Posted 16 Oct 2018 Link to this post

    Hi Saifulla,

    To enable the Drag and Drop for the RadListView, I suggest following the steps described in the Drag and Drop documentation. You can also see this in action by checking out the ListView - Items Drag-and-drop demo. These will give you a better understanding on Drag & Drop functionality.

    I hope it will be helpful.
    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top