ASPxGridView编辑

sangai

由于ASPxGridView默认的编辑模式有时不符合我们自己的要求，所以需要设置自己的编辑模式。那么请一步一步跟我做。
1:下面是ASPxGridView1的前台代码         
<dxwgv:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False"
                DataSourceID="SqlDataSource1" KeyFieldName="id" OnRowUpdating="ASPxGridView1_RowUpdating" CssFilePath="~/App_Themes/Glass/{0}/styles.css" CssPostfix="Glass">
                <Columns>
                    <dxwgv:GridViewCommandColumn VisibleIndex="0">
                        <EditButton Visible="True">
                        </EditButton>
                    </dxwgv:GridViewCommandColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="id" ReadOnly="True" VisibleIndex="1">
                  <EditFormSettings Visible="False" />
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="产品编码" VisibleIndex="2">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="产品名称" VisibleIndex="3">
                    </dxwgv:GridViewDataTextColumn>
                </Columns>
                            <Templates>
             <EditForm>
             <div style="padding:4px 4px 3px 4px">
                产品编码：<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("产品编码") %>'></asp:TextBox></div><asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="~/images/Calendar_scheduleHS.png" OnClientClick="ChooseSKU_onclick() "></asp:ImageButton>
             <div style="text-align:right; padding:2px 2px 2px 2px">
                 <dxwgv:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>
                 <dxwgv:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>
             </div>
             </EditForm>
            </Templates>
</dxwgv:ASPxGridView>
可以看到我增加了一个<Templates></Templates>段，切忌一定要增加
<dxwgv:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>
<dxwgv:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>
这段，否则没有“更新”和“取消”按钮。
<div style="padding:4px 4px 3px 4px">
产品编码：<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("产品编码") %>'></asp:TextBox></div><asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="~/images/Calendar_scheduleHS.png" OnClientClick="ChooseSKU_onclick() "></asp:ImageButton>
其中的TextBox1就是我们要用来更新Grid中“产品编码”字段的。然后后面跟了一个ImageButton，由于我们还要从一个字窗口中的Grid中选择一个值来替代手工去输入新值（这是很常见的需求吧）。
 
2：
在窗体的前台中增加代码：
<script type="text/javascript">//下面是自动弹出窗口事件，主要是对弹出位置做了设置，可以不看这段
function OpenWindows2(url,wname,w,h,x,y,parameters){
     w = w || 505;
     h = h || 497;
     x = (window.screen.width - w) / 2;
     y = (window.screen.height - h) / 2;
     if(!parameters){parameters = ',menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no';};
     myWin = window.open(url,wname,'width='+w+',height='+h+',screenX='+x+',screenY='+y+',top='+y+',left='+x+parameters);
}
 
</script>
<script type="text/javascript">//下面这个事件将赋给ImageButton1来弹出子窗体。
function ChooseSKU_onclick()
{
OpenWindows2('ChooseSku.aspx')
}
</script>
 
3:在ASPxGridView1的RowUpdating事件中写入如下代码：
protected void ASPxGridView1_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)
    {
        TextBox memo = ASPxGridView1.FindEditFormTemplateControl("TextBox1") as TextBox;
        e.NewValues["产品编码"] = memo.Text;
}
 
4:子窗体的前台部分代码，用于将子窗体中选中的Grid的记录传回主窗体。
<script type="text/javascript"   language="javascript">  
    function zdq()  
      {  
    window.opener.document.getElementById("chuandi1").value=window.document.getElementById("TextBox1").value;
          window.opener.document.getElementById("Button1").click();
          window.close();
      }  
</script>
<script language="javascript" type="text/javascript">
function OnGridFocusedRowChanged() {
    grid.GetRowValues(grid.GetFocusedRowIndex(), '产品编码', OnGetRowValues);
}
function OnGetRowValues(values) {
    var khbm = document.getElementById("TextBox1");
    khbm.value = values[0];}
</script>
需要注意的是，子窗体我用的也是ASPxGridView，所以取得选中记录值的办法有点特殊，这里不详细说明。
 
5：需要注意的是我们的Textbox1在ASPxGridView1中，所以子窗体传递回去的值，找不到TextBox1。所以我们需要在ASPxGridView外面增加一个隐藏的Textbox(chuandi1)和一个隐藏的Button，其中Button的事件如下：
    protected void Button1_Click(object sender, EventArgs e)
    {
        TextBox memo = ASPxGridView1.FindEditFormTemplateControl("TextBox1") as TextBox;
        memo.Text = this.chuandi1.Text;
}
 
 
 
这样程序运行时，点击“Edit”后，就会出现我们自定义的编辑画面，然后选择出新的记录传递到TextBox1中去，然后点击“Update”更新即可。需要注意的是，如果需要屏蔽TextBox1不能被输入（设置ReadOnly为True），则选择新的记录后，更新不起作用了。不知道有什么办法能TextBox1只能被选择的记录更新，而不是被输入。