This is a migrated thread and some comments may be shown as answers.

Drag and Drop from FileExplorer to RadGrid

2 Answers 31 Views
FileExplorer
This is a migrated thread and some comments may be shown as answers.
Brandon
Top achievements
Rank 1
Brandon asked on 11 Apr 2014, 02:56 PM
Is there a way for me to drag and nodes from the file explorer to a radgrid?  I would then handle the event and add a new item to the radgrid based on the current dropped object.

2 Answers, 1 is accepted

Sort by
0
Brandon
Top achievements
Rank 1
answered on 14 Apr 2014, 01:49 PM
#bump
0
Vessy
Telerik team
answered on 16 Apr 2014, 01:54 PM
Hi Brandon,

In order to achieve the desired functionality with the FileExplorer's nested Grid you will need to go through the following steps:
  • Add a handler to the FileExplorer's nested grid's Client-side RowDropping event
    function OnClientLoad(explorer, args) {
        explorer.get_grid().add_rowDropping(grid_onRowDropping);
    }
  • In its event handler access the name and length (size) of the dragged file item and set them as values of two hidden fields on the page. Here you should also made an ajax request in which handler to update the content of the additional grid width these values.
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <asp:HiddenField ID="HiddenField2" runat="server" />
    <script>
        function grid_onRowDropping(grid, args) {
            var dataItem = args.get_draggedItems()[0].get_dataItem();
     
            $get("FileNameField").value = dataItem.Name;
            $get("FileSizeField").value = dataItem.Extension ? dataItem.Length : "";
            $find("RadAjaxManager1").ajaxRequest();
        }
    </script>
  • Add the additional Grid as an updated control of the AjaxManager:
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1" OnAjaxRequest="radAjax_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="externalGrid"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

I am attaching a basic implementation of the described approach to this message. Please, feel free to modify it in order to fit your scenario best. You can also find useful information about RadGrid row dragging in following demo: Grid - Items Drag-and-drop

Regards,
Vessy
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
FileExplorer
Asked by
Brandon
Top achievements
Rank 1
Answers by
Brandon
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or