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.

    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>

     

     

  2. Attila Antal
    Admin
    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