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

How to make RadListView items drag and drop.

1 Answer 57 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Saifulla
Top achievements
Rank 1
Saifulla asked on 11 Oct 2018, 02:16 PM

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.

script:

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';
            table.id = 'myTable';
 
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);
 
            for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);
 
                for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                    var td = document.createElement('TD');
                    td.width = '120';
                    td.height = '50';
                    td.appendChild(document.createTextNode(""));
                    tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);
}

 

Markup: 

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

 

 

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 16 Oct 2018, 12:26 PM
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.
Tags
ListView
Asked by
Saifulla
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or