ASPxGridView内联EditForm文本字段自动填充

时间:2014-10-29 11:48:36

标签: javascript asp.net vb.net devexpress aspxgridview

我的WebForm上有ASPxGridView。我想要做的是在用户输入 FirstName LastName 时自动添加填充UserID。图片已附上。

enter image description here

例如,如果 FirstName =" Faizan"和 LastName =" Mubasher"那么 UserID 必须自动填充值" 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>

1 个答案:

答案 0 :(得分:0)

花费大量时间和玩它,我们需要添加几个 Javascript 函数并修改特定的GridView的数据列

首先,使用<dx:GridViewDataColumn更改<dx:GridViewDataTextColumn,然后添加以下子节点:

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

此处 ClientSideEvents 属性标记用于使用 Javascript 在客户端引发事件。同样,修改其他所需的数据列。例如,我修改了 FieldNames FirstName LastName UserID 的三个DataColumns。

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

请注意,我还没有添加                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

请注意,我没有为DataColumn UserID 添加 ValueChanged 客户端事件,因为它不是必需的。

最后,添加 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非常简单。 grid 是ASPxGridView1的 ClientInstanceName 。此实例名称用于在Javascript中访问网格属性,并在客户端提供有用的功能。所以,我有 UserID 字段,并在用户输入 LastName 字段中的姓氏后立即设置其值,这对我有用。

提示取自:How to use Javascript on AspxGridview