wpf - Sort DataGrid by Combobox displayed value -

i have 2 datagrids parent child relationship, , both bounded data collections. child datagrid implements datagridcomboboxcolumn displaying parent's name instead of id.

problem: how sort second datagrid column, parent's name, not id?

xaml:

<window x:class="wpfapplication1.mainwindow"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:local="clr-namespace:wpfapplication1"     x:name="mainwnd"     title="mainwindow" height="500" width="650" loaded="mainwindow_onloaded"> <grid>     <grid.rowdefinitions>         <rowdefinition height="*"/>         <rowdefinition height="auto"/>         <rowdefinition height="2*"/>     </grid.rowdefinitions>      <gridsplitter grid.row="1" verticalalignment="center" horizontalalignment="stretch" height="5"/>      <local:basegrid grid.row="0" margin="3" autogeneratecolumns="false"                     itemssource="{binding elementname=mainwnd, path=acolview.view}">         <datagrid.columns>             <datagridtextcolumn header="id" binding="{binding path=id}"/>             <datagridtextcolumn header="name" binding="{binding path=aname}"/>         </datagrid.columns>     </local:basegrid>      <local:basegrid grid.row="2" margin="3" autogeneratecolumns="false"                     itemssource="{binding elementname=mainwnd, path=bcolview.view}">         <datagrid.columns>             <datagridtextcolumn binding="{binding path=id}">                 <datagridtextcolumn.header>                     <local:captionextender caption="id"/>                 </datagridtextcolumn.header>             </datagridtextcolumn>             <datagridtextcolumn binding="{binding path=bname}">                 <datagridtextcolumn.header>                     <local:captionextender caption="name"/>                 </datagridtextcolumn.header>             </datagridtextcolumn>             <datagridcomboboxcolumn x:name="bparentcolumn"                                     selectedvaluebinding="{binding parentid}"                                     selectedvaluepath="id"                                     displaymemberpath="aname">                 <datagridcomboboxcolumn.header>                     <local:captionextender caption="parent"/>                 </datagridcomboboxcolumn.header>             </datagridcomboboxcolumn>          </datagrid.columns>     </local:basegrid> </grid> </window> 

code behind:

public partial class mainwindow {     private observablecollection<a> acol { get; set; }     private observablecollection<b> bcol { get; set; }      public collectionviewsource acolview { get; private set; }     public collectionviewsource bcolview { get; private set; }      public mainwindow()     {         acol = new observablecollection<a>();         bcol = new observablecollection<b>();          acolview = new collectionviewsource { source = acol };         bcolview = new collectionviewsource { source = bcol };          initializecomponent();          bparentcolumn.itemssource = acol;      }      private void mainwindow_onloaded(object sender, routedeventargs e)     {         // add parents         (int = 1; <= 5; ++i)             acol.add(new { id = i, aname = "parent " + i.tostring(cultureinfo.invariantculture) });          // add children         (int = 1; <= 1000; ++i)             bcol.add(new b { id = i, bname = "child " + i.tostring(cultureinfo.invariantculture), parentid = (i % acol.count) + 1 });     } }  public class {     public int id { get; set; }     public string aname { get; set; } }  public class b {     public int id { get; set; }     public int parentid { get; set; }     public string bname { get; set; } } 

here entire solution

this want achieve: