代码之家 › 专栏 › 技术社区 › David

编辑带有下拉列表的Gridview行太宽-如何使用弹出面板?

modalpopups modalpopupextender asp.net-ajax vb.net asp.net

2

David · 技术社区 · 16 年前

我在选项卡面板中有一系列GridView—数据绑定到业务对象的通用列表。

Gridview中的列都类似于以下内容:

<asp:TemplateField HeaderText="Company" SortExpression="Company.ShortName">
    <ItemTemplate>
        <asp:Label ID="lblCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:DropDownList ID="ddlCompany" runat="server"></asp:DropDownList>
    </EditItemTemplate>
</asp:TemplateField>

GridView在行的开头生成“Edit”链接,所有事件都触发ok。问题是数据越来越长。当处于“显示模式”时,这很好,因为GridView控件足够聪明,可以将一些文本分成多行(特别是项目、标题和工作人员名称可能会很长)。

问题出现在编辑模式。下拉列表不会将条目分成多行(原因很明显)。在Gridview中的一行中进入Edit ode可以使Gridview水平扩展到屏幕大小的两倍(突破母版页和CSS中的宽度限制,但这只是一个相关的问题)。

我需要的是类似ModalPopup的东西-但是尝试将其绑定到EditItemTemplate中的ID会在页面呈现时出错(因为“ddlXXXX”当时不存在)。此外,我不知道如何动态填充面板,以便从中得到响应(比如他们选择的公司的ID)。

我找到的所有示例都是带有预定义面板的模态弹出窗口。即使它(弹出面板)是一个类似于复选框列表的东西,它也可以被数据绑定到我已经准备好的SortedList和一个OK/Cancel按钮组合来接受或忽略事情。我只是不知道什么会去哪里。

编辑:最终解决方案如下:

<asp:TemplateField HeaderText="Company" SortExpression="Company.ShortName">
    <ItemTemplate>
        <asp:Label ID="lblCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:LinkButton ID="lnkCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:LinkButton>
        <asp:Panel ID="pnlCompany" runat="server" style="display:none">
            <div> 
                <asp:DropDownList ID="ddlCompany" runat="server" ></asp:DropDownList>
                <br/> 
                <asp:ImageButton ID="btnOKCo" runat="server" ImageUrl="~/Images/greencheck.gif" OnCommand="PopupButton_Command" CommandName="SelectCO" /> 
                <asp:ImageButton ID="btnCxlCo" runat="server" ImageUrl="~/Images/RedX.gif" /> 
            </div> 
        </asp:Panel>
        <cc1:ModalPopupExtender ID="mpeCompany" runat="server" 
                TargetControlID="lnkCompany" PopupControlID="pnlCompany" 
                BackgroundCssClass="modalBackground" CancelControlID="btnCxlCo" 
                DropShadow="true" PopupDragHandleControlID="pnlCompany" />
    </EditItemTemplate>
</asp:TemplateField>

在代码隐藏中,lstIDLabor是绑定到GridView的数据行的通用列表(Company是其属性之一,也是业务对象):

Sub PopupButton_Command(ByVal sender As Object, ByVal e As CommandEventArgs)
    Dim intRow As Integer
    Dim intVal As Integer
    RestoreFromSessionVariables()
    Select Case e.CommandName
        Case "SelectCO"
            intRow = grdIDCostLabor.EditIndex
            Dim ddlCo As DropDownList = CType(grdIDCost.Rows(intRow).FindControl("ddlCompany"), DropDownList)
            intVal = ddlCo.SelectedValue
            lstIDLabor(intRow).CompanyID = intVal
            lstIDLabor(intRow).Company = Company.Read(intVal)
        Case Else
            '
    End Select
    MakeSessionVariables()
    BindGrids()
End Sub

1 回复 | 直到 16 年前

1

0

alejandrobog 16 年前

这个怎么样?

<asp:TemplateField HeaderText="Company" SortExpression="Company.ShortName">
<ItemTemplate>
    <asp:Label ID="lblCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
    <asp:LinkButton ID="EditBtn" runat="server" Text='<%# Eval("Company.ShortName") %>' />
      <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
        <div>
          <asp:DropDownList ID="ddlCompany" runat="server"  SelectedValue='<%# Bind("Company.ID")></asp:DropDownList><br/>
          <asp:ImageButton ID="OkButton" runat="server" ImageUrl="~/Images/OkBtn.png"  />
          <asp:ImageButton ID="CancelButton" runat="server" ImageUrl="~/Images/Cancel.png" />

          </div>
        </div>
      </asp:Panel>
      <act:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="EditBtn"
        PopupControlID="Panel1" BackgroundCssClass="modalBackground" CancelControlID="CancelButton"
        DropShadow="true" PopupDragHandleControlID="Panel1" />
</EditItemTemplate>

因此,当您编辑时,您将公司视为一个链接按钮,当您单击时,您将看到带有下拉列表的弹出窗口,该下拉列表已绑定到公司id