Ext.net: How to set combobox for change foreign key field and save by AutoAsync()?

Question

I have some problem with GridPanel. Column Brigade in table Request is a foreign key. How to show combobox for change this field? This code shown combobox, but value don't set to field in GridPanel. When I try to change some field AutoAsync() get an Exception - status code 500.

@model IEnumerable<GeoSystem.Models.Request>

@(Html.X().Store()
            .ID("BrigadeStore")
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("id", ModelFieldType.Int) { Mapping = "BrigadeID" },
                    new ModelField("name", ModelFieldType.String) { Mapping = "BrigadeName" }
                )
            )
            .Proxy(Html.X().AjaxProxy()
                .Url(Url.Action("GetBrigades"))
                .Reader(Html.X().JsonReader().RootProperty("data"))
            )
)

@(Html.X().GridPanel()
            .ID("GridPanelRequest")
            .Store(
                Html.X().StoreForModel().ID("StoreRequest")
                .AutoSync(true)
                    .ShowWarningOnFailure(false)                    
                    .SyncUrl(Url.Action("RequestHandleChanges"))
            )
            .Icon(Icon.Table)
            .Frame(true)
            .Title("Заявки")
            .Height(430)
            .Width(500)
            .StyleSpec("margin-top: 10px;")
            .ColumnModel(       
                Html.X().ColumnFor(Model, m => m.RequestName)
                    .ToBuilder<Column.Builder>()
                    .Flex(1)
                    .Editor(
                        Html.X().TextField().AllowBlank(false)
                    ),

                Html.X().ColumnFor(Model, m => m.Start)
                    .ToBuilder<Column.Builder>()
                    .Flex(1)
                    .Editor(
                        Html.X().TextField().AllowBlank(false)
                    ),

                Html.X().ColumnFor(Model, m => m.Brigade.BrigadeName)
                    .ToBuilder<Column.Builder>()
                    .Flex(1)
                    .Editor(
                        Html.X().ComboBox()
                        .QueryMode(DataLoadMode.Remote)
                        .TriggerAction(TriggerAction.All)
                        .StoreID("BrigadeStore")
                        .ValueField("id")
                        .DisplayField("name")
                    )
            )
            .Plugins(
                Html.X().CellEditing()
            )
)

Answer 1

Problem with ComboBox I solved this way. Added a new class for combobox's store. The controller returns a list of this objects.

public class BrigadeComboBox
{
    public string BrigadeName;
    public Brigade Brigade;
}

Then Store for ComboBox realized like

@(Html.X().Store()
            .ID("BrigadeStore")
            .Model(Html.X().Model()
                .Fields(
                    new ModelField("brigade", ModelFieldType.Object) { Mapping = "Brigade" },
                    new ModelField("BrigadeName", ModelFieldType.String) { Mapping = "BrigadeName" }
                )
            )
            .Proxy(Html.X().AjaxProxy()
                .Url(Url.Action("GetBrigades"))
                .Reader(Html.X().JsonReader().RootProperty("data"))
            )
)

In Fields of Model of Store for GridPanel added

new ModelField()
    {
        Name = "Brigade",
        Type = ModelFieldType.Object
    }

ColumnFor i replaced it with Column

Html.X().Column()
    .Text("Бригада")
    .DataIndex("Brigade")

And Editor for Column in ColumnModel is

.Editor(Html.X().ComboBox()
    .QueryMode(DataLoadMode.Remote)
    .TriggerAction(TriggerAction.All)
    .StoreID("BrigadeStore")
    .ValueField("brigade")
    .DisplayField("BrigadeName"))

And also i add .Renderer("brigadeRenderer") for Column

var brigadeRenderer = function (value) {
            if (!Ext.isEmpty(value)) {
                return value.BrigadeName;
            }

            return value;
        };

but that didn't solve the problem with AsyncTask.