Avatar of worldfear
worldfear asked on

asp.net gridview bound template format column in new row

i have a gridview that is bound to a query.  i want the final two fields of the query to be displayed in a single column in a new row.  when the user clicks the hyperlink "expand" in the rightmost column, the final two fields become visible below.  
<asp:GridView ID="GridView1" runat="server" HeaderStyle-BackColor="#CCCCFF" HeaderStyle-Font-Size="XX-Small"
                HeaderStyle-Font-Bold="True" HeaderStyle-BorderStyle="None" BorderStyle="None" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="Leg">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"leg") %></ItemTemplate>
                    </asp:TemplateField>  
                     <asp:TemplateField HeaderText="Conflict level">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"clevel") %></ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Next conflict">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"nextconflict") %></ItemTemplate>
                    </asp:TemplateField>  
                    <asp:TemplateField HeaderText="Clock">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"clock") %></ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="MOA">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"moa") %></ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Callsign">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"callsign") %></ItemTemplate>
                    </asp:TemplateField>
                        <asp:TemplateField HeaderText="Aircraft">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"aircraft") %></ItemTemplate>
                    </asp:TemplateField>
                        <asp:TemplateField HeaderText="Routedesignator">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"routedesignator") %></ItemTemplate>
                    </asp:TemplateField>
                        <asp:TemplateField HeaderText="Groundspeed">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"groundspeed") %></ItemTemplate>
                    </asp:TemplateField>
                       <asp:TemplateField HeaderText="Altitude">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"alt") %></ItemTemplate>
                    </asp:TemplateField>
                       <asp:TemplateField HeaderText="Frequency">
                        <ItemTemplate><%# DataBinder.Eval(Container.DataItem,"freq") %></ItemTemplate>
                    </asp:TemplateField>
                       <asp:TemplateField HeaderText="View Contacts">
                        <ItemTemplate>
                         <asp:HyperLink  ID="hlUrl"  runat="server"  ?????>expand</asp:HyperLink>
                        </ItemTemplate>
                    </asp:TemplateField>

the query for this gridview includes two additional fields not shown in the template above.  call them contact1 and contact2.  i want contact1 and contact2 to appear in a single column in a new row beneath all of the columns above.  i don't want to run a new query or go back to the server, i just want a new row with contact1 and contact2 to become visible and for the rest of the rows beneath to be correctly formated.
.NET ProgrammingASP.NET

Avatar of undefined
Last Comment
Nerdwood

8/22/2022 - Mon
Nerdwood

Hi

So, if you click on "expand" in row 1, the two contact fields appear underneath the gridview, and if you click "expand" in row 2, the contact details for row 2 appear underneath the gridview?

And you're wanting this done on the client without a postback, right?

Michael
ASKER
worldfear

correct.  the gridview can have many rows. so click expand on row 1 and  a new details row are inserted between rows 1 and 2.  correct client side no postback.  
Nerdwood

Ah, OK. Here's a version that puts the contact details underneath the GridView... I'll modify it to do what you're wanting...
*** JavaScript function ***
 
<script type="text/javascript" language="javascript">
    function changeContactInfo(contact1, contact2)
    {
        document.getElementById("lblContact1").innerHTML = contact1;
        document.getElementById("lblContact2").innerHTML = contact2;
    }
</script>
 
 
 
*** Content area ***
 
<div>
    <asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="False" 
        DataSourceID="sdsTest">
        <Columns>
            <asp:BoundField DataField="col1" HeaderText="col1" SortExpression="col1" />
            <asp:BoundField DataField="col2" HeaderText="col2" SortExpression="col2" />
            <asp:BoundField DataField="col3" HeaderText="col3" SortExpression="col3" />
            <asp:BoundField DataField="col4" HeaderText="col4" SortExpression="col4" />
            <asp:BoundField DataField="col5" HeaderText="col5" SortExpression="col5" />
            <asp:TemplateField HeaderText="View Contacts">
                <ItemTemplate>
                    <asp:HyperLink ID="hlUrl" runat="server" Text="expand"
                        NavigateUrl='<%# "javascript:changeContactInfo(" + char.ConvertFromUtf32(39) + Eval("contact1") + char.ConvertFromUtf32(39) + ", " + char.ConvertFromUtf32(39) + Eval("contact2") + char.ConvertFromUtf32(39) + ");" %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<div id="contactInfo">
    <span id="lblContact1">&nbsp;</span>
    <br />
    <span id="lblContact2">&nbsp;</span>
</div>

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
worldfear

thanks.  i cant get the link to be clickable.  it is rendered to the screen and underlined like a link but no mouse over or onclick action.
ASKER CERTIFIED SOLUTION
Nerdwood

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Nerdwood

Hmm... not sure why it wasn't clickable. Let me know how this one turns out!

Michael
ASKER
worldfear

what is colID - i get error that it  is not contained in the sql statement datarecordinternal
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
worldfear

oh i see - nevermind and thanks!
Nerdwood

Glad it works!  :)