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

RadGrid Dragged Row show as Image (or html template)

2 Answers 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jes
Top achievements
Rank 1
Jes asked on 18 Mar 2016, 11:29 AM

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 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 21 Mar 2016, 09:28 AM
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.
0
Jes
Top achievements
Rank 1
answered on 29 Mar 2016, 03:50 AM
Thanks for the help. Will try it right away.
 
Tags
Grid
Asked by
Jes
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Jes
Top achievements
Rank 1
Share this question
or