Darg-Drop item from one data group to another data group in Telerik RadListView

4 posts, 0 answers
  1. Md Ershad
    Md Ershad avatar
    2 posts
    Member since:
    Jun 2014

    Posted 22 Jun 2014 Link to this post

    Hi,
    I am trying to use the Telerik RadListView Darg-Drop feature: 
    http://demos.telerik.com/aspnet-ajax/listview/examples/datagrouping/defaultcs.aspx

    I want to be able to drag an item from one data group to another datagroup. How can I do that?

    ASPX code:

    <telerik:RadListView runat="server" ID="Lsv_Vis" AllowPaging="True" PageSize="50"
        ItemPlaceholderID="Phi_Vis_I" GroupPlaceholderID="Phi_Vis_G"
        DataKeyNames="url_id, lst_id, url_name, url_address" ClientDataKeyNames="url_id, lst_id, url_name, url_address"
        OnItemDrop="CsVisItemDrop" OnItemDataBound="CsVisIDB" DataSourceID="Sql_Vis">
    </telerik:RadListView>

    <DataGroups>
        <telerik:ListViewDataGroup GroupField="lst_id" DataGroupPlaceholderID="Phi_Vis_G">
            <DataGroupTemplate>
                <div class="Div_Vis_Grp"><span class="Spn_Vis"><%# (Container as RadListViewDataGroupItem).AggregatesValues["lst_name"].ToString() %></span></div>
                <asp:Panel ID="Pnl_Vis" runat="server" CssClass="Pnl_Vis" ToolTip='<%# (Container as RadListViewDataGroupItem).DataGroupKey %>' onmouseover='this.className += " Vis_Sel";' onmouseout='this.className = this.className.split(" Vis_Sel").join("");'>
                    <asp:PlaceHolder ID="Phi_Vis_I" runat="server" />
                </asp:Panel>
            </DataGroupTemplate>
            <GroupAggregates>
                <telerik:ListViewDataGroupAggregate Aggregate="Max" DataField="lst_name" />
            </GroupAggregates>
        </telerik:ListViewDataGroup>
    </DataGroups>
    <ItemTemplate>
        <div class="Div_Vis_Item rlvI">
        <asp:Panel ID="Pnl_Vis" runat="server" ToolTip='<%# Eval("lst_id") %>' CssClass="Div_Vis_Item" onmouseover='this.className += " Vis_Sel";' onmouseout='this.className = this.className.split(" Vis_Sel").join("");'>
            <a class="Hyp_Vis" runat="server" href='<%# Eval("url_address") %>' target="_blank">
                <div class="Div_Vis_Body">
                    <div class="Div_Vis_Con">
                        <asp:Panel ID="Div_Vis_Con" runat="server" class="Div_Vis_Con" ToolTip='<%# Eval("lst_id") %>' ></asp:Panel>
                    </div>
                </div>
                <div class="Div_Vis_Link">
                    <asp:Label ID="Lbl_VisI" runat="server" Text='<%# Eval("url_name_short") %>' ToolTip='<%# Eval("url_name") %>'/>
                </div>
            </a>
        </asp:Panel>
        </div>
    </ItemTemplate>

    C# Code:

    protected void CsVisItemDrop(object sender, RadListViewItemDragDropEventArgs e)
    {
        if (e.DestinationHtmlElement.IndexOf("Div_Vis_Con") < 0)
        {
            return;
        }
     
        foreach (RadListViewDataItem di in Lsv_Vis.Items)
        {
            Panel pnl = di.FindControl("Div_Vis_Con") as Panel;
     
            if (pnl != null && pnl.ClientID == e.DestinationHtmlElement)
            {
                string uid = e.DraggedItem.GetDataKeyValue("url_id").ToString();
                string lid = pnl.ToolTip.ToString();
     
                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Con_Str"].ToString()))
                {
                    using (SqlCommand cmd = new SqlCommand("UPDATE [MyTable] SET lst_id = @lst_id WHERE url_id = @url_id", conn))
                    {
                        cmd.Parameters.Add("@lst_id", SqlDbType.VarChar).Value = lid;
                        cmd.Parameters.Add("@url_id", SqlDbType.VarChar).Value = uid;
                        try
                        {
                            conn.Open();
                            cmd.ExecuteNonQuery();
                            conn.Close();
                        }
                        catch { }
                    }
                }
            }
        }
        Lsv_Vis.Rebind();
    }

    <telerik:RadListView runat="server" ID="Lsv_Vis" AllowPaging="True" PageSize="50"
        ItemPlaceholderID="Phi_Vis_I" GroupPlaceholderID="Phi_Vis_G"
        DataKeyNames="url_id, lst_id, url_name, url_address" ClientDataKeyNames="url_id, lst_id, url_name, url_address"
        OnItemDrop="CsVisItemDrop" OnItemDataBound="CsVisIDB" DataSourceID="Sql_Vis">
    </telerik:RadListView>

    <telerik:RadListView runat="server" ID="Lsv_Vis" AllowPaging="True" PageSize="50"
        ItemPlaceholderID="Phi_Vis_I" GroupPlaceholderID="Phi_Vis_G"
        DataKeyNames="url_id, lst_id, url_name, url_address" ClientDataKeyNames="url_id, lst_id, url_name, url_address"
        OnItemDrop="CsVisItemDrop" OnItemDataBound="CsVisIDB" DataSourceID="Sql_Vis">
    </telerik:RadListView>

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Jun 2014 Link to this post

    Hello,

    The required functionality is not supported and could not be implemented with the RadListView control. There is not way to determine the exact group you are dragging from and to on the client and on the server so that you could bind the control with this updated information.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Md Ershad
    Md Ershad avatar
    2 posts
    Member since:
    Jun 2014

    Posted 26 Jun 2014 in reply to Maria Ilieva Link to this post

    Hi,
    Thank you so much for your help. At least, how can you drag an item from a RadListView and drop the item to the same RadListView [may sound odd, but I need this] while changing some value of the dragged/dropped item when it's dropped to the RadListView.

    Your help will be highly appreciated.
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 01 Jul 2014 Link to this post

    Hi,

    Find attached a sample runnable application which should cover your requirements.
    Test ti on your end and verify if it helps.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top