Radgrid - Drag-n-drop - e.HtmlElement is undefined

[Majid]

hi
i am trying to darg row from a grid into another grid, after dropping the row , the onRowdrop event is fired, but for first one in serverside  e.HtmlElement in undefined.

ASPX:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="grd_DrugItems">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugItems"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugGroup"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btn_NewGroup">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugItems"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugGroup"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="txt_GroupName" />
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugGroupMaster"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="grd_DrugGroupMaster">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugGroupMaster"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugItems"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugGroup"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="grd_DrugGroupMaster"
                            LoadingPanelID="MasterAjaxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

    <div style="direction:ltr; width:770px; height:340px; margin:auto; margin-top:5px; background-image:url('Images/GroupBackground.png'); background-repeat:repeat-x; border-style:solid; border-width:1px; border-color:RGB(7,45,75);">
            <div id="HeaderSeprator" style="direction:rtl;background-image:url('Images/bg_foot_forms.gif'); background-position:bottom; width:95%; height:23px; margin:auto; background-repeat:no-repeat;">
                <p style="direction:rtl; margin:auto; width:-moz-max-content; margin-top:5px; font-family:Tahoma; font-size:12px; color:White;">
                    Please drag and drop
                </p>
            </div>
            <div id="ContainsGridDrugList" style="float:left; padding-left:10px; padding-right:1px; width:370px;height:270px; direction:ltr;">
                <p class="HeaderTextDrugList">
               drugs in pharmacy
                </p>
            <telerik:RadGrid ID="grd_DrugItems" runat="server" GridLines="None" Width="365px"
                onneeddatasource="grd_DrugItems_NeedDataSource" AutoGenerateColumns="False"
                    onrowdrop="grd_DrugItems_RowDrop" AllowMultiRowSelection="True">
                <ClientSettings AllowRowsDragDrop="True">
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />
                    <ClientEvents OnMasterTableViewCreated="MasterTableViewGrids_Created"
                        OnRowDropping="onRowDropping" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="200px" />
                </ClientSettings>
                <MasterTableView DataKeyNames="DrugId" TableLayout="Fixed" Width="100%" >
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn Display="False"
                            FilterControlAltText="Filter col_DrugId column" UniqueName="col_DrugId">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DrugForm" HeaderText="Form"
                            UniqueName="col_DrugForm">
                            <HeaderStyle Width="70px" HorizontalAlign="Left"/>
                            <ItemStyle HorizontalAlign="Left" Wrap="False" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DrugName" HeaderText="Name"
                            UniqueName="col_DrugName">
                            <HeaderStyle Width="205px" HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" Wrap="False" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DrugDose" HeaderText="Dose"
                            UniqueName="col_DrugDose">
                            <HeaderStyle Width="70px" HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" Wrap="False" />
                        </telerik:GridBoundColumn>
                    </Columns>

                <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                </EditFormSettings>
                </MasterTableView>
                <FilterMenu EnableImageSprites="False"></FilterMenu>
                <HeaderStyle  HorizontalAlign="Left"/>
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
            </telerik:RadGrid>
            </div>

            <div id="ContainsGridGroupDrug" style=" float:right; padding-left:1px; padding-right:10px; width:370px; height:270px; direction:ltr">
                <p class="HeaderTextDrugList">
 drugs in group
                </p>
            <telerik:RadGrid ID="grd_DrugGroup" runat="server" AutoGenerateColumns="False"
                CellSpacing="0" GridLines="None" onneeddatasource="grd_DrugGroup_NeedDataSource"
                onrowdrop="grd_DrugGroup_RowDrop" Width="365px" AllowMultiRowSelection="True">
                <PagerStyle Mode="NumericPages" />
                <ClientSettings AllowRowsDragDrop="True">
                    <Selecting AllowRowSelect="True" />
                    <ClientEvents OnMasterTableViewCreated="MasterTableViewGrids_Created" />
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"
                        ScrollHeight="200px" />
                </ClientSettings>
                <MasterTableView DataKeyNames="DrugId" TableLayout="Fixed" Width="100%">
                    <Columns>
                        <telerik:GridBoundColumn Display="False"
                            FilterControlAltText="Filter col_DrugId column" UniqueName="col_DrugId">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DrugForm" HeaderText="Form"
                            UniqueName="col_DrugForm">
                            <HeaderStyle Width="70px" HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" Wrap="False" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DrugName" HeaderText="Name"
                            UniqueName="col_DrugName">
                            <HeaderStyle Width="205px" HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" Wrap="False" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DrugDose" HeaderText="Dose"
                            UniqueName="col_DrugDose">
                            <HeaderStyle Width="70px" HorizontalAlign="Left" />
                            <ItemStyle HorizontalAlign="Left" Wrap="False" />
                        </telerik:GridBoundColumn>
                    </Columns>
                <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                </EditFormSettings>
                </MasterTableView>
                <HeaderStyle HorizontalAlign="Left"/>
            <FilterMenu EnableImageSprites="False"></FilterMenu>
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
            </telerik:RadGrid>
                        </div>

            <div id="GroupCommands" style="float:left;margin-top:1px; margin-bottom:0px; bottom:0px; position:relative; width:100%; height:40px; border-top-style:solid; border-top-width:1px; border-top-color:RGB(7,45,75); background-color:White;">
               <div id="DivGroupNameTextBox" style="float:right; direction:rtl; width:400px; padding-top:10px; padding-right:10px;">
                    <telerik:RadTextBox ID="txt_GroupName" runat="server" Width="300px"
                        Label="نام گروه:" >
                    </telerik:RadTextBox>
                </div>
                <div style="height:39px; float:right; width:200px;">
                    <telerik:RadButton ID="btn_NewGroup" runat="server" Text="RadButton"
                        Width="32px" Height="32px" CssClass="CommandImageButton"
                        onclick="btn_NewGroup_Click">
                        <Image ImageUrl="Images/Icons/PublicCommand/Save32.png" />
                    </telerik:RadButton>
                    <telerik:RadButton ID="Btn_RecycleBin" runat="server" Text="RadButton" Width="32px" Height="32px" CssClass="CommandImageButton">
                        <Image ImageUrl="Images/Icons/PublicCommand/RecycleBin32.png" />
                    </telerik:RadButton>
                </div>
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"
                        Width="32px" Height="32px" >
                        <Image ImageUrl="Images/Icons/PublicCommand/Save32.png"  IsBackgroundImage="true"/>
                </telerik:RadButton>
            </div>
        </div>
        <br />
        <div style="direction:ltr">

            <telerik:RadGrid ID="grd_DrugGroupMaster" runat="server" CellSpacing="0"
                GridLines="None" onneeddatasource="grd_DrugGroupMaster_NeedDataSource"
                AutoGenerateColumns="False" SkinID="LTRSkin"
                ondetailtabledatabind="grd_DrugGroupMaster_DetailTableDataBind">
                <ClientSettings>
                    <ClientEvents OnMasterTableViewCreated="MasterTableViewGrids_Created" />
                </ClientSettings>
            <MasterTableView DataKeyNames="GroupId" ClientDataKeyNames="GroupId">
                <DetailTables>
                    <telerik:GridTableView runat="server"
                        ClientDataKeyNames="DrugGroupMasterID,DrugGroupDetailID"
                        DataKeyNames="DrugGroupMasterID,DrugGroupDetailID" AllowPaging="True"
                        NoDetailRecordsText="دارویی در این گروه قرار داده نشده است">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn DataField="DrugForm"
                                FilterControlAltText="Filter col_DrugForm column" HeaderText="Form"
                                UniqueName="col_DrugForm">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="DrugName"
                                FilterControlAltText="Filter col_DrugName column" HeaderText="Name"
                                UniqueName="col_DrugName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="DrugDose"
                                FilterControlAltText="Filter col_DrugDose column" HeaderText="Dose"
                                UniqueName="col_DrugDose">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="DrugGroupMasterID" Display="False"
                                FilterControlAltText="Filter col_DrugGroupMasterID column"
                                HeaderText="DrugGroupMasterID" UniqueName="col_DrugGroupMasterID">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="DrugGroupDetailID" Display="False"
                                FilterControlAltText="Filter col_DrugGroupDetailID column"
                                HeaderText="DrugGroupDetailID" UniqueName="col_DrugGroupDetailID">
                            </telerik:GridBoundColumn>
                        </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
                     </telerik:GridTableView>
                </DetailTables>
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="DrugGroupMasterID" MasterKeyField="GroupId" />
                </ParentTableRelation>
                <Columns>
                    <telerik:GridBoundColumn DataField="GroupId"
                        FilterControlAltText="Filter col_GroupId column" HeaderText="Group Id"
                        UniqueName="col_GroupId">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="GroupName"
                        FilterControlAltText="Filter col_GroupName column" HeaderText="Group Name"
                        UniqueName="col_GroupName">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False"></FilterMenu>
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
    </telerik:RadGrid>

        </div>
    <br />
</asp:Content>

C#:

private DrugInteractionEntities Context;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Context == null)
                Context = new DrugInteractionEntities();

            grd_DrugItems.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
            grd_DrugItems.MasterTableView.AllowPaging = false;
            grd_DrugItems.MasterTableView.ShowFooter = false;
            grd_DrugItems.MasterTableView.AutoGenerateColumns = false;
            grd_DrugItems.MasterTableView.Dir = GridTableTextDirection.LTR;
            grd_DrugItems.Skin = "Default";
            grd_DrugItems.HeaderStyle.HorizontalAlign = HorizontalAlign.Left;

            grd_DrugGroup.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
            grd_DrugGroup.MasterTableView.AllowPaging = false;
            grd_DrugGroup.MasterTableView.ShowFooter = false;
            grd_DrugGroup.MasterTableView.AutoGenerateColumns = false;
            grd_DrugGroup.MasterTableView.Dir = GridTableTextDirection.LTR;
            grd_DrugGroup.Skin = "Default";
            grd_DrugGroup.HeaderStyle.HorizontalAlign = HorizontalAlign.Left;

            if (this.IsPostBack == false)
            {
                grd_DrugGroupMaster.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
                grd_DrugGroupMaster.MasterTableView.AllowPaging = false;
                grd_DrugGroupMaster.DataSource = Context.DrugGroupMasters;
                grd_DrugGroupMaster.MasterTableView.Dir = GridTableTextDirection.LTR;

                grd_DrugGroupMaster.MasterTableView.Attributes.Add("class", "RadGrid RadGrid_Web20");

                grd_DrugGroupMaster.MasterTableView.DetailTables[0].DataSource = Context.DrugGroupDetails;
                grd_DrugGroupMaster.MasterTableView.DetailTables[0].Dir = GridTableTextDirection.LTR;

            }

        }

        protected void grd_DrugItems_RowDrop(object sender, GridDragDropEventArgs e)
        {
            IList<DrugList> _groupingDrugList = GroupingDrugList;

            if (string.IsNullOrEmpty(e.HtmlElement))
            {
                if (e.DraggedItems[0].OwnerGridID == grd_DrugItems.ClientID)
                {
                    // Drugs drag from drugitemGrid to GroupGrid
                    int destinationIndex = -1;
                    foreach (GridDataItem draggedItem in e.DraggedItems)
                    {

                        int dragDrugId = Convert.ToInt32(draggedItem.GetDataKeyValue("DrugId"));
                        if (GroupingDrugListContains(_groupingDrugList, dragDrugId))
                            continue;
                        DrugList dl = Context.DrugLists.Where(d => d.DrugId == dragDrugId).First();
                        int ItemIndex = (e.DestDataItem == null ? 0 : e.DestDataItem.ItemIndex);
                        _groupingDrugList.Insert(ItemIndex, dl);

                    }

                    GroupingDrugList = _groupingDrugList;
                    grd_DrugGroup.Rebind();
                }
            }
        }
        protected void grd_DrugGroup_RowDrop(object sender, GridDragDropEventArgs e)
        {
            if(String.IsNullOrEmpty(e.HtmlElement) && e.HtmlElement=="Btn_RecycleBin")
            {

                IList<DrugList> _groupingDrugList = GroupingDrugList;
                foreach (GridDataItem draggedItem in e.DraggedItems)
                {
                    int dragDrugId = Convert.ToInt32(draggedItem.GetDataKeyValue("DrugId"));
                    GroupingDrugListRemoveById(_groupingDrugList, dragDrugId);
                }
                this.GroupingDrugList = _groupingDrugList;
                this.grd_DrugGroup.Rebind();
            }

        }

        protected void grd_DrugItems_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            grd_DrugItems.DataSource = Context.DrugLists;
        }

        protected void grd_DrugGroup_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            grd_DrugGroup.DataSource = GroupingDrugList;
        }

        protected IList<DrugList> GroupingDrugList
        {
            get
            {
                try
                {
                    object obj = Session["GroupingDrugList"];
                    if(obj==null)
                    {
                        Session["GroupingDrugList"] = obj = new List<DrugList>();
                    }
                    return (IList<DrugList>) obj;
                }
                catch
                {
                    Session["GroupingDrugList"] = null;
                }
                return new List<DrugList>();
            }
            set { Session["GroupingDrugList"] = value; }
        }
 protected void btn_NewGroup_Click(object sender, EventArgs e)
        {
            DrugGroupMaster DGM = new DrugGroupMaster() {GroupName = txt_GroupName.Text};
            for (int i = 0; i < this.GroupingDrugList.Count; i++)
            {
                DrugGroupDetail DGD = new DrugGroupDetail();

                DGD.DrugId = this.GroupingDrugList[i].DrugId;
                DGD.DrugGroupDetailID = i;
                DGM.DrugGroupDetails.Add(DGD);
            }
            Context.AddToDrugGroupMasters(DGM);
            Context.SaveChanges();

            this.GroupingDrugList = null;
        }

        protected void grd_DrugGroupMaster_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            if (e.IsFromDetailTable == false)
            {
                grd_DrugGroupMaster.MasterTableView.DataSource = Context.DrugGroupMasters;
            }
        }
        protected void grd_DrugGroupMaster_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
        {
            GridDataItem dataItem = (GridDataItem) e.DetailTableView.ParentItem;
            int groupMasterId = Convert.ToInt32(dataItem.GetDataKeyValue("GroupId"));
            grd_DrugGroupMaster.MasterTableView.DetailTables[0].DataSource =
                from drugDetail in Context.DrugGroupDetails
                where drugDetail.DrugGroupMasterID == groupMasterId
                select
                    new
                        {
                            drugDetail.DrugGroupMasterID,
                            drugDetail.DrugGroupDetailID,
                            drugDetail.DrugId,
                            drugDetail.DrugList.DrugForm,
                            drugDetail.DrugList.DrugName,
                            drugDetail.DrugList.DrugDose
                        };
        }
    }

Thank you

[Antonio Stoilkov]

Hello Majid,

I have examined your code and it works as expected on my side. Note that the e.HtmlElement is the target the is under the cursor when dropping the item. The e.HtmlElement is empty in most cases. Additionally, you could go through the demo below that demonstrates how drag-and-drop could be implemented.

• http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx 

Kind regards,
Antonio Stoilkov
the Telerik team