RadGrid Dragged Row show as Image (or html template)

[Jes]

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

 

[Konstantin Dikov]

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

[Jes]

Thanks for the help. Will try it right away.