Hi there,
I have a GridView that once you click on a certain row another row drops beneath it to show additional information. If you click the same row again the row with the additional info disappears. Below is the code for how I built this functionality:
This works fine but when I sort a column it breaks in the sorting event I reset session back to 2 (If you do a viewSource from browser the fields in gridview are proceeded with ctl00_ContentPlaceHolder1_Queues_ctl02_HyperLink1 where 02 is incremented by 1 ) and that doesn't work it seemes as though it should work but when do viewsource it is passing in the same old values and if I click the row that was last it affects the row that was once first and bombs for all other rows. does anyone have any ideas how to sort the grid and also keep my functionality working.
CODE
protected void Queues_Sorting(object sender, GridViewSortEventArgs e)
{
//1 = Ascending, 2 = Descending
if ((int)ViewState["ASCDESC"] == 1)
{
e.SortDirection = SortDirection.Descending;
ViewState["ASCDESC"] = 2;
Session["qupage"] = 2;
}
else
{
e.SortDirection = SortDirection.Ascending;
ViewState["ASCDESC"] = 1;
Session["qupage"] = 2;
}
Queues.DataBind();
}
CODE
<asp:GridView ID="Queues" BackColor="#F1F1F1"
DataKeyNames="CompanyID" BorderWidth="1px" OnRowDataBound="Queues_RowDataBound" Font-Size="Small" Font-Names="Verdana" DataSourceID="GetCompaniesSource" AllowSorting="True" OnSorting="Queues_Sorting" AutoGenerateColumns="False" runat="server" Width="969px">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="hidCompanyId" Value='<%# Eval("CompanyID") %>' runat="server" />
<asp:HiddenField ID="hidfldPrjID" Value='<%# Eval("ProjectId") %>' runat="server" />
<a id="hyplnkShow" runat="server" style="cursor: pointer;"><img alt="" id="collapseExpand" runat="server" src="App_Themes/OLDimages/plus.gif" /></a>
//div that holds the repeater
<div style="display: none;">
<table style="border: 0px;">
<asp:Repeater ID="rptModules" DataSourceID="sqlDsModules" runat="server">
<ItemTemplate>
<tr>
<td>
<h3><%# Eval("moduleTypeName")%></h3>
</td>
<td>
<h3><%# String.Format("{0:C0}",Eval("proposedACV"))%></h3>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
Next Is the JavaScript that creates the new row and display what is in the div.
CODE
function TurnOnDiv(index)
{
if(index >= 2 && index <= 9)
index = "0" + index;
var img = document.getElementById('ctl00_ContentPlaceHolder1_Queues_ctl' + index + '_collapseExpand');
var lnk = document.getElementById('ctl00_ContentPlaceHolder1_Queues_ctl' + index + '_hyplnkShow');
var src = img.getAttribute("src");
if(src.indexOf("plus") > 0)
{
img.src = src.replace("plus","minus");
//Get ref to current row where the image is
var tr = lnk.parentNode.parentNode;
// Get a reference to the next row from where the image is
var next_tr = tr.nextSibling;
// Get a refernece to the <tbody> tag of the grid
var tbody = tr.parentNode;
// Get a reference to the image's column
var td = lnk.parentNode;
var detailnode;
//loop through the content of image's column. if hidden div is found, get ref
for(var j = 0; j<td.childNodes.length; j++)
{
if(td.childNodes[j].nodeType == 1)
{
if(td.childNodes[j].nodeName.toLowerCase() == 'div')
{
detailnode = td.childNodes[j].cloneNode(true);
detailnode.setAttribute('style','');
}
}
}
//create a new table row for expand
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var newfirsttd = newtd.cloneNode(true);
newfirsttd.innerHTML = ' ';
newtr.appendChild(newfirsttd);
newtd.colSpan = 8;
//insert the hidden div's content into new row
newtd.innerHTML = detailnode.innerHTML;
newtr.appendChild(newtd);
tbody.insertBefore(newtr,next_tr);
}
else
{
img.src = src.replace("minus","plus");
var row = lnk.parentNode.parentNode;
var rowsibiling = row.nextSibling;
var rowparent = row.parentNode;
rowparent.removeChild(rowsibiling);
}
}
RowDataBound
CODE
protected void Queues_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HiddenField hidfield = (HiddenField)e.Row.FindControl("hidfldCompanyName");
HtmlAnchor hyplnk = (HtmlAnchor)e.Row.FindControl("hyplnkShow");
HiddenField hidfldRMAM = (HiddenField)e.Row.FindControl("hidFieldRMAM");
HiddenField hidfldPrjId = (HiddenField)e.Row.FindControl("hidfldPrjID");
HiddenField hidfldACV = (HiddenField)e.Row.FindControl("hidfldACV");
HiddenField hidType = (HiddenField)e.Row.FindControl("hidType");
Label lblType = (Label)e.Row.FindControl("lblType");
HiddenField hidfldCloseDate = (HiddenField)e.Row.FindControl("hidfldCycCloseDate");
HiddenField hidCompID = (HiddenField)e.Row.FindControl("hidCompanyId");
Menu menu1 = (Menu)e.Row.FindControl("Menu1");
string closeDate = hidfldCloseDate.Value.Replace(" ", "");
string companyName = hidfield.Value.Replace('&', '+');
int x = 0;
//if rowIndex is 0 start with 2
//which is being stored in session variable.
//else increment session variable value by 1.
//used so javascript code can get references to the img tag an a tag.
if (e.Row.RowIndex != 0)
{
Session["qupage"] = Convert.ToInt32(Session["qupage"].ToString()) + 1;
}
x = Convert.ToInt32(Session["qupage"].ToString());
if (hidType.Value == "1")
lblType.Text = "CIQ";
else
lblType.Text = "ClariFi";
hyplnk.Attributes.Add("onclick", "TurnOnDiv('" + x + "')");
menu1.Items[0].NavigateUrl = "https://www.capitaliq.com/CIQDotNet/Project/PipelineSummary.aspx?companyid=" + hidCompID.Value;
menu1.Items[1].NavigateUrl = "mailto:" + hidfldRMAM.Value + "&subject=" + companyName + " (ProjectID=" +
hidfldPrjId.Value + ", ACV=$" + String.Format("{0:C}", hidfldACV.Value) +
", CycleCloseDate=" + closeDate + ")";
menu1.Items[2].Value = hidfldPrjId.Value;
}
}
20 Aug, 2008 - 07:45 AM
| 