Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Is there a way to change the grid image that gets dragged?

3 Answers 39 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael Koenig
Top achievements
Rank 1
Michael Koenig asked on 27 Apr 2010, 10:54 PM
For example, I am dragging a row from a grid to a Scheduler control. The grid row contains about 30 columns. However, I only want to display 4 columns in the drag image that I will drop on the Scheduler control.

Thanks in advance,

Mike

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Apr 2010, 03:46 PM
Hello Michael,

You can use a similar approach as the one described at

http://www.telerik.com/community/forums/aspnet-ajax/grid/drag-and-drop-columns-not-rows.aspx

Your case is simpler - you don't need to hide all rows and set background color, you just need to set some height to the wrapper (larger than 24px) and an overflow:hidden style to the same wrapper element.

Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Michael Koenig
Top achievements
Rank 1
answered on 05 May 2010, 02:23 PM
The example in thislink: http://www.telerik.com/community/forums/aspnet-ajax/grid/drag-and-drop-columns-not-rows.aspx works great but it's not exactly what I want to do. I just want to change the dragged image to reflect a few columns, not all of them. Do you have an example of how to do this?

Thanks,

Mike
0
Dimo
Telerik team
answered on 10 May 2010, 01:43 PM
Hello Michael,

You can add a CSS class to the columns (cells actually) that you will want to hide during dragging like this:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<script runat="server">
  
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 5;
        string colName = "Column";
  
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
  
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
  
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
  
        (sender as RadGrid).DataSource = dt;
    }
      
</script>
  
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<style type="text/css">
  
#<%= RadGrid1.ClientID %>_DraggedRows
{
    width:500px !important;
}
 
#<%= RadGrid1.ClientID %>_DraggedRows .NoDragShow
{
    display:none;
}
  
</style>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
  
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
  
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    AutoGenerateColumns="false"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="Column1" HeaderText="Column 1" />
            <telerik:GridBoundColumn DataField="Column2" HeaderText="NoDragShow" ItemStyle-CssClass="NoDragShow" />
            <telerik:GridBoundColumn DataField="Column3" HeaderText="Column 3" />
            <telerik:GridBoundColumn DataField="Column4" HeaderText="Column 4" />
        </Columns>
    </MasterTableView>
    <ClientSettings AllowRowsDragDrop="true" AllowAutoScrollOnDragDrop="false">
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>
  
</form>
</body>
</html>


Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
Michael Koenig
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Michael Koenig
Top achievements
Rank 1
Share this question
or