DevExpress 级联组合框 GridView 数据绑定答案

【问题标题】：DevExpress Cascading Combobox GridView DataBindDevExpress 级联组合框 GridView 数据绑定
【发布时间】：2018-04-10 13:53:58
【问题描述】：

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

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

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

为什么TextField 在我的编辑表单combobox 中呈现，而在我的GridView 上没有？

PartialView CodeSample 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();
}

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

【问题讨论】：

标签： c# gridview combobox devexpress cascading

【解决方案1】：

我找到了解决办法。

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

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

我认为问题在于，在回调中我以一种方式声明列类型，但后来用我的comboBoxProperties 代码覆盖它。我所做的改变正在改变 var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties; 到

var comboBoxProperties = column.PropertiesEdit as MVCxColumnComboBoxProperties;

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

在您的部分视图中，为“发起者”列提供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 个部分，您可以级联组合框并在网格中正确显示它们

【讨论】：