DevExpress Get selected value of ASPxComboBox in ClientSide

Question

I have a ASPxGridview that contains a field with ASPxComboBox I want to get the selected value of a ASPxComboBox and display it in a label. In my code below I just store the value on alert() message. But all I'm getting is a "null" value.Can anyone know how to solve my problem? Thank you so much.

Here's what I have so far

<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

Replace this in you aspx code -

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

Replace your javascript function from this and check.

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

Answer 2

Change your SelectedIndexChanged JS handler to this:

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

But if you are to change the label stored elsewhere with a newly selected data, how would you know for which particular grid's row the combobox value was changed?

Comment if this is your requirement, because DX has a way to handle this case.

UPDATE: To be able to differentiate in which row the combobox from EditItemTemplate had selected index changed you need to assign a unique ClientInstanceName for each such combobox. This ClientInstanceName should contain the row index part, for example: avery_01 .

To be able to accomplish this you need to handle the OnInit event for EACH combobox being displayed and assign ClientInstanceName there like for example the following:

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

Note I have removed the ClientInstanceName attribute and ClientSideEvents element.

Same should be done for your ASPxLabel placed inside ASPxGridView DataItemTemplate:

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

Then in codebehind you add:

// 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);    
}

Then update you JavaScript handler like this:

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

   label.SetText(getProduct);
}

Note, above the label is not just a string or jQuery object, it's real DevExpress client side object for the ASPxLabel defined in another grid column on the same row as the current combobox for which this event will be handled. Therefore it should all DX client side methods like SetText() and GetText.

So the above approach has been verified to work. Note, all code snippets I've typed in directly without compiling. But I trust you should be able to glue them all around.

Similar cases:

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

Label will be updated while combobox changed event but it will lost it's value on post back. Avoid post back on combobox index change then label will be updated as you need.

AutoPostBack="false"