ASPxGridView inline EditForm текстовое поле автозаполнения

Question

У меня ASPpGridView на моем WebForm. Я хочу сделать, чтобы добавить заполнение UserID автоматически, если пользователь ввел FirstName и LastName. Изображение прилагается.

Например, если FirstName = "Faizan" и LastName = "Mubasher", то Идентификатор_пользователя должна быть автоматически заполнена значением "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> 

Answer 1

Тратить много времени, и играть с ним, нам нужно добавить пару Javascript функций и изменять Столбцы данных конкретного GridView в.

Прежде всего, изменить <dx:GridViewDataColumn с <dx:GridViewDataTextColumn, а затем добавьте следующий его дочерний узел:

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

Здесь ClientSideEvents свойства тега используется, чтобы поднять событие на стороне клиента с использованием Javascript. Аналогичным образом измените другие требуемые столбцы данных. Например, я изменил три DataColumns из , имен полех FirstName, ЬазШатя и Идентификатор_пользователя.

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

Обратите внимание, что я не добавил

Обратите внимание, что я не добавил ValueChanged событие на стороне клиента для DataColumn UserID, потому что это не требуется.

Наконец, добавьте Javascript события:

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

Это Javascript довольно много просто. сетка - это ClientInstanceName ASPxGridView1. Это имя экземпляра используется для доступа к свойствам сетки в Javascript и предоставляет полезные функции на стороне клиента. Итак, я получил поле UserID и установил его значение, как только пользователь вводит фамилию в поле LastName, и это сработало для меня.

Подсказка взяты из: How to use Javascript on AspxGridview