ASPxGridView inline EditForm text field auto fill

Question

I have ASPxGridView on my WebForm. What I want to do is to add fill the UserID automatically if user has entered FirstName and LastName. Image is attached.

For example, if FirstName = "Faizan" and LastName = "Mubasher" then UserID must be auto filled with value "Faizan.Mubasher". How to achieve it on client side.

Here is my .aspx page:

<form id="form1" runat="server" class="main-margin">
            <div>
                <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" EnableTheming="True" Theme="DevEx" CssClass="col-md-12" 
                    ClientInstanceName="grid"
                    OnDataBinding="ASPxGridView1_DataBinding" 
                    OnRowUpdating="ASPxGridView1_RowUpdating"
                    OnRowInserting="ASPxGridView1_RowInserting"
                    OnRowDeleting="ASPxGridView1_RowDeleting"
                    OnRowValidating="ASPxGridView1_RowValidating"
                    OnStartRowEditing="ASPxGridView1_StartRowEditing"
                    OnCustomButtonCallback="ASPxGridView1_CustomButtonCallback"
                    >
                        <Columns>
                        <dx:GridViewCommandColumn VisibleIndex="0">
                            <EditButton Visible="True"/>
                            <NewButton Visible="True"/>
                            <ClearFilterButton Visible="True">
                            </ClearFilterButton>
                        </dx:GridViewCommandColumn>
                        <dx:GridViewCommandColumn VisibleIndex="1">
                            <CustomButtons>
                                <dx:GridViewCommandColumnCustomButton ID="cbSendEmail" Text="Send Email" >
                                </dx:GridViewCommandColumnCustomButton>
                            </CustomButtons>
                        </dx:GridViewCommandColumn>
                        <dx:GridViewDataColumn FieldName="Email" VisibleIndex="2" Name="Email"> 
                        <EditFormSettings/>
                            <Settings AllowAutoFilter="True"/>
                        </dx:GridViewDataColumn>
                        <dx:GridViewDataColumn FieldName="FirstName" VisibleIndex="3" Name="FirstName">
                            <Settings AllowAutoFilter="False"/>
                            </dx:GridViewDataColumn>
                        <dx:GridViewDataColumn FieldName="LastName" VisibleIndex="4" Name="LastName" >
                            <Settings AllowAutoFilter="False" />
                            </dx:GridViewDataColumn>
                            <dx:GridViewDataColumn FieldName="UserID" VisibleIndex="5" Name="UserID" >
                            <Settings AllowAutoFilter="False" />
                            </dx:GridViewDataColumn>
                        <dx:GridViewDataColumn FieldName="Password" VisibleIndex="6" Name="Password" >
                            <Settings AllowAutoFilter="False" />
                            </dx:GridViewDataColumn>
                        <dx:GridViewDataColumn FieldName="RetryCount" VisibleIndex="7" Name="RetryCount">
                            <Settings AllowAutoFilter="False" />
                            <EditFormSettings Visible="False"/>
                        </dx:GridViewDataColumn>
                        <dx:GridViewDataColumn FieldName="MaxRetryCount" VisibleIndex="8" Name="MaxRetryCount" >
                            <Settings AllowAutoFilter="False" />
                            </dx:GridViewDataColumn>
                        <dx:GridViewCommandColumn VisibleIndex="9">
                            <CustomButtons>
                                <dx:GridViewCommandColumnCustomButton ID="cbBlockAccount" Text="Block Account">
                                </dx:GridViewCommandColumnCustomButton>
                            </CustomButtons>
                        </dx:GridViewCommandColumn>
                        <dx:GridViewCommandColumn VisibleIndex="10" ButtonType="Button">
                            <DeleteButton Visible="True" />
                        </dx:GridViewCommandColumn>
                        </Columns>
                        <Settings ShowFilterRow="True" />
                        <SettingsText ConfirmDelete="Confirm Delete" />
                        <SettingsPopup>
                            <EditForm Width="600" />
                        </SettingsPopup>
                </dx:ASPxGridView>
            </div> 
        </form>

Answer 1

Spending plenty of time and playing with it, we need to add couple of Javascript functions and modify specific GridView's Data Columns.

First of all, change <dx:GridViewDataColumn with <dx:GridViewDataTextColumn and then add following it's child node:

    <PropertiesTextEdit ClientInstanceName="firstname">
        <ClientSideEvents ValueChanged="onFirstNameChanged" />
    </PropertiesTextEdit>

Here ClientSideEvents property tag is used to raise an event on client side using Javascript. Similarly, modify other required Data Columns. For example, I modified three DataColumns of FieldNames, FirstName, LastName and UserID.

<dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="3" Name="FirstName" SortOrder="None">
     <PropertiesTextEdit ClientInstanceName="firstname">
          <ClientSideEvents ValueChanged="onFirstNameChanged" />
     </PropertiesTextEdit>
     <Settings AllowAutoFilter="True" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="4" Name="LastName">
     <PropertiesTextEdit ClientInstanceName="lastname">
           ClientSideEvents ValueChanged="onLastNameChanged" />
     </PropertiesTextEdit>
     <Settings AllowAutoFilter="True" />
 </dx:GridViewDataTextColumn>
 <dx:GridViewDataTextColumn FieldName="UserID" VisibleIndex="5" Name="UserID" ReadOnly="true">
     <PropertiesTextEdit ClientInstanceName="uid"></PropertiesTextEdit>
     <Settings AllowAutoFilter="True" />
 </dx:GridViewDataTextColumn>

Note that I haven't added

Note that I haven't added ValueChanged client side event for DataColumn UserID because it is not required.

Lastly, add Javascript events:

<script type="text/javascript">
    var fName
    var lName
    function onFirstNameChanged(s, e) {
        fName = s.GetValue();
    };
    function onLastNameChanged(s, e) {
        lName = s.GetValue();
        grid.GetEditor("UserID").SetValue(fName + "." + lName);
    };
</script>

This Javascript is pretty much simple. grid is the ClientInstanceName of ASPxGridView1. This instance name is used to access grid's properties in Javascript and provide useful functions at client side. So, I got UserID field and set its value as soon as user enters last name in LastName field and this worked for me.

Hint taken from: How to use Javascript on AspxGridview