Grid Postback Issue

[Ryan]

Hi all,

I am having an issue with the RadGrid and it is concerned with postbacks. Basically what I have is two Grids and a Scheduler in a RadAjaxPanel, and the user can drag rows from either Grid onto the Scheduler, or from one Grid to another. This all happens asynchronously of course. I am handling the OnRowDragStarted and OnRowDropping client side events in order to get and set variables regarding what data item is being moved around. In the client-side rowDropping function after getting the variables I need from the page I am calling __doPostBack() setting the appropriate control as the eventTarget, and passing the data in the eventArgument.

My problem is that the RadGrids always fire a postback even though I am not specifying any server-side event handlers other than OnItemDataBound, and these postbacks happen immediately after my __doPostBack() call and thus cancels it out. I can see this happening in FireBug whereby my explicit post is sent at the same time as the Grid's automatic post.

I am stuck as to how to get my __doPostBack() to actually work and not be overridden by the Grid's built in postback. Anyone have any ideas?

Here's some code:

First Grid:

<telerik:RadGrid ID="tripsGrid" runat="server" AutoGenerateColumns="false"
    onitemdatabound="tripsGrid_ItemDataBound">
<ClientSettings AllowRowsDragDrop="true">
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowDragStarted="rowDragging" OnRowDropping="rowDropping" />
</ClientSettings>
<MasterTableView DataKeyNames="ID,TripID,TripType" InsertItemDisplay="Bottom" EditMode="PopUp">
    <SortExpressions>
        <telerik:GridSortExpression FieldName="Timing" SortOrder="Ascending" />
    </SortExpressions>
    <Columns>
        ... columns removed ...
    </Columns>
</MasterTableView>
</telerik:RadGrid>

Second Grid:

<telerik:RadGrid ID="taxiGrid" runat="server" AutoGenerateColumns="false"
    onitemdatabound="taxiGrid_ItemDataBound">
<ClientSettings AllowRowsDragDrop="true">
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowDragStarted="rowDragging" OnRowDropping="rowDropping" />
</ClientSettings>
<MasterTableView DataKeyNames="ID,TripID,TripType" InsertItemDisplay="Bottom" EditMode="PopUp">
    <SortExpressions>
        <telerik:GridSortExpression FieldName="Timing" SortOrder="Ascending" />
    </SortExpressions>
    <Columns>
        ... columns removed ...
    </Columns>
</MasterTableView>
</telerik:RadGrid>

Javascript:

// Fires when row dragging commences (onmousedown)
function rowDragging(sender, eventArgs)
{
    var rowIndex = eventArgs.get_itemIndexHierarchical();
    var sourceGrid = sender;

    var row = sourceGrid.Control.children[0].rows[parseInt(rowIndex) + 1];
    var rowElements = row.getElementsByTagName("input");

    // Store the dragged trip ID and type in hidden fields
    $get("DraggedTripID").value = rowElements[0].value;
    $get("DraggedTripType").value = rowElements[1].value;

    var rowIndexWithHeader = parseInt(rowIndex) + 1;
    console.log("Trip ID: " + rowElements[0].value + ", Type: " + rowElements[1].value + ", Row index: " + rowIndexWithHeader);
}

// Fired when the user drops a grid row (onmouseup)
function rowDropping(sender, eventArgs)
{
    var id = $get("DraggedTripID").value;
    var type = $get("DraggedTripType").value;
    var sourceElement;
    var targetElement;

    // Get the grid trip came from
    if (sender.ClientID == "<%= tripsGrid.ClientID %>") {
        sourceElement = "UnallocatedTrips";
    }
    else if (sender.ClientID == "<%= taxiGrid.ClientID %>") {
        sourceElement = "TaxiTrips";
    }
    else {
        eventArgs.set_cancel(true);
        return;
    }

    // Get the target element row was dropped on
    var htmlElement = eventArgs.get_destinationHtmlElement();

    if (isPartOfSchedulerAppointmentArea(htmlElement))  // Row dropped over the scheduler - find time slot and save its index in hidden field
    {
        targetElement = "Scheduler";

        var scheduler = $find("<%= tripScheduler.ClientID %>");
        var timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(htmlElement);
        $get("TargetSlotHiddenField").value = timeSlot.get_index();

        eventArgs.set_destinationHtmlElement("TargetSlotHiddenField"); // HTML needs to be set for postback to execute normally
    }
    else if (isPartOfTaxiTripsArea(htmlElement)) // Row dropped over the taxi grid
    {
        targetElement = "TaxiTrips";

        $get("TargetSlotHiddenField").value = "taxi";
        eventArgs.set_destinationHtmlElement("TargetSlotHiddenField");
    }
    else if (isPartOfUnscheduledTripsArea(htmlElement)) // Row dropped over unscheduled trips grid
    {
        targetElement = "UnallocatedTrips";

        $get("TargetSlotHiddenField").value = "taxi";
        eventArgs.set_destinationHtmlElement("TargetSlotHiddenField");
    }
    else
    {
        eventArgs.set_cancel(true); // The node was dropped in an irrelevant region - cancel the drop
    }

    // Submit the change
    submitTripChange(id, type, sourceElement, targetElement);
}

// Submit a trip change via asyncronous postback
function submitTripChange(tripId, tripType, source, target)
{
    if (source == target)
        return;

    // Set the event target - which control initiated the operation
    var eventTarget;
    if (source == "UnallocatedTrips")
        eventTarget = "<%= tripsGrid.UniqueID %>";
    else if (source == "TaxiTrips")
        eventTarget = "<%= taxiGrid.UniqueID %>";
    else
        return;

    // Set the event argument to contain parameters for modifying the trip
    var eventArgument = "TripMoved|" + tripId + "," + tripType + "," + source + "," + target;

    // Trigger the postback (asyncronous as long as eventTarget is an AJAXified control)
    __doPostBack(eventTarget, eventArgument);
}

[Iana Tsolova]

Hi Ryan,

When you drop a row which is dragged from RadGrid the OnRowDrop sever-side event is fired. Therefore I suggest that you handle it instead of firing your own postback. You can find more information on the arguments available in this event in the below articles:

http://www.telerik.com/help/aspnet-ajax/drag-drop-grid-items.html
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx

Greetings,
Iana
the Telerik team

[Ryan]

Hi Iana, thanks for the reply.

My main concern was the fact that I have two Grids and a Scheduler interacting on this page, and thus a variety of combinations possible for dragging and dropping between different controls. I had considered handling the OnRowDrop server-side for each control, but I would need to implement one for each grid and it seemed a little fragmented when I went down that path.

With my current solution, I can do all the processing in the page's RaisePostBackEvent() handler which gets all the info it needs from the event argument, and it seems like a simpler, less fragmented way of handling the situation.

Just so you know, I resolved this problem by calling eventArgs.set_cancel(true) in the javascript onRowDropping handler, which prevents the grid's postback and allows my custom postback to occur uninterrupted. Sweet!

[Iana Tsolova]

Hello Ryan,

Indeed, in case you want to cancel the default behavior, the OnRowDropping event is the right place.
I am glad to know you were able to find a suitable resolution for your case. Sharing it might hep other community members as well.

All the best,
Iana
the Telerik team

[Richard]

When I cancel the operation in the onRowDropping event by issue the following: args.set_cancel(true), it prevents the entire drop operation from firing. I need a way to drag and drop rows that will allow me to handle the onRowDropped event on the client without posting back to the server. What if you wanted to recalculate figures on the client and defer saving the information until the user clicks the Save button? Any help is greatly appreciated.

[Angel Petrov]

Hi Richard,

As I have already replied in this forum post you can cancel the postback by subscribing to the OnCommand client-side event. Please use only one thread for posting your questions thus we will be able to track the issue more easily and provide better support.

Regards,
Angel Petrov
Telerik