Need Help on RadGrid Drag-and-Drop

[Han]

Hello,

I'm new to this forum.  I see the Drag-and-Drop Row demo, I really like it.  I have a similar scenario where my first radgrid (doctorRadgrid) displays all the doctor names (using Linq binds from code behind), and the second radgrid (scheduleRadgrid) contains only doctor names that dragged from the first radgrid.  However, when a user drags a doctor name from doctorRadgrid to scheduleRadgrid, I don't want that doctor name deleted from the doctorRadgrid.  I just want it copy to the scheduleRadgrid.  Is that possible?  Can you please provide sample code, I really aprreciated your help.

Thanks in advance!

[Maria Ilieva]

Hi Han,

The selected row form the first RadGrid is actually deleted as in the RowDrop server event such code for removing the item is executed. If you need to prevent this behavior you should just remove this code in the RowDrop event of the mentioned demo. Just comment the "pendingOrders.Remove(tmpOrder);" row and verify if his makes any difference

All the best,
Maria Ilieva
the Telerik team

[Han]

Thank you for the reply.  It works great.  In addition, I have a start date and an end date that input by an end user.  For example: if a user entered April 1 for the start date and April 3 for the end date.  I want the scheduleRadGrid expand 3 rows with listed three dates in the first column so that a user can drag a doctor name from doctorRadGrid and drop onto scheduleRadGrid accordingly by the date. Here is the sample output:

doctorRadGrid

start date: 4-1-11             end date: 4-3-11

doctorId	lastName	firstName
1	Smith	John
2	Mouse	Micky
3	Donald	Duck

scheduleRadGrid

Date	doctorId	lastName	firstName
4-1-11	3	Donald	Duck
4-2-11	1	Smith	John
4-3-11	2	Mouse	Micky

Please provide the code in C# and thank you for your help and support!

Telerik rocks!!!

[Maria Ilieva]

Hi Han,

One possible approach for achieving the required functionality you could enable to autopostback on the end date picker and when a date is selected a server event will fire. In this server event you could get a parameter which will be the end date minus the starts date and call Rebind of the Grid. This rebind will hit the NeedDataSource event in which depends on this parameter you could bind the grid with the needed items.

All the best,
Maria Ilieva
the Telerik team

[Han]

Thanks for your reply.  I did what you have suggested and it displays the date correct.  However, when I dragged a row from the doctorRadGrid to the scheduleRadGrid I got an error message:

Error: Sys.WebForms.PageRequestManagerServerErrorException: Index was out of range. Must be non-negative and less than the size of the collection.

Parameter name: index

Below is my code, please advise.  Thank you very much!
//AddSchedule.aspx

<%@ Page Title="Add Schedule Page" Language="C#" MasterPageFile="~/MasterPage/AdminMasterPage.master" AutoEventWireup="true" CodeFile="AddSchedule.aspx.cs" Inherits="Admin_AddSchedule" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="AdminMasterContent" Runat="Server">
    <script type="text/javascript">
        function onRowDropping(sender, args) {
            if (sender.get_id() == "<%=doctorRadGrid.ClientID %>") {
                var node = args.get_destinationHtmlElement();
                if (!isChildOf('<%=scheduleRadGrid.ClientID %>', node) && !isChildOf('<%=doctorRadGrid.ClientID %>', node)) {
                    args.set_cancel(true);
                }
            }
            else {
                    node = args.get_destinationHtmlElement();
            }
        }

        function isChildOf(parentId, element) {
            while (element) {
                if (element.id && element.id.indexOf(parentId) > -1) {
                    return true;
                }
                element = element.parentNode;
            }
            return false;
        }

    </script>
    <div class="title">
        Manage Schedules
    </div><br />
       <div>
        <asp:UpdatePanel ID="tableUpdatePanel" runat="server">
            <ContentTemplate>
                <table>
                    <tr>
                        <td style="width:30%; text-align:right">Start:<telerik:RadDatePicker ID="startRadDatePicker"
                                runat="server" Culture="en-US" ShowPopupOnFocus="True" Skin="Outlook" >
                            <Calendar runat="server" UseColumnHeadersAsSelectors="False"
                                UseRowHeadersAsSelectors="False" ViewSelectorText="x" Skin="Outlook">
                            </Calendar>
                            <DateInput runat="server" DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy"
                                BackColor="#CCCCCC" AutoPostBack="True">
                            </DateInput>
                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                            </telerik:RadDatePicker>
                        </td>
                        <td style="width:5%"></td>
                        <td style="width:30%">End:<telerik:RadDatePicker ID="endRadDatePicker"
                                runat="server" ShowPopupOnFocus="True" Skin="Outlook" AutoPostBack="True"
                                onselecteddatechanged="endRadDatePicker_SelectedDateChanged">
                                <Calendar runat="server" Skin="Outlook" UseColumnHeadersAsSelectors="False"
                                    UseRowHeadersAsSelectors="False" ViewSelectorText="x">
                                </Calendar>
                                <DateInput runat="server" BackColor="#CCCCCC" DateFormat="M/d/yyyy"
                                    DisplayDateFormat="M/d/yyyy" AutoPostBack="True">
                                </DateInput>
                                <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                </telerik:RadDatePicker>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div><br /><br />
    <div>
        <asp:UpdatePanel ID="gridViewUpdatePanel" runat="server">
            <ContentTemplate>
                <telerik:RadGrid ID="doctorRadGrid" runat="server" Skin="Simple"
                    EnableHeaderContextMenu="True"
                    onneeddatasource="doctorRadGrid_NeedDataSource"
                    onrowdrop="doctorRadGrid_RowDrop">
                    <ClientSettings AllowRowsDragDrop="True">
                    </ClientSettings>
                    <MasterTableView DataKeyNames="doctorId" TableLayout="Fixed">
                        <Columns>
                            <telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false" />
                        </Columns>
                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                            <HeaderStyle Width="20px" />
                        </RowIndicatorColumn>
                    </MasterTableView>
                    <ClientSettings AllowRowsDragDrop="true">
                        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                        <ClientEvents OnRowDropping="onRowDropping" />
                    </ClientSettings>
                </telerik:RadGrid>
                <p>
                    <telerik:RadGrid ID="scheduleRadGrid" runat="server" CellSpacing="0"
                        GridLines="None" onneeddatasource="scheduleRadGrid_NeedDataSource">
                        <MasterTableView>
                            <Columns>
                                <telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false" />
                            </Columns>
                            <NoRecordsTemplate>
                                <div style="height: 30px;">No items to view</div>
                            </NoRecordsTemplate>

                        </MasterTableView>
                        <ClientSettings>
                            <Selecting AllowRowSelect="false" EnableDragToSelectRows="false" />
                            <ClientEvents OnRowDropping="onRowDropping" />
                        </ClientSettings>
                    </telerik:RadGrid>
                </p>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div><br />
 </asp:Content>

//AddSchedule.aspx.cs

protected void endRadDatePicker_SelectedDateChanged(object sender,
    Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
    {
        if (startRadDatePicker.DateInput.Text.Trim() != string.Empty && endRadDatePicker.DateInput.Text.Trim() != string.Empty)
        {
            doctorRadGrid.DataSource = GetDoctorsBySite();
            doctorRadGrid.DataBind();
            scheduleRadGrid.DataSource = CreateDateSchedules();
            scheduleRadGrid.Rebind();
        }
   }
protected IList<DoctorSchedules> PendingSchedules
    {
        get
        {
            try
            {
                object obj = Session["PendingSchedules"];
                if (obj == null)
                {
                    obj = GetDoctorsBySite();
                    if (obj != null)
                    {
                        Session["PendingSchedules"] = obj;
                    }
                    else
                        obj = new List<DoctorSchedules>();
                }
                return (IList<DoctorSchedules>)obj;
            }
            catch
            {
                Session["PendingSchedules"] = null;
            }
            return new List<DoctorSchedules>();
        }

        set { Session["PendingSchedules"] = value; }
    }

    protected IList<DoctorSchedules> Scheduled
    {
        get
        {
            try
            {
                object obj = Session["Scheduled"];

                if (obj == null)
                {
                    Session["Scheduled"] = obj = new List<DoctorSchedules>();
                }

                return (IList<DoctorSchedules>)obj;
            }
            catch
            {
                Session["Scheduled"] = null;
            }

            return new List<DoctorSchedules>();
        }
        set { Session["Scheduled"] = value; }
    }
protected IList<DoctorSchedules> GetDoctorsBySite()
    {
        IList<DoctorSchedules> results = new List<DoctorSchedules>();

        if (serviceDropDownList.SelectedValue != string.Empty)
        {
            DrOnCallDataContext db = new DrOnCallDataContext();
            var query = from doc in db.Doctors
                        join pa in db.PhysicianAssignments on doc.doctorId equals pa.doctorId
                        where pa.serviceId == int.Parse(serviceDropDownList.SelectedValue)
                        select new
                        {
                            doc.doctorId,
                            doc.licenseId,
                            doc.lastName,
                            doc.firstName,
                            doc.middleName
                        };

            foreach (var item in query)
            {
                results.Add(new DoctorSchedules(item.doctorId, item.licenseId, item.lastName, item.firstName, item.middleName));
            }
            return results.ToList();
        }
        else
            return null;
    }

    private static DoctorSchedules GetDoctor(IEnumerable<DoctorSchedules> doctorsToSearchIn, int doctorId)
    {
        foreach(DoctorSchedules ds in doctorsToSearchIn)
        {
            if(ds.DoctorId == doctorId)
            {
                return ds;
            }
        }
        return null;
    }
protected void doctorRadGrid_RowDrop(object sender, GridDragDropEventArgs e)
    {
        if (string.IsNullOrEmpty(e.HtmlElement))
        {
            if (e.DraggedItems[0].OwnerGridID == doctorRadGrid.ClientID)
            {
                // items are drag from doctorRadGrid to scheduleRadGrid
                if ((e.DestDataItem == null && Scheduled.Count == 0) ||
                    e.DestDataItem != null && e.DestDataItem.OwnerGridID == scheduleRadGrid.ClientID)
                {
                    IList<DoctorSchedules> pendingSchedules = PendingSchedules;
                    IList<DoctorSchedules> schedule = Scheduled;
                    int destinationIndex = -1;

                    if (e.DestDataItem != null)
                    {
                        DoctorSchedules doctorSchedules = GetDoctor(schedule, (int)e.DestDataItem.GetDataKeyValue("doctorId"));
                        destinationIndex = (doctorSchedules != null) ? schedule.IndexOf(doctorSchedules) : -1;
                    }

                    foreach (GridDataItem draggedItem in e.DraggedItems)
                    {
                        DoctorSchedules tmpDoctorSchedules = GetDoctor(pendingSchedules, (int)draggedItem.GetDataKeyValue("doctorId"));

                        if (tmpDoctorSchedules != null)
                        {
                            if (destinationIndex > -1)
                            {
                                if (e.DropPosition == GridItemDropPosition.Below)
                                {
                                    destinationIndex += 1;
                                }
                                schedule.Insert(destinationIndex, tmpDoctorSchedules);
                            }
                            else
                            {
                                schedule.Add(tmpDoctorSchedules);
                            }

                            //doctorRadGridView.Remove(tmpDoctorSchedules);
                        }
                    }

                    Scheduled = schedule;
                    scheduleRadGrid.Rebind();
                }
              }
        }
    }
 protected ArrayList CreateDateSchedules()
    {
        ArrayList result = new ArrayList();

        string startDate = startRadDatePicker.SelectedDate.Value.ToShortDateString();
        string endDate = endRadDatePicker.SelectedDate.Value.ToShortDateString();
        TimeSpan dateTimeDifference = new TimeSpan();
        dateTimeDifference = DateTime.Parse(endDate) - DateTime.Parse(startDate);
        int totalDays = dateTimeDifference.Days; //2

        for (int i=0; i<totalDays + 1; i++)
        {
            result.Add(DateTime.Parse(startDate).AddDays(i).ToShortDateString());
        }

        return result;
    }
  protected void doctorRadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        doctorRadGrid.DataSource = PendingSchedules;
    }

    protected void scheduleRadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        scheduleRadGrid.DataSource = Scheduled;
    }
}

//DoctorSchedules.cs 

public

 

 

class DoctorSchedules  

 

 

{

 

   private int _doctorId;

 

 

   private string _licenseId;

 

 

   private string _lastName;

 

 

   private string _firstName;

 

 

   private string _middleName;

 

 

 

public DoctorSchedules(int doctorId, string licenseId, string lastName, string firstName, string

    middleName)

 

{

 

    _doctorId = doctorId;

    _licenseId = licenseId;

    _lastName = lastName;

    _firstName = firstName;

    _middleName = middleName;

}

 

 

public int DoctorId 

{

 

 

 

   get { return _doctorId; }

 

}

 

 

 

public string LicenseId  

{

 

 

 

    get { return _licenseId; }

 

}

 

 

 

public string LastName

 

{

 

    get { return _lastName; }

 

}

 

 

 

public string FirstName

 

{

 

    get { return _firstName; }

 

}

 

 

public string MiddleName 

 

 

{

 

 

 

    get { return _middleName; }

}

 

 

 

}

 

 

[Maria Ilieva]

Hello Han,

The provided code looks correct to me and could not find an obvious reason for the described error. I would suggest you to open a regular support ticket and send us sample runnable example which demonstrates the issue you are facing. Thus we will be able to debug it locally and advise you further.


Regards,

Maria Ilieva
the Telerik team