DevExpress 级联组合框 GridView 数据绑定

Question

我有一个 GridView，其中包含一个 TextField 的 BenefitName (string) 和一个 ValueField 的 BenefitInfoKeySK (int).

最初我直接将 datasource 绑定到 combobox 并且具有不同的 TextField 和 ValueField 值。 （代码示例 2）

我更新了我的代码以创建 'cascading' 组合框，TextField 值不再显示在我的 GridView 中，但它确实显示在我的编辑表单的 comboBox 中.

Why does the TextField render in my edit form combobox but not on my GridView?

PartialView 代码示例 1（级联组合框）

    settings.Columns.Add(column =>
    {
        column.FieldName = "BenefitKey";
        column.Name = "BenefitKey";
        column.Caption = "Claim Type";
        column.Width = 200;
        column.Settings.AllowHeaderFilter = DefaultBoolean.False;
        column.EditFormSettings.Visible = DefaultBoolean.True;
        column.Settings.AllowSort = DefaultBoolean.False;
        column.EditorProperties().ComboBox(p =>
        {
            p.CallbackRouteValues = new { Controller = "BenefitClaimDetails", Action = "GetBenefitTypes", TextField = "BenefitName", ValueField = "BenefitInfoKeySK", headerEmployeeID = Model.BenefitHeaderEmployee };
            p.TextField = "BenefitName";
            p.ValueField = "BenefitInfoKeySK";
            p.ClientSideEvents.BeginCallback = "ClaimTypeComboBox_BeginCallback";
            p.EnableCallbackMode = true;
            p.Width = 200;
            p.ValidationSettings.RequiredField.IsRequired = true;
            p.ValidationSettings.RequiredField.ErrorText = "Claim Type cannot be blank";
            p.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText;
        });
    });

PartialView 代码示例 2（基本组合框）

    settings.Columns.Add(column =>
    {
        column.FieldName = "BenefitKey";
        column.Name = "BenefitKey";
        column.Caption = "Claim Type";
        column.Width = 200;
        column.Settings.AllowHeaderFilter = DefaultBoolean.False;
        column.EditFormSettings.Visible = DefaultBoolean.True;
        column.Settings.AllowSort = DefaultBoolean.False;

        column.ColumnType = MVCxGridViewColumnType.ComboBox;
        var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;
        comboBoxProperties.Width = 200;
        comboBoxProperties.DataSource = repository.GetBenefitListByEmployee(Model.BenefitHeaderEmployee);
        comboBoxProperties.TextField = "BenefitName";
        comboBoxProperties.ValueField = "BenefitInfoKeySK";
        comboBoxProperties.DropDownRows = 15;
        comboBoxProperties.ValueType = typeof(int);
        comboBoxProperties.ValidationSettings.RequiredField.IsRequired = true;
        comboBoxProperties.ValidationSettings.RequiredField.ErrorText = "Claim Type cannot be blank";
        comboBoxProperties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText;
    });

我发现代码示例 1 中的 p.TextField 和 p.ValueField 什么都不做。它们可以被删除而不影响代码。但是我必须在我的 CallBackRoute 中传递这些字段并在控制器代码中分配它们：

控制器代码

    public ActionResult GetBenefitTypes(int claimantID, string textField, string valueField, string headerEmployeeID)
    {
        return GridViewExtension.GetComboBoxCallbackResult(p => {
            p.TextField = textField;
            p.ValueField = valueField;
            p.BindList(repository.GetBenefitListByEmployee(claimantID, headerEmployeeID));
        });
    }

如您所见，最后两种技术都调用相同的 Repository 方法。如果我能详细说明什么，请告诉我。

编辑

我还尝试通过添加 columnType 值并分配数据源来修改代码示例 1，如下所示。这成功地在我的 GridView 上显示了 TextField，但是我为 claimantID 传递的 null 阻止了编辑器组合框显示任何值。出于这个原因，我还包括了 JS 代码，其中我分配了 claimantID.

修改后的 PartialView 代码示例 1（工作网格视图，组合框中没有值）

    settings.Columns.Add(column =>
    {
        column.FieldName = "BenefitKey";
        column.Name = "BenefitKey";
        column.Caption = "Claim Type";
        column.Width = 200;
        column.Settings.AllowHeaderFilter = DefaultBoolean.False;
        column.EditFormSettings.Visible = DefaultBoolean.True;
        column.Settings.AllowSort = DefaultBoolean.False;
        column.EditorProperties().ComboBox(p =>
        {
            p.CallbackRouteValues = new { Controller = "BenefitClaimDetails", Action = "GetBenefitTypes", TextField = "BenefitName", ValueField = "BenefitInfoKeySK", headerEmployeeID = Model.BenefitHeaderEmployee };
            p.TextField = "BenefitName";
            p.ValueField = "BenefitInfoKeySK";
            p.ClientSideEvents.BeginCallback = "ClaimTypeComboBox_BeginCallback";
            p.EnableCallbackMode = true;
            p.Width = 200;
            p.ValidationSettings.RequiredField.IsRequired = true;
            p.ValidationSettings.RequiredField.ErrorText = "Claim Type cannot be blank";
            p.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText;
        });

        column.ColumnType = MVCxGridViewColumnType.ComboBox;
        var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;
        comboBoxProperties.DataSource = repository.GetBenefitListByEmployee(Model.BenefitHeaderEmployee, null);
        comboBoxProperties.TextField = "BenefitName";
        comboBoxProperties.ValueField = "BenefitInfoKeySK";
    });

JS代码

@*The follwing functions handle the Cascading Benefit Type combobox*@
function OnSelectedClaimantChanged() {
    BenefitClaimDetailsGridView.GetEditor("BenefitKey").PerformCallback();
}
function ClaimTypeComboBox_BeginCallback(s, e) {
    e.customArgs["claimantID"] = BenefitClaimDetailsGridView.GetEditor("DependentKey").GetValue();
}

很抱歉包含了这么多代码而不是一个工作项目，但解决方案非常大。我希望这样做。

Answer 1

我找到了我的解决方案。

我开始逐行注释掉 comboBoxProperties 部分，以了解回调将在什么时候开始失败，我发现它因我的声明而失败：column.ColumnType = MVCxGridViewColumnType.ComboBox;

在研究了 EditorProperties.Combobox() 的工作原理后，我意识到在那段代码中，ComboBox 使用的是标准 MVCxColumnComboBoxProperties 而不是 DevExpress GridView ComboBox。

I think the issue was that in the callback I was declaring the column type one way but then overriding it later on with my comboBoxProperties code. The change which I made was changing var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties; to

var comboBoxProperties = column.PropertiesEdit as MVCxColumnComboBoxProperties;

最终的工作代码在这里。对于试图自己将其组合在一起的人：为了实现显示文本但以不同值存储的级联组合框，您需要以下内容。

在您的部分视图中，为 'initiator' 列提供一个 SelectedIndexChanged 事件，例如：

settings.Columns.Add(column =>
{
    column.FieldName = "DependentKey";
    column.Name = "DependentKey";
    column.Caption = "Claimant";
    column.Width = 300;
    column.Settings.AllowHeaderFilter = DefaultBoolean.False;
    column.EditFormSettings.Visible = DefaultBoolean.True;
    column.Settings.AllowSort = DefaultBoolean.False;

    column.ColumnType = MVCxGridViewColumnType.ComboBox;
    var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;
    /*Get an employee model for the current employee and pass that to the Depoendents method to get their list of dependents*/
    comboBoxProperties.DataSource = repository.GetDependentDropdownList(repository.GetCurrentEmployee(employeeID: Model.BenefitHeaderEmployee).DimEmployee);
    comboBoxProperties.TextField = "DependentName";
    comboBoxProperties.ValueField = "DependentKeySK";
    comboBoxProperties.DropDownRows = 15;
    comboBoxProperties.ValueType = typeof(int);
    comboBoxProperties.ValidationSettings.RequiredField.IsRequired = true;
    comboBoxProperties.ValidationSettings.RequiredField.ErrorText = "Claimant cannot be blank";
    comboBoxProperties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText;
    comboBoxProperties.ClientSideEvents.SelectedIndexChanged = "OnSelectedClaimantChanged";
});

在要受影响的列中，您需要这样声明它（这是我上面的代码示例 1 / 代码示例 2 的最终版本）：

settings.Columns.Add(column =>
{
    column.FieldName = "BenefitKey";
    column.Name = "BenefitKey";
    column.Caption = "Claim Type";
    column.Width = 200;
    column.Settings.AllowHeaderFilter = DefaultBoolean.False;
    column.EditFormSettings.Visible = DefaultBoolean.True;
    column.Settings.AllowSort = DefaultBoolean.False;
    column.EditorProperties().ComboBox(p =>
    {   /*Populate the combobox with valid values based on the selected dependentKey*/
        p.CallbackRouteValues = new { Controller = "BenefitClaimDetails", Action = "GetBenefitTypes", TextField = "BenefitName", ValueField = "BenefitInfoKeySK", headerEmployeeID = Model.BenefitHeaderEmployee };
        p.ClientSideEvents.BeginCallback = "ClaimTypeComboBox_BeginCallback";
        p.Width = 200;
        p.ValidationSettings.RequiredField.IsRequired = true;
        p.ValidationSettings.RequiredField.ErrorText = "Claim Type cannot be blank";
        p.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText;
    });

    /*Display the BenefitName in the gridView. The Callback method TextField and ValueField only influence the comboBox in the Editor window*/
    var comboBoxProperties = column.PropertiesEdit as MVCxColumnComboBoxProperties;
    comboBoxProperties.Width = 200;
    comboBoxProperties.DataSource = repository.GetBenefitListByEmployee(Model.BenefitHeaderEmployee);
    comboBoxProperties.TextField = "BenefitName";
    comboBoxProperties.ValueField = "BenefitInfoKeySK";
});

在您的 Index 页面上创建 JS 代码 - 我的代码在上面
在你的控制器中创建 ActionResult - 我的代码在上面

有了这 4 个部分，您就可以级联组合框并在网格中正确显示它们

DevExpress 级联组合框 GridView 数据绑定

DevExpress Cascading Combobox GridView DataBind

c#

gridview

combobox

devexpress

cascading