RadGrid Dragged Row show as Image (or html template)

3 posts, 0 answers
  1. Jes
    Jes avatar
    11 posts
    Member since:
    Mar 2016

    Posted 18 Mar 2016 Link to this post

    Hi All,

    I wanted to drag a single row from one radgrid to another, but the radgrid row while being dragged is too awkwardly long or big (my radgrid's width is to screen width). Is there a functionality where I could replace a row's appearance while being dragged by the cursor?

     

    Thanks,
    Jes

  2.
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 21 Mar 2016 Link to this post

    Hello Jes,

    Although that there is no built-in functionality for this, you can hide the default table element generated in the dragged DIV element and append your custom template. For your convenience, following is a very basic example for such implementation:
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function dragStarted(sender, args) {
                setTimeout(function () {
                    var draggedRow = sender._draggedRow;
                    $(draggedRow).find("table").hide();
                    $(draggedRow).append(getDragTemplate());
                })                 
            }
     
            function getDragTemplate() {
                return $("<span>template</span>");
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="400px">
        <ClientSettings AllowRowsDragDrop="true" Selecting-AllowRowSelect="true">
            <ClientEvents OnRowDragStarted="dragStarted" />
        </ClientSettings>
    </telerik:RadGrid>
     
    <telerik:RadListBox runat="server" ID="RadListBox1">
        <Items>
            <telerik:RadListBoxItem Text="item1" Value="1" />
            <telerik:RadListBoxItem Text="item2" Value="2" />
        </Items>
    </telerik:RadListBox>

    And the dummy data:
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        table.Columns.Add("LastName", typeof(string));
        for (int i = 0; i < 5; i++)
        {
            table.Rows.Add(i, "LastName" + 0);
            table.Rows.Add(i, "LastName" + 1);
        }
     
        (sender as RadGrid).DataSource = table;
    }

    You can use the draggedRow element for further customization.

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Jes
    Jes avatar
    11 posts
    Member since:
    Mar 2016

    Posted 28 Mar 2016 Link to this post

    Thanks for the help. Will try it right away.
Back to Top