Javascript ASPxGridView内联编辑表单文本字段自动填充

我的网络表单上有ASPxGridView。我想做的是，如果用户输入了FirstName和LastName，则自动添加并填充UserID。图片附呈

例如，如果FirstName=“Faizan”和LastName=“Mubasher”，则用户ID必须自动填入值“Faizan.Mubasher”。如何在客户端实现它

这是我的.aspx页面：

<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>

---

我们需要花费大量时间来使用它，我们需要添加几个Javascript函数并修改特定GridView的数据列

---

首先，更改

尝试这个线程：不相关。需要进一步挖掘：）
    <PropertiesTextEdit ClientInstanceName="firstname">
        <ClientSideEvents ValueChanged="onFirstNameChanged" />
    </PropertiesTextEdit>

<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>

<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>