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.

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

worldfear

ASKER

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

worldfear

ASKER

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

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Nerdwood

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

Michael