How to load drag and drop RadGridView files? (Using MVVM)

[Psyduck]

Hello.

I want to load a desktop files in grid view using MVVM. Is there a way? (I'm not use MVVM Light kit.)

It is easy to add and remove files by using buttons, but Drag and Drop is difficult to implement because there are not many examples.

I want to add it using the file model using drag and drop and add it to the column by customizing it.

See the image for details.

 

<This is a simple .xaml>

<telerik:RadGridView ItemsSource  ="{Binding MultiFiles}"
                                     rad:GridViewSelectionUtilities.SelectedItems = "{Binding MultiFileItems}"
                                     GroupRenderMode ="Flat"
                                     HorizontalAlignment="Stretch"
                                     AutoGenerateColumns="False"
                                     ShowColumnHeaders="True"
                                     ShowGroupFooters="False"
                                     ShowGroupPanel="False"
                                     RowIndicatorVisibility="Collapsed"
                                     EnableColumnVirtualization="True"
                                     EnableRowVirtualization="True"
                                     VirtualizingPanel.IsVirtualizing="True"
                                     ScrollViewer.HorizontalScrollBarVisibility ="Auto"
                                     ScrollViewer.VerticalScrollBarVisibility ="Auto"
                                     FrozenColumnsSplitterVisibility="Collapsed"
                                     IsFilteringAllowed="False"
                                     AutoExpandGroups="False"
                                     ShowSearchPanel="False"
                                     SearchPanelCloseButtonVisibility="Collapsed"
                                     SelectionMode="Extended"
                                     SelectionUnit="FullRow"
                                     >
                    <telerik:RadGridView.Resources>
                        <Style x:Key="CheckboxCellStyle" TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
                            <Setter Property="HorizontalContentAlignment" Value="Center"/>
                        </Style>
                    </telerik:RadGridView.Resources>

                    <telerik:RadGridView.Columns>
                        <telerik:GridViewSelectColumn />
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
                                                    ToolTip="{Binding Name}"
                                                    IsReadOnly="True"
                                                    Width="300"
                                                    Header="File Name"/>
                        <telerik:GridViewComboBoxColumn ItemsSourceBinding ="{Binding WorkTypes}"
                                                        DataMemberBinding="{Binding WorkType}"
                                                        DisplayMemberPath="Name"
                                                        SelectedValueMemberPath="Name"
                                                        IsReadOnly="False"
                                                        Width="80"
                                                        Header="WorkType"
                                                       >

                        </telerik:GridViewComboBoxColumn>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Status}"
                                                    ToolTip="{Binding Status}"
                                                    IsReadOnly="True"
                                                    Width="60"
                                                    Header="Status"/>

                        <telerik:GridViewDataColumn DataMemberBinding="{Binding EtcText}"
                                                    ToolTip="{Binding EtcText}"
                                                    IsReadOnly="True"
                                                    Width="auto"
                                                    Header="ETC"/>
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>

 

<Model>

public class MultiFileModel
{
    public string Name      { get; set; } = string.Empty;
    public string WorkTypes { get; set; } = string.Empty;
    public string Status    { get; set; } = $"X";
    public string EtcText   { get; set; } = string.Empty;
}

 

<ViewModel>

?

 

Thanks.

[Martin Ivanov]

Hello KIM,

RadGridView doesn't have this functionality and also there is no example that demonstrates exactly this requirement. However, you can achieve your requirement using a custom drag/drop implementation. Basically, you can use the DragDropManager's events to indicate a drop action inside the RadGridView control. Then, you can  get the dropped file paths and based on this information create MultiFileModel instance and add it in the ItemsSource. For example:

DragDropManager.AddDropHandler(this.gridView, OnGridViewDrop);
//-----------------------------
private void OnGridViewDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
{
	var dataObject = (DataObject)e.Data;
	StringCollection files = dataObject.GetFileDropList();
	// based on the files, collection, use the System.IO API to get information about the file
	// then, create a new instance of the StringCollection class and add it in the RadGridView's ItemsSource
}

You can also check the following two articles for more drag/drop customizations in RadGridView:

• Drag and Drop within RadGridView
• Drag-drop between GridView and TreeView

Regards,
Martin Ivanov
Progress Telerik