Drag & Drop did not work in User Control

[Tony]

Hello,

I'm trying to do drag and drop with the RadGrid, it works find when I run the sample code in an .aspx page, but when I use the same code in the .ascx user control, it didn't work. I found out it's because the e.DestDataItem = nothing. Is there something else I need to do? Thanks.

Tony

[Sebastian]

Hello Tony,

Can you please verify that you are using the latest version 2009.1.402 of RadControls for ASP.NET AJAX in your project or the latest internal build from our site? There was similar issue reported with previous versions of the grid which has to be addressed in the latest version of the product.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Stephen Braich]

Hello,

I am having this same problem.  The grid is in a .ascx user control and when I step into the RowDrop method, the e.DestDataItem object is null.  I should also mention that e.HtmlElement is not null or empty so I have to step over that first if statement.  One last thing I should mention is that my grid has groupby columns.  I have provided the markup for the grid and the RowDrop method.

Telerik.Web.UI.dll version: 2009.2.701.35

Thanks,
Steve

        protected void gridFirstCallout_RowDrop(object sender, GridDragDropEventArgs e)
        {
            if (string.IsNullOrEmpty(e.HtmlElement))
            {
                if (e.DraggedItems[0].OwnerGridID == gridFirstCallout.ClientID)
                {
                    //step 1: get list of records
                    FirstCallOutRosterCollection<IFirstCallOutRecord> firstCalloutCollection = this.facade.GetFirstCalloutReturnObject(this.hdnWorkAreaUserControl.Value);

                    //step 2: Get the index and record of the First Call record that is currently in the position where the dragged record will go to
                    FirstCallOutRecord firstCallDestination = this.facade.GetFirstCalloutRecord(Convert.ToString((int)e.DestDataItem.GetDataKeyValue("FIRSTCALL_ROSTER_ID")));
                    int destinationIndex = firstCalloutCollection.IndexOf(firstCallDestination);

                    //Step 3: Get the index and record for the order being moved
                    FirstCallOutRecord firstCallDragged = this.facade.GetFirstCalloutRecord(Convert.ToString((int)e.DraggedItems[0].GetDataKeyValue("FIRSTCALL_ROSTER_ID")));


                    //Step 4: Remove the record that is being moved and insert it into it's new location.
                    firstCalloutCollection.Remove(firstCallDragged);
                    firstCalloutCollection.Insert(destinationIndex, firstCallDragged);

                    //Step 5: Rebind the grid
                    this.gridFirstCallout.DataSource = firstCalloutCollection;
                    this.gridFirstCallout.DataBind();

                    //Step 6: Select the row in the grid that was just dragged.
                    e.DestDataItem.Selected = true;
                }
            }
        }

 

 

 

[Stephen Braich]

I forgot to provide the HTML markup for the grid:

<telerik:RadGrid ID="gridFirstCallout" runat="server" SelectedItemStyle-BackColor="LightBlue"
        Width="100%" Height="100%"
        Skin="Default2006"
        EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
        onneeddatasource="gridFirstCallout_NeedDataSource"
        OnDataBound="gridFirstCallout_OnDataBound" onrowdrop="gridFirstCallout_RowDrop">
<HeaderContextMenu EnableTheming="True">
    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</HeaderContextMenu>

<MasterTableView AutoGenerateColumns="False" DataKeyNames="FIRSTCALL_ROSTER_ID" >
    <HeaderStyle Height="10px" />
    <GroupByExpressions>
        <telerik:GridGroupByExpression>
            <SelectFields>
               <telerik:GridGroupByField FieldName="work_area_header" HeaderText=" " HeaderValueSeparator=" "></telerik:GridGroupByField>
            </SelectFields>
            <GroupByFields>
                <telerik:GridGroupByField FieldName="work_area_type_code"></telerik:GridGroupByField>
                <telerik:GridGroupByField FieldName="work_area_name" FieldAlias="work_area_name" FormatString=""
                    HeaderText=""></telerik:GridGroupByField>
            </GroupByFields>
        </telerik:GridGroupByExpression>
    </GroupByExpressions>
<RowIndicatorColumn><HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
    <HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn ItemStyle-Width="17%" HeaderStyle-Width="17%"
 DataField="work_role" HeaderText="Work Role" UniqueName="work_role">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn ItemStyle-Width="17%" HeaderStyle-Width="17%"
 DataField="coverage_comments" HeaderText="Coverage Info" UniqueName="coverage_comments">
</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="employee" HeaderText="Employee / Position" ItemStyle-Width="17%" HeaderStyle-Width="17%">
      <ItemTemplate>
      <%# DataBinder.Eval(Container.DataItem, "NAME_LFM").Equals("") ?
          DataBinder.Eval(Container.DataItem, "POSITION_TITLE") :
          DataBinder.Eval(Container.DataItem, "NAME_LFM") + " (" + DataBinder.Eval(Container.DataItem, "employee_id") + ")" %>
      </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="PREFERRED_CONTACT_METHOD" HeaderText="Preferred" ItemStyle-Width="7%" HeaderStyle-Width="7%">
      <ItemTemplate>
      <%# DataBinder.Eval(Container.DataItem, "PREFERRED_CONTACT_METHOD").Equals("") ?
          DataBinder.Eval(Container.DataItem, "POSITION_CONTACT_METHOD") :
          DataBinder.Eval(Container.DataItem, "PREFERRED_CONTACT_METHOD") %>
      </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Comments" HeaderText="Position Comments / Special Instructions"
  ItemStyle-Width="37%" HeaderStyle-Width="37%">
      <ItemTemplate>
        <b>Comments:</b> <%# DataBinder.Eval(Container.DataItem, "position_comments")%>
        <br/>
        <b>Instructions:</b> <%# DataBinder.Eval(Container.DataItem, "special_instructions")%>
      </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Reports" Display="false" ItemStyle-Width="5%" HeaderStyle-Width="5%"
    HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
      <ItemTemplate>
       <nobr>
       <button style="height:22px; width:22px" onclick="javascript:LaunchCallDialog('FCO', '<%# DataBinder.Eval(Container.DataItem, "EMPLOYEE_ID") %>', '<%# DataBinder.Eval(Container.DataItem, "WORK_AREA_ID") %>', '<%=gridFirstCallout.ClientID %>', this, '<%=btnRefreshFco.ClientID %>')">
              <img src="images/phone.png">
       </nobr>
       </button>
      </ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="WORK_AREA_ID" UniqueName="WORK_AREA_ID" ItemStyle-Width="0px" HeaderStyle-Width="0px" >
<HeaderStyle Width="0%"></HeaderStyle>
<ItemStyle Width="0%"></ItemStyle>
    </telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FIRSTCALL_ROSTER_ID" UniqueName="FIRSTCALL_ROSTER_ID" ItemStyle-Width="0px" HeaderStyle-Width="0px" >
<HeaderStyle Width="0%"></HeaderStyle>
<ItemStyle Width="0%"></ItemStyle>
    </telerik:GridBoundColumn>
</Columns>
</MasterTableView>

<ClientSettings AllowRowsDragDrop="True">
    <Selecting AllowRowSelect="True" EnableDragToSelectRows="true"/>
    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>

[Sebastian]

Hi Stephen,

My colleague Veli already replied in the support ticket you opened with regards to this subject. I am posting his response in this forum thread for further reference (along with the sample project he provided):

Thank you for contacting Telerik support and for the sample code. I tested RadGrid with your scenario and everything seems to be working OK. I am attaching a small test page you can run locally.

One thing I would like to comment on is e.HtmlElement. This property is set to the client ID of the element you drop your dragged items on, but only when you are not dropping over other RadGrid data items. In the RadGrid Items Drag-Drop demo, you can note that you can drop over RadGrid data items where e.DestDataItem gives you the destination item, but when you drop over the trash bin, you get  the container's client id in e.HtmlElement and null in e.DestDataItem.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.