DevExpress在ClientSide中获取ASPxComboBox的选定值

时间:2017-01-30 09:31:37

标签: javascript asp.net vb.net devexpress

我有一个包含ASPxComboBox字段的ASPxGridview我想获取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);
}

2 个答案:

答案 0 :(得分:1)

在你的aspx代码中替换它 -

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

TypeError: mvcRoutes.called is not a function
    at Object.search (Directives.js:95)
    at Scope.$scope.getCountries (Directives.js:113)
    at Object.fn [as source] (eval at compile (angular.js:13322), <anonymous>:4:317)
    at getMatchesAsync (ui-bootstrap-tpls.js:7224)
    at Array.<anonymous> (ui-bootstrap-tpls.js:7451)
    at NgModelController.$$parseAndValidate (angular.js:25256)
    at NgModelController.$commitViewValue (angular.js:25246)
    at angular.js:25383
    at angular.js:17855
    at completeOutstandingRequest (angular.js:5507)

答案 1 :(得分:1)

将SelectedIndexChanged JS处理程序更改为:

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

但是,如果要使用新选择的数据更改存储在其他位置的标签,您如何知道组合框值更改了哪个特定网格行?

评论这是否是您的要求,因为DX有办法处理这种情况。

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

为了能够实现这一点,您需要处理正在显示的EACH组合框的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元素。

对于放在ASPxGridView DataItemTemplate中的ASPxLabel应该这样做:

...
<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对象,它是ASPxLabel的真正DevExpress客户端对象,在与当前组合框相同的行上的另一个网格列中定义事件将被处理。因此它应该是所有DX客户端方法,如SetText()和GetText。

因此上述方法已经过验证可行。请注意,我直接输入的所有代码段都没有编译。但我相信你应该能够将它们粘在一起。

类似案例:

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

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

  3. HTH