DevExpress 获取客户端中 ASPxComboBox 的选定值

Question

我有一个 ASPxGridview，其中包含一个带有 ASPxComboBox 的字段我想获取 ASPxComboBox 的选定值并将其显示在标签中。在下面的代码中，我只是将值存储在 alert() 消息中。但我得到的只是一个“空”值。有人知道如何解决我的问题吗？非常感谢。

这是我目前所拥有的

<dx:ASPxGridView ID="ASPxGridView2" OnRowDataBound="ASPxGridView2_RowDataBound" ClientInstanceName="grid" runat="server" AutoGenerateColumns="False" DataSourceID="fordtl" KeyFieldName = "chndtl_no">

<dx:GridViewDataTextColumn FieldName="product" Name="dd_product" ShowInCustomizationForm="true" VisibleIndex="7">
<SettingsHeaderFilter>
<DateRangePickerSettings EditFormatString="" />
</SettingsHeaderFilter>
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxProduct" runat="server" ClientInstanceName="avery" AutoPostBack="true" DataSourceID="Product" EnableCallbackMode="true" TextField="pd_product">
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnProductChanged(s);}"></ClientSideEvents>
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataTextColumn>

</dx:ASPxGridView>

JavaScript

function OnProductChanged(s, e) {
   var getProduct = document.getElementById("ASPxComboBoxProduct");
   alert(getProduct);
}

Answer 1

标签将在组合框更改事件时更新，但在回发时将失去其价值。避免回发组合框索引更改，然后标签将根据需要更新。

AutoPostBack="false"

Answer 2

将您的 SelectedIndexChanged JS 处理程序更改为：

function OnProductChanged(s, e) {
   var getProduct = s.GetValue();
   alert(getProduct);
}

但是，如果您要使用新选择的数据更改存储在其他地方的标签，您如何知道组合框值针对哪个特定网格的行进行了更改？

如果这是您的要求，请评论，因为 DX 有办法处理这种情况。

更新： 为了能够区分来自 EditItemTemplate 的组合框在哪一行中选择了索引更改，您需要为每个这样的组合框分配一个唯一的 ClientInstanceName。此 ClientInstanceName 应包含行索引部分，例如：avery_01。

为了能够做到这一点，您需要为每个显示的组合框处理 OnInit 事件并在那里分配 ClientInstanceName，例如：

...
<EditItemTemplate>
    <dx:ASPxComboBox ID="ASPxComboBoxProduct" runat="server" 
       OnInit="ASPxComboBoxProduct_Init" AutoPostBack="true" DataSourceID="Product" 
       EnableCallbackMode="true" TextField="pd_product">
    </dx:ASPxComboBox>
</EditItemTemplate>
...

注意我已经删除了 ClientInstanceName 属性和 ClientSideEvents 元素。

您的 ASPxLabel 也应该这样做，放置在 ASPxGridView DataItemTemplate 中：

...
<dx:GridViewDataColumn Caption="Label Column Caption">
<DataItemTemplate>
   <ASPxLabel ID="ASPxLabel" runat="server" OnInit="ASPxLabel_Init" />
</DataItemTemplate>
</dx:GridViewDataColumn>
...

然后在代码隐藏中添加：

// Handle OnInit for each combobox being displayed
protected void ASPxComboBoxProduct_Init(object sender, EventArgs e) 
{     
    ASPxComboBox dvxCombo = (ASPxComboBox)sender;
    GridViewDetailRowTemplateContainer templateContainer =
                   (GridViewDetailRowTemplateContainer)ASPxGridView2.NamingContainer;
    dvxCombo.ClientInstanceName = string.Format("avery_{0}",
                                             templateContainer.VisibleIndex);

    // below client instance name should set for the relevant label in the labels 
    //own OnInit handler below
    string targetLabelClientInstanceName = string.Format("label_{0}",
                                             templateContainer.VisibleIndex);
    // Note, we're passing the ASPxLabel's ClientInstanceName as a third
    // param to the SelectedIndexChanged event handler.
    dvxCombo.ClientSideEvents.SelectedIndexChanged = 
        string.Format("function(s, e) {{ OnProductChanged(s, e, {0}); }}",
        targetLabelClientInstanceName);        
}


// Handle OnInit for each ASPxLabel which you will be updating with the
// selected combobox value
protected void ASPxLabel_Init(object sender, EventArgs e) 
{
    ASPxLabel dvxLabel = (ASPxLabel)sender;
    GridViewDetailRowTemplateContainer templateContainer =
                   (GridViewDetailRowTemplateContainer)ASPxGridView2.NamingContainer;
    dvxLabel.ClientInstanceName = string.Format("label_{0}",
                                             templateContainer.VisibleIndex);    
}

然后像这样更新你的 JavaScript 处理程序：

function OnProductChanged(s, e, label) {
   var getProduct = s.GetValue();
   alert(getProduct);

   label.SetText(getProduct);
}

注意，上面的label 不仅仅是一个字符串或 jQuery 对象，它是真正的 DevExpress 客户端对象，用于定义在另一个网格列中的 ASPxLabel，该网格列与将处理此事件的当前组合框位于同一行。因此它应该是所有 DX 客户端方法，如 SetText() 和 GetText。

因此，上述方法已被验证有效。注意，我直接输入的所有代码 sn-ps 没有编译。但我相信你应该能够将它们粘在周围。

类似情况：

1. Checking if a aspxgridview Master-Detail has any row checked in Client Side

2. https://www.devexpress.com/Support/Center/Question/Details/Q372498

HTH

Answer 3

在你的 aspx 代码中替换这个 -

<ClientSideEvents SelectedIndexChanged="function(e,s) { OnProductChanged();}">
</ClientSideEvents>

从这里替换你的javascript函数并检查。

function OnProductChanged(e, s)
{
      var selectedValue = e.lastSuccessValue;
      alert(selectedValue);
}