need modal help

  • Thread starter Thread starter JohnE
  • Start date Start date
J

JohnE

I have a gridview with a linkbutton on it that shows the detail of the record
in a modal. In the modal I am using a Formview. Below is the source code
for the modal, including the css that it uses. My situation is the detail of
the gridview record (which only shows 6 fields) has a total of 50 fields for
the detail. All 50 will need to be seen and most updatable from the modal.

<%--//============= MODAL POPUP Start =============//--%>

<asp:Button ID="btnShowModalPopup" runat="server"
style="display:none" />

<cc1:ModalPopupExtender ID="mpuChangeRequestRecordDetail"
runat="server"
TargetControlID="btnShowModalPopup"
PopupControlID="divPopUp"
BackgroundCssClass="modalBackground"
DropShadow="true">
</cc1:ModalPopupExtender>

<br />

<div id="divPopUp" class="modalPopup" style="display:none;" >

<asp:Panel ID="pnlModalHeader" runat="server"
BackColor="Black" ForeColor="White" Font-Bold="true" Height="15px"
HorizontalAlign="Center" >
Change Request <asp:Label ID="lblChangeRequestID"
runat="server" ></asp:Label> Detail View
</asp:Panel>

<asp:FormView ID="fvwModalChangeRequestRecordDetail"
runat="server" DataKeyNames="ChangeRequestID" CssClass="popupControl" >
<ItemTemplate>
ID: <asp:Label ID="lblChangeRequestID"
runat="server" Text='<%# Eval("ChangeRequestID") %>' ></asp:Label><br /><br />
Originator: <asp:Label ID="lblOriginator"
runat="server" Text='<%# Bind("Originator") %>' ></asp:Label>
Origination Date: <asp:Label ID="lblOriginationDate"
runat="server" Text='<%# Bind("OriginationDate") %>' ></asp:Label><br /><br />

</ItemTemplate>

<EditItemTemplate>
<asp:TextBox ID="txtChangeRequest" runat="server"
Text='<%# Bind("ChangeRequest") %>' ></asp:TextBox>
</EditItemTemplate>

</asp:FormView>

<br />

<asp:Button ID="btnCloseFormView" runat="server"
Text="Close" />

<br />

</div>


<%--//============= MODAL POPUP End =============//--%>

/*== Modal Popup ========================================
*/

..modalBackground
{
background-color: Gray;
filter: alpha(opacity=80);
opacity: 0.8;
}

..modalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 5px;
width: 600px;
height: 500px;
}

..popupControl
{
background-color: #AAD4FF;
border-style: solid;
border-color: black;
border-width: 2px;
width: 100%;
font-size: 12px;
}

Is there a better way to go about showing the 50 fields without having a
long modal? Can scrollbars (which I donot see a property for) be added? If
so, how?

I am open to thoughts and suggestions regarding this. What is done here
will be used in several other webapps that will be done.

Thank you in advance for your time regarding this.

.... John
 
I have a gridview with a linkbutton on it that shows the detail of the record
in a modal.  In the modal I am using a Formview.  Below is the sourcecode
for the modal, including the css that it uses.  My situation is the detail of
the gridview record (which only shows 6 fields) has a total of 50 fields for
the detail.  All 50 will need to be seen and most updatable from the modal.  

<%--//============= MODAL POPUP Start  =============//--%>

            <asp:Button ID="btnShowModalPopup" runat="server"
style="display:none" />

            <cc1:ModalPopupExtender ID="mpuChangeRequestRecordDetail"
runat="server"
                    TargetControlID="btnShowModalPopup"
                    PopupControlID="divPopUp"
                    BackgroundCssClass="modalBackground"
                    DropShadow="true">
            </cc1:ModalPopupExtender>

            <br />

            <div id="divPopUp" class="modalPopup" style="display:none;" >

                <asp:Panel ID="pnlModalHeader" runat="server"
BackColor="Black" ForeColor="White" Font-Bold="true" Height="15px"
HorizontalAlign="Center" >
                    Change Request <asp:Label ID="lblChangeRequestID"
runat="server" ></asp:Label> Detail View
                </asp:Panel>

                <asp:FormView ID="fvwModalChangeRequestRecordDetail"
runat="server" DataKeyNames="ChangeRequestID" CssClass="popupControl" >
                    <ItemTemplate>
                        ID: <asp:Label ID="lblChangeRequestID"
runat="server" Text='<%# Eval("ChangeRequestID") %>' ></asp:Label><br/><br />
                        Originator: <asp:Label ID="lblOriginator"
runat="server" Text='<%# Bind("Originator") %>' ></asp:Label>  
                        Origination Date: <asp:Label ID="lblOriginationDate"
runat="server" Text='<%# Bind("OriginationDate") %>' ></asp:Label><br/><br />

                    </ItemTemplate>

                    <EditItemTemplate>
                        <asp:TextBox ID="txtChangeRequest" runat="server"
Text='<%# Bind("ChangeRequest") %>' ></asp:TextBox>
                    </EditItemTemplate>

                </asp:FormView>

                <br />

                <asp:Button ID="btnCloseFormView" runat="server"
Text="Close" />

                <br />

            </div>

<%--//============= MODAL POPUP End  =============//--%>

/*== Modal Popup ========================================
*/

.modalBackground
{
        background-color: Gray;
        filter: alpha(opacity=80);
        opacity: 0.8;

}

.modalPopup
{
        background-color: #ffffdd;
        border-width: 3px;
        border-style: solid;
        border-color: Gray;
        padding: 5px;
        width: 600px;
        height: 500px;

}

.popupControl
{
        background-color: #AAD4FF;
        border-style: solid;
        border-color: black;
        border-width: 2px;
        width: 100%;
        font-size: 12px;

}

Is there a better way to go about showing the 50 fields without having a
long modal?  Can scrollbars (which I donot see a property for) be added?  If
so, how?

I am open to thoughts and suggestions regarding this.  What is done here
will be used in several other webapps that will be done.

Thank you in advance for your time regarding this.

... John
Click to expand...

A scrollable area you can usually make using div and css

Set div's style to "overflow: auto; height: 300px" and see what
happens

Hope this helps
 
Back
Top