My requirement is like I have a hierarchical xamdatagrid and I want a border for each parent row with its child rows

and each of the parent rows should have some blank spacing in between . I have attached the image for reference.  I also want to allow drag and drop functionality between the rows.  Please let me know how can I achieve this 

I have attached my code

Hello Richa,

Thank you for the sample application you have provided.

I have attached a modified version of your sample by including the changes from my sample, so both the parent and its children have a border around them. You can use the UseNestedPanels property by setting it to True. This will render the child records as actual visual children (in a nested panel) of the parent DataRecordPresenter.

Please note when using the MetroDark theme, some further manipulations and logic should be done since the theme itself introduces lots of display and layout behaviors. In this case I can suggest you use the default styles of the control for the MetroDark theme and after retemplating the elements accordingly, you can include the theme files in your application.

I have attached a sample application that demonstrates the approach from above.
If you have any questions, please let me know.

Thia solution works well, thanks for all the help

Hello Richa,

Thank you for your feedback.

I am glad to know that I was able to help you achieve the functionality you were looking for. I believe this thread can help other people looking for a similar solution.

Thank you for using Infragistics components.

Hi,

I need 1 more favor . Since my code is in MVVM framework, so can you please suggest how can I use ths code in MVVM, as below lines of code in xaml.cs file is violating the MVVM famework:

private void grdElementCollection_RecordExpanded(object sender, Infragistics.Windows.DataPresenter.Events.RecordExpandedEventArgs e)
{
var drp = DataRecordPresenter.FromRecord(e.Record) as DataRecordPresenter;
var nestedSite = Utilities.GetDescendantFromName(drp, "PART_NestedContentSite") as Border;
if (nestedSite != null)
{
nestedSite.BorderThickness = new Thickness(1, 0, 1, 1);
nestedSite.BorderBrush = Brushes.Red;
}
}

Hello Richa,

In order to avoid using code-behind when applying the border around the child panel, I can suggest you create a ResourceDictionary that contains all the styles that are related to the Border and Margin manipulations. This way by including the dictionary inside the App.xaml, we can apply all the necessary settings at application level.

// Border around child panel (MyDictionary.xaml)

<Style TargetType="Border">
    <Style.Triggers>
        <Trigger Property="Name" Value="PART_NestedContentSite">
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="1,0,1,1" />
        </Trigger>
    </Style.Triggers>
</Style>

<Application.Resources>        
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="MyDictionary.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>        
</Application.Resources>

Another approach I can suggest you is to get the default style of the respective elements (DataRecordPresenter, DataRecordCellArea, etc.) and manually modify them according to the desired functionality.

I have attached a sample application that demonstrates the initial approach from above. (I have commented some methods from the original code you have provided in order to build the application successfully, you can manually revert these changes.)

If you have any questions, please let me know.