Drag/Drop with Tabs

[digitall]

I have the RadTabStrip control setup with 5 tabs and inside each tab is a RadGrid. The tabs indicate a status for the items in the grid and it's the same user control in all 5 places. I'm trying to find a way to use the grid's drag/drop feature to drag a row item to a tab which would allow me to capture it, change the status of the item and rebind the source grid where the item came from (effectively removing it from this list). The MultiPage and Tab controls are setup using a RadAjaxManager so it's 100% callbacks with no postbacks.

Is this possible with Q2 2009?

[digitall]

Well, I'm getting closer with it but running into a confusing issue. I subscribed to the event when a tab is hovered over and set two variables equal to their text/value. I have also subscribed to the OnRowDropping (and Dropped - same effect) client events on the grid. Here's the JS:

            var selectedTabText = '';
            var selectedTabValue = '';

            function setHoveredTab(sender, args) {
                selectedTabText = args.get_tab().get_text();
                selectedTabValue = args.get_tab().get_value();
                //alert(selectedTab);
            }

            function onRowDropping(sender, args) {
                if (selectedTabValue == null) {
                    args.set_cancel(true);
                } else {
                    if (confirm('Are you sure you wish to change the status on this ticket to ' + selectedTabText + '?'))
                    {
                        args.set_destinationHtmlElement(selectedTabValue);
                        alert(args.get_destinationHtmlElement());
                    }
                }
            }

When I get to the alert(args.get_DestinationHtmlElement()) it gives me an alert with the value I expect based on the tab I am hovered over. When it gets to the code-behind though, e.HtmlElement is always "undefined" despite the alert showing me that it was fine.

Suggestions?

[digitall]

Anyone?

[Tsvetoslav]

Hi Scott,

In order to achieve this scenario, you need to:
 
1. Wire up an event handler to the OnRowDropping event of the grid from which you are dragging the items.

2. Attach an event handler to the onmouseup event of the RadTab where the second grid resides:

<telerik:RadTab PageViewID="PageView2" Text="Second Grid" runat="server" onmouseup="onMouseUp()">
</telerik:RadTab>

3. In the onMouseUp client method set a flag, indicating that the the mouse up event has occurred over the tab in question.

var mouseUpOverTabe = false;
function onMouseUp()
{
    mouseUpOverTabe = true;
}

4. After the mouse-up event, the OnRowDropping event of the grid will be called. In it, check for the above-specified flag and if it has been set, trigger an ajaxRequest  passing to the server-side handler the needed information to perform the database operations. The usual approach will be to pass the data key value of the item being dropped:

function onRowDropping(sender, args)
{
    if (mouseUpOverTabe)
    {
        $find('<%=RadAjaxManager1.ClientID%>').ajaxRequest(args.get_draggedItems()[0].getDataKeyValue('ProductID'));
    }
    mouseUpOverTabe = false;
    args.set_cancel(true);
}

(ProductID is included in the ClientDataKeyValues collection of the first grid).

5. On the server in the OnAjaxRequest event handler, get the data key in the command arguments object, delete the record from the data source of the first grid, add it to the data source of the second grid and after all that select the second tab.

I hope this helps.

All the best,
Tsvetoslav
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.

[digitall]

Unfortunately I'm still not having any luck with this. I tried a hybrid of your method (the mouse over tab piece didn't get me the selected tab since there are multiple tabs) but using args.get_draggedItems()[0].getDataKeyValue('Id') is returning null. I verified that args.get_draggedItems() had something (length of one, as expected) but the data key isn't there. I rechecked the datasource to ensure Id was being returned (it is) and it is also setup in the grid as a DataKeyName under MasterTableView so I'm definitely at a loss.

I tried looking at the API reference for everything get_draggedItems() contained but wasn't really finding anything at all. I even tried setting a hidden field with the value but it's also empty on postback, despite the alert showing what was there.

It seems like this would be a pretty easy scenario to accomplish so I've got to be missing something easy. Any other suggestions?

[digitall]

Well, I finally made it work! Minus one issue. For those wondering, here is what I did:

function onRowDropping(sender, args) {
                    if (selectedTabValue != null) {
                        if (confirm('Are you sure you wish to change the status on this ticket to ' + selectedTabText + '?')) {
                            //alert(args.get_draggedItems()[0].get_cell('Id').innerHTML);
                            args.set_cancel(true);
                            $find('<%=RadAjaxManager1.ClientID %>').ajaxRequest(selectedTabValue + '|' + args.get_draggedItems()[0].get_cell('Id').innerHTML);
                        }
                    }
                }

That gives me the selected tab to use and the Id of the element in question to reassign and it works like a charm. This only worked in this case because I show the Id column - that's acceptable since it is a ticketing system, but ordinarily I would much prefer not to have to do something like that. The one part that doesn't work is rebinding. I watch the code step through the rebinding process, but it doesn't seem to take effect (even though NeedDataSource fires and gets the correct data). My assumption here is something with the AjaxManager is not telling the grid to refresh, but I'm not entirely certain why. Here is the AJAX markup:

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radTabs" />
                    <telerik:AjaxUpdatedControl ControlID="radTickets" LoadingPanelID="GridLoader" />
                </UpdatedControls>
            </telerik:AjaxSetting>

Minus the AjaxControlID, this is the exact same UpdatedControls section as a button on the page uses and it works great with rebinding the grid. With the button click it runs a method that processes the filtering options on the page and fires an event that the user control under the tab is subscribed to to refresh. All I did was copy the two method calls from the button handler to the method used for reassigning the ticket but the grid doesn't refresh itself. Thoughts?

[digitall]

Anyone?

[Tsvetoslav]

Hi Scott,

Concerning the first issue - there is no problem to detect on which tab the mouseup (not mouseover) event has occurred. You can either inspect the srcElement of the event javascript object (e.g. you can use the innerHTML within the tab - it will give you the tab's title and you will be able to see which one has been the source of the event); or you can attach separate event handlers for each tab.

As for the ajax problem, try ajaxifying the MutliPageView control.

I hope this helps.

Regards,
Tsvetoslav
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.

[Scott Salyer]

The multipage control is AJAXified:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radTabs" /> <!-- Tab Control -->
                    <telerik:AjaxUpdatedControl ControlID="radTickets" LoadingPanelID="GridLoader" /> <!-- MultiPage Control -->
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="radTabs">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radTickets" LoadingPanelID="GridLoader" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="cmApply">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radTabs" />
                    <telerik:AjaxUpdatedControl ControlID="radTickets" LoadingPanelID="GridLoader" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

That's where I'm confused. The "cmApply" is a button on the page and it has the same updated controls and works fine. The AjaxManager doesn't though.

[digitall]

The above response is still me - I was logged into my work account with you all and not my personal one.

[Tsvetoslav]

Hello digitall,

Please, take a look at the attached sample - it should contain enough directions on how to implement your scenario.

Regards,
Tsvetoslav
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.

[digitall]

Unfortunately I couldn't get your sample to work as I don't have SQL Express installed. I tried playing around with the code your sample had, but using this line didn't work for me:

var dataKey = args.get_draggedItems()[0].getDataKeyValue("Id");

The grid is setup with a data key called "Id" and I use it behind the scenes to know what entry I'm on so that's definitely configured correctly. Interestingly enough, if I don't use the AjaxManager to make the call to the server for processing the loading grid flashes for half a second (but nothing happens since the request wasn't sent, as expected). As soon as I add in the call to the AjaxManager the grid doesn't show a loading panel but the code does seem to work.

I'll open a support ticket under my work account for this so I can send you the project. I'd rather not post it here for obvious reasons.

[Tsvetoslav]

Hello digitall,

Thanks for having decided to open up a support ticket and send the project. We shall be awaiting it.

Greetings,
Tsvetoslav
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.