How to Filter foreignkey in gridPanel

Question

I'm using Ext.NET GridPanel to show a list of projects' tasks in my system and each task has its progress status like Finished, Running, Not started and etc.

Here is part of my gridPanel:

These progress status are records from another table in my database, just like this:

It's related SprintStatus -> SprintStatusID and I'm showing SprintStatusName in my gridPanel.

What I'd like to do is to local filter it by StatusName but the only way I can accomplish this is to set my ext:ListFilter options with its IDs (1, 2, 3, 4) which isn't good because I don't want to show the IDs

Here is the filter

How can I make it show StatusName instead of StatusID?

My gridPanel Code

<ext:GridPanel 
        ID="grdProjects"
        runat="server"
        AutoHeight="true" 
        EnableColumnMove="false" 
        Collapsible="false"
        AnimCollapse="true"
        StripeRows="true" 
        Title="Projetos" >

        <Bin>
            <ext:Store ID="storeStatus" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="StatusID">
                        <Fields>
                            <ext:RecordField Name="StatusID" Type="Int" />
                            <ext:RecordField Name="StatusName" Type="String" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>            
            </ext:Store>

            <ext:Store ID="storeUsers" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="DeveloperID">
                        <Fields>
                            <ext:RecordField Name="DeveloperID" Type="Int" />
                            <ext:RecordField Name="DeveloperName" Type="String" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>            
            </ext:Store>
        </Bin>

        <Store>
            <ext:Store ID="ProjectsStore" runat="server" GroupField="ProjectName">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ProjectName" Type="String" />
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="Name" Type="String" />
                            <ext:RecordField Name="Status" Type="String" />
                            <ext:RecordField Name="Owner" Type="String" />
                            <ext:RecordField Name="Begin" Type="Date" />
                            <ext:RecordField Name="End" Type="Date" />
                            <ext:RecordField Name="RealEnd" Type="Date" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>

        <Listeners>
            <AfterEdit Fn="afterEdit" />
        </Listeners>

        <ColumnModel ID="ColumnModel20" runat="server">
            <Columns>
                <ext:Column ColumnID="SprintProject" Header="Projeto" Align="Left" DataIndex="ProjectName" />
                <ext:Column ColumnID="SprintName" Header="Nome" Align="Left" DataIndex="Name" />



                <ext:Column ColumnID="SprintStatus" Header="Status" Align="Left" DataIndex="Status">
                    <Renderer Handler="return #{storeStatus}.getById(value).data.StatusName;" />                
                    <Editor>
                        <ext:SelectBox
                            ID="selStatus"
                            StoreID="storeStatus"
                            runat="server" 
                            DisplayField="StatusName"
                            ValueField="StatusID"
                            EmptyText="Selecione um status" />
                    </Editor>
                </ext:Column>



                <ext:Column ColumnID="SprintOwner" Header="Recurso" Align="Left" DataIndex="Owner">
                    <Renderer Handler="return #{storeUsers}.getById(value).data.DeveloperName;" />
                    <Editor>
                        <ext:SelectBox
                            ID="selDevelopers"
                            StoreID="storeUsers"
                            runat="server" 
                            DisplayField="DeveloperName"
                            ValueField="DeveloperID"
                            EmptyText="Selecione um recurso" />
                    </Editor>
                </ext:Column>



                <ext:DateColumn ColumnID="SprintBegin" Header="Data de início" Align="Center" DataIndex="Begin"  Format="dd/MM/yyyy">
                    <Editor>
                        <ext:DateField Format="dd/MM/yyyy" runat="server" />
                    </Editor>
                </ext:DateColumn>



                <ext:DateColumn ColumnID="SprintEnd" Header="Previsão de término" Align="Center" DataIndex="End" Format="dd/MM/yyyy">
                    <Editor>
                        <ext:DateField Format="dd/MM/yyyy" runat="server" />
                    </Editor>
                </ext:DateColumn>



                <ext:DateColumn ColumnID="SprintRealEnd" Header="Data de término" Align="Center" DataIndex="RealEnd" Format="dd/MM/yyyy">
                    <Editor>
                        <ext:DateField Format="dd/MM/yyyy" runat="server" />
                    </Editor>
                </ext:DateColumn>



            </Columns>
        </ColumnModel>

        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>

        <View>
            <ext:GroupingView   SplitHandleWidth="10" 
                                runat="server"
                                ForceFit="true"
                                MarkDirty="false"
                                ShowGroupName="false"
                                EnableNoGroups="true"
                                HideGroupedColumn="true" ID="ctl222">



            </ext:GroupingView>




        </View>

        <Plugins>
            <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
                <Filters>

                    <ext:ListFilter DataIndex="Status"  Options="1,2,3,4">
                        <Listeners>
                            <Activate Buffer="250" Fn="filtraNaoConcluido" />
                        </Listeners>
                    </ext:ListFilter>

                </Filters>
            </ext:GridFilters>
        </Plugins>

</ext:GridPanel>

Answer 1

Here's an approach using a Store to supply the options for the ListFilter.

BUT... there is a problem with this sample. The filters are not actually apply properly. I have to do some more research.

I'll be back and edit this post once I figure out what exactly is going wrong.

I'll also try to figure out if you can set a name:value pair using only the .Options property.

Edit: Sample has been updated.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!X.IsAjaxRequest)
       {
           var companies = new[] { 
               new { ID = 1, Name = "Company A", Size = 3 },
               new { ID = 2, Name = "Company B", Size = 1 },
               new { ID = 3, Name = "Company C", Size = 5 },
               new { ID = 4, Name = "Company D", Size = 3 },
               new { ID = 5, Name = "Company E", Size = 4 },
           };

           this.Store1.DataSource = companies;
           this.Store1.DataBind();


           var sizes = new [] { 
               new { Name = "Extra Small", ID = 1  },
               new { Name = "Small",       ID = 2  },
               new { Name = "Medium",      ID = 3  },
               new { Name = "Large",       ID = 4  },
               new { Name = "Extra Large", ID = 5  }
           };

           this.Store2.DataSource = sizes;
           this.Store2.DataBind();
       }
   }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
   <title>Ext.NET Examples</title>

   <ext:ResourcePlaceHolder runat="server" />

   <script type="text/javascript">
       var myValidateRecord = function (record) {            
           var filterValue = this.getValue(),
               item;

           if (filterValue.length == 0) {
               return true;
           }

           item = this.store.query("ID", record.data.Size).first();

           return item ? filterValue.indexOf(item.data.Name) != -1 : false;
       }
   </script>
</head>
<body>
   <ext:ResourceManager runat="server" />

   <ext:GridPanel 
       runat="server" 
       Title="Example" 
       Width="350" 
       Height="215"
       AutoExpandColumn="Name">
       <Store>
           <ext:Store ID="Store1" runat="server">
               <Reader>
                   <ext:JsonReader IDProperty="ID">
                       <Fields>
                           <ext:RecordField Name="ID" Type="Int" />
                           <ext:RecordField Name="Name" />
                           <ext:RecordField Name="Size" Type="Int" />
                       </Fields>
                   </ext:JsonReader>
               </Reader>
           </ext:Store>
       </Store>
       <Bin>
           <ext:Store ID="Store2" runat="server">
               <Reader>
                   <ext:JsonReader IDProperty="ID">
                       <Fields>
                           <ext:RecordField Name="ID" Type="Int" />
                           <ext:RecordField Name="Name" />
                       </Fields>
                   </ext:JsonReader>
               </Reader>
           </ext:Store>
       </Bin>
       <ColumnModel runat="server">
           <Columns>
               <ext:Column Header="ID" DataIndex="ID" />
               <ext:Column Header="Name" DataIndex="Name" />
               <ext:Column Header="Size" DataIndex="Size">
                   <Renderer Handler="return Store2.getById(value).data.Name" />
               </ext:Column>
           </Columns>
       </ColumnModel>
       <Plugins>
           <ext:GridFilters runat="server" Local="true">
               <Filters>
                   <ext:NumericFilter DataIndex="ID" />
                   <ext:StringFilter DataIndex="Company" />
                   <ext:ListFilter DataIndex="Size" StoreID="Store2" LabelField="Name">
                       <ValidateRecord Fn="myValidateRecord" />
                   </ext:ListFilter>
               </Filters>
           </ext:GridFilters>
       </Plugins>
   </ext:GridPanel>
</body>
</html>