How to show one-to-many related columns in a GridPanel after Editing it?

Question

Situation Overview

I'm using Ext.NET GridPanel to display a list of projects which has tasks (i call it Sprints) inside it assigned to some user and a status. So I get this kind of relation:

SprintOwner -> UserID
SprintStatus -> SprintStatusID

In my GridPanel I display my sprints grouped by projects and I use the relationships to show their names instead of their IDs (SprintStatusName and UserName). It's in portuguese but I find it useful to show:

In this order I have Name, Status and the SprintOwner and I can edit it all.

The problem

In Status and SprintOwner I have a comboBox which value is associated with IDs. Once I edit it, the grid updates my database and render the data again, but instead of showing the names, it shows the value (IDs) like this:

How can I make it show their names again?

Hence my Page_Load method

Dim db As New ProjectManagerDataContext

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        ' Retorna as sprints do banco de dados
        ProjectsStore.DataSource = From sp In db.Sprints _
                            Select New With { _
                                .ID = sp.SprintID, _
                                .Name = sp.SprintName, _
                                .ProjectName = "[" & sp.Project.ProjectGroup1.ProjectGroupName & "] " & sp.Project.ProjectName, _
                                .Status = sp.SprintStatus1.SprintStatusName, _
                                .Owner = sp.User.UserName, _
                                .BeginDate = sp.SprintBegin, _
                                .EndDate = sp.SprintEnd, _
                                .RealEnd = sp.SprintRealEnd}
        ProjectsStore.DataBind()

        Store2.DataSource = From ss In db.SprintStatus _
                            Select New With { _
                                .StatusID = ss.SprintStatusID, _
                                .StatusName = ss.SprintStatusName}
        Store2.DataBind()

        Store3.DataSource = (From u In db.Users _
                             Select New With { _
                                .DeveloperName = u.UserName, _
                                .DeveloperID = u.UserID})
        Store3.DataBind()


    End If

End Sub

[EDITED]

And my .asp:

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

        <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">
                    <Editor>
                        <ext:SelectBox
                            ID="selStatus"
                            runat="server" 
                            DisplayField="StatusName"
                            ValueField="StatusID"
                            EmptyText="Selecione um status">

                            <Store>
                                <ext:Store ID="Store2" 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>
                            </Store>   
                        </ext:SelectBox>
                    </Editor>
                </ext:Column>



                <ext:Column ColumnID="SprintOwner" Header="Recurso" Align="Left" DataIndex="Owner">
                    <Editor>
                        <ext:SelectBox
                            ID="selDevelopers"
                            runat="server" 
                            DisplayField="DeveloperName"
                            ValueField="DeveloperID"
                            EmptyText="Selecione um recurso">

                            <Store>
                                <ext:Store ID="Store3" 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>
                            </Store>   
                        </ext:SelectBox>
                    </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>

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

</ext:GridPanel>

Answer 1

I'd have to see how you Store Reader and GridPanel Columns are configured to determine exactly what is going wrong. The following sample should be helpful at it demonstrates a similar scenario and can be used to troubleshoot your code.

Example

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

<%@ Import Namespace="System.Collections.Generic" %>

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        // Owners

        var owners = new List<Person>();

        var billy = new Person
        {
            ID = 1,
            Name = "Billy"
        };

        var frank = new Person 
        {
                ID = 2,
                Name = "Frank"
        };

        var jane = new Person
        {
            ID = 3,
            Name = "Jane"
        };

        owners.AddRange(new Person[] { billy, frank, jane });

        this.strOwners.DataSource = owners;
        this.strOwners.DataBind();


        // Projects

        var projects = new List<Project>();

        projects.AddRange(new Project[] { 
            new Project { 
                ID = 1,
                Name = "Project A",
                Owner = billy
            },
            new Project {
                ID = 2,
                Name = "Project B",
                Owner = frank
            },
            new Project {
                ID = 3,
                Name = "Project C",
                Owner = jane
            }
        });

        this.strProjects.DataSource = projects;
        this.strProjects.DataBind();
    }

    public class Project
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public Person Owner { get; set; }
    }

    public class Person
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" />

    <ext:GridPanel 
        runat="server" 
        Title="Example" 
        Height="350" 
        Width="500"
        AutoExpandColumn="Owner">
        <Bin>
            <ext:Store ID="strOwners" 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>
        <Store>
            <ext:Store ID="strProjects" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="OwnerID" ServerMapping="Owner.ID" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="ID" DataIndex="ID" />
                <ext:Column Header="Name" DataIndex="Name" />
                <ext:Column ColumnID="Owner" Header="Owner" DataIndex="OwnerID">
                    <Renderer Handler="return strOwners.getById(value).data.Name;" />
                    <Editor>
                        <ext:ComboBox 
                            runat="server" 
                            StoreID="strOwners"
                            DisplayField="Name"
                            ValueField="ID"
                            />
                    </Editor>
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
</form>
</body>
</html>

Hope this helps.