 |
|
|
Excellent solution. Really fast on the client-side as well.
|
|
|
|
|
|
|
I took the JavaScript from vidyas1982 in his post "fisrt level grid for first row is missing when clicking on expand/collapse all" and modified it so that it worked. I'm not a JavaScript guru so it's probably not coded amazingly but it works and it seems pretty quick to me (even with a non-paginated grid view!). Credit to vidyas1982 for starting the script.
So here it is if anyone is interested!
Create a new Javascript file ("CollapseExpand.js") and link to that in the "<HEAD>" of your aspx page:
<script type="text/javascript" src="js/CollapseExpand.js"></script>
Then add the following to the "CollapseExpand.js" file:
function AddExpandCollapseAllButton(strMainTableID,strHiddenFieldID)
{
var objMainTable = document.getElementById(strMainTableID);
var objHiddenField = document.getElementById(strHiddenFieldID);
var strButtonLink = '<a href="#" onclick="ExpandCollapseAllButtonClick(\'' + strMainTableID + '\',\'' + strHiddenFieldID + '\');">';
if (objHiddenField.value == 'True')
{
strButtonLink += '<img src="images/expand.gif" alt="+" border="0" />';
}
else
{
strButtonLink += '<img src="images/collapse.gif" alt="-" border="0" />';
}
strButtonLink += '</a>';
objMainTable.rows[0].cells[0].innerHTML = strButtonLink;
}
function ExpandCollapseAllButtonClick(strMainTableID,strHiddenFieldID)
{
var objMainTable = document.getElementById(strMainTableID);
var objHiddenField = document.getElementById(strHiddenFieldID);
var strButtonLink = '<a href="#" onclick="ExpandCollapseAllButtonClick(\'' + strMainTableID + '\',\'' + strHiddenFieldID + '\');">';
if (objHiddenField.value == 'True')
{
strButtonLink += '<img src="images/collapse.gif" alt="-" border="0" />';
objHiddenField.value = 'False';
}
else
{
strButtonLink += '<img src="images/expand.gif" alt="+" border="0" />';
objHiddenField.value = 'True';
}
strButtonLink += '</a>';
objMainTable.rows[0].cells[0].innerHTML = strButtonLink;
ExpandCollapseAll(objMainTable,objHiddenField,false);
}
function ExpandCollapseAll(objMainTable,objHiddenField,blnNoHeader)
{
if (objMainTable != null)
{
try
{
var expandClass = objMainTable.attributes.getNamedItem('expandClass').value;
var collapseClass = objMainTable.attributes.getNamedItem('collapseClass').value;
var expandText = objMainTable.attributes.getNamedItem('expandText').value;
var collapseText = objMainTable.attributes.getNamedItem('collapseText').value;
var i = 0;
if (blnNoHeader == false)
{
i = 1;
}
for (i; i < objMainTable.rows.length; i+=2)
{
var row = objMainTable.rows[i];
var row1 = objMainTable.rows[i+1];
var ihExp = row.cells[0].getElementsByTagName('input').item(0);
var ctl = row.cells[0].getElementsByTagName('a').item(0);
if (!ihExp || !ctl)
{
continue;
}
if (objHiddenField.value == 'False')
{
row1.style.display = '';
ctl.innerHTML = collapseText;
ctl.className = collapseClass;
ihExp.value = '1';
}
else
{
row1.style.display = 'none';
ctl.innerHTML = expandText;
ctl.className = expandClass;
ihExp.value = '';
}
}
}
catch(err)
{
}
var objTables = objMainTable.getElementsByTagName('TABLE');
for (var i = 0; i < objTables.length; i++)
{
ExpandCollapseAll(objMainTable.getElementsByTagName('TABLE')[i],objHiddenField,false);
}
}
}
Then add a hidden field to the bottom of the Grid View:
<asp:HiddenField ID="hidCollapsed" runat="server" Value="True" />
And finally add the following to the end of the OnLoad method (VB code):
Dim strScript As New StringBuilder
strScript.AppendLine("<script type=""text/javascript"">")
strScript.AppendLine("AddExpandCollapseAllButton('usercontrolname_maingridviewname','usercontrolname_hidCollapsed');")
strScript.AppendLine("</script>")
Page.ClientScript.RegisterStartupScript(Me.GetType(), "AddClientSideExpandCollapseAllButton", strScript.ToString
modified on Monday, January 31, 2011 11:12 AM
|
|
|
|
|
|
|
I am trying to Expand the rows with the following columns . right now Order column opens a new page when clicked on a row item but I am want to expand the row based on ordernumber when clicked on that row assigned with a " +" to expand the details instead of opening in new page I want to open that page in the same screen. How can do that expanding rows without going to other page and showing the details in the same grid
<asp:templatecolumn headertext="chkNumber">
<headerstyle horizontalalign="center"></headerstyle>
<%# DataBinder.Eval(Container.DataItem, "chkNumber") %>
<asp:templatecolumn headertext="Order">
<headerstyle horizontalalign="center"></headerstyle>
<%# DataBinder.Eval(Container.DataItem, "OrderNumber") %>
<asp:templatecolumn headertext="Order Date">
<headerstyle horizontalalign="center"></headerstyle>
<%# DataBinder.Eval(Container.DataItem, "OrderDate") %>
I would appreciate any help with this.
|
|
|
|
|
|
|
Hey, This error is really bugging me.
Do you have any advice on what I am forgetting or what I set up wrong? (I'm a .NET developer but no exp. points for javascripting  )
Any help is much appreciated!!!!!!!
Grtz,
B.
|
|
|
|
|
|
|
Never mind, I found it. I n00bed out on the jscript.
Since I added an additonal < font > tag for the < TD > I had to add an extra parentNode to the jscript function.
|
|
|
|
|
|
|
Anyway to preform a postback when clicking the expand button?
Thanks
|
|
|
|
|
|
|
As the code is posted on the site there is no option to do a postback when clicking the expand button. But you can modify the javascript code for the expand button to do also the postback.
If you can't explain something to a six year old, you really don't understand it yourself. (Albert Einstein)
|
|
|
|
|
|
|
Any advice on how to do this correctly?
I put this in code. (__doPostBack('ctl', 'MyCustomArgument');)
It did do a postback but lost data and button
modified on Sunday, December 27, 2009 8:05 PM
|
|
|
|
|
|
|
Hello,
This article is very helpfull.But need one more level down.I tried to change some code but didn't work.Did anyone tried this?
Thanks in advance.
|
|
|
|
|
|
|
Actually you can add as many levels you want and you don't need to change the control's code in order to do this.
If you can't explain something to a six year old, you really don't understand it yourself. (Albert Einstein)
|
|
|
|
|
|
|
Thanks Andrie for your quick reply.Here is what i have done,please suggest any changes required.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestGridControl.ascx.cs" Inherits="TestGridControl" %>
<%@ Register Namespace="CustomControls" TagPrefix="cc" %>
<cc:ExtGridView runat="server" EnableViewState="False" ID="gridCustomers" AutoGenerateColumns="False"
OnPageIndexChanging="gridCustomers_PageIndexChanging"
ExpandButtonCssClass="GridExpandCollapseButton" CollapseButtonCssClass="GridExpandCollapseButton"
ExpandButtonText="+" CollapseButtonText="-"
GridLines="None" CellPadding="3" ForeColor="#333333" AllowPaging="True" PageSize="5" >
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" />
<asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:TemplateField>
<ItemTemplate>
<cc:ExtGridView runat="server" ID="gridOrders" AutoGenerateColumns="False"
ExpandButtonText="<img src='Images/expand.gif' alt='+' border='0' />" CollapseButtonText="<img src='Images/collapse.gif' alt='-' border='0' />"
style="margin-left:30px;" CellPadding="3" ForeColor="#333333" GridLines="None">
<Columns>
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate" />
<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate" />
<asp:BoundField DataField="ShipName" HeaderText="ShipName" />
<asp:TemplateField>
<ItemTemplate>
<cc:ExtGridView runat="server" ID="gridOrderDetails" AutoGenerateColumns="False"
ExpandButtonText="<img src='Images/expand.gif' alt='+' border='0' />" CollapseButtonText="<img src='Images/collapse.gif' alt='-' border='0' />"
style="margin-left:30px;" CellPadding="4" ForeColor="#333333" GridLines="None">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
<asp:BoundField DataField="Quantity" HeaderText="Quantity" />
<asp:BoundField DataField="Discount" HeaderText="Discount" />
<asp:BoundField DataField="ExtendedPrice" HeaderText="ExtendedPrice" />
<asp:TemplateField>
<ItemTemplate>
<asp:GridView runat="server" ID="gridOrderDetailsChild" AutoGenerateColumns="False"
BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal" style="margin-left: 30px;">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
<asp:BoundField DataField="Quantity" HeaderText="Quantity" />
<asp:BoundField DataField="Discount" HeaderText="Discount" />
<asp:BoundField DataField="ExtendedPrice" HeaderText="ExtendedPrice" />
</Columns>
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingRowStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</cc:ExtGridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</cc:ExtGridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#EFF3FB" />
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
</cc:ExtGridView>
<asp:SqlDataSource ID="dsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * FROM Orders WHERE CustomerID = @CustomerID">
<SelectParameters>
<asp:Parameter Name="CustomerID" />
</SelectParameters>
</asp:SqlDataSource>
--ascx.cs changes
void gridOrders_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridView gridOrderDetails = e.Row.FindControl("gridOrderDetails") as GridView;
gridOrderDetails.RowCreated += new GridViewRowEventHandler(gridOrderDetails_RowCreated);
NorthWindDataSet.OrdersRow dataRow = (e.Row.DataItem as DataRowView).Row as NorthWindDataSet.OrdersRow;
NorthWindDataSet.OrderDetailsExtendedDataTable dtOrderDetails = taOrderDetails.GetDataByOrderID(dataRow.OrderID);
gridOrderDetails.DataSource = dtOrderDetails;
(e.Row as ExtGridViewRow).ShowExpand = dtOrderDetails.Rows.Count > 0;
}
}
void gridOrderDetails_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridView gridOrderDetailsChild = e.Row.FindControl("gridOrderDetailsChild") as GridView;
//gridOrderDetails.RowCreated += new GridViewRowEventHandler(gridOrderDetails_RowCreated);
NorthWindDataSet.OrdersRow dataRow = (e.Row.DataItem as DataRowView).Row as NorthWindDataSet.OrdersRow;
NorthWindDataSet.OrderDetailsExtendedDataTable dtOrderDetailsChild = taOrderDetails.GetDataByOrderID(10643);
gridOrderDetailsChild.DataSource = dtOrderDetailsChild;
(e.Row as ExtGridViewRow).ShowExpand = gridOrderDetailsChild.Rows.Count > 0;
}
}
|
|
|
|
|
|
|
I am getting following error while binding data to label control in second level grid.
Databinding methods such as Eval(), XPath(), and Bind() can only be used in the context of a databound control.
Any help will be greatly appriciated.
thanks,
Vidya
|
|
|
|
|
|
|
Hi,
I am using link button in the template column of the child grid,but click event is not firing.
Also Grid events like rowdatabound also not firing in the second level grid.
Thanks,
Vidya.
|
|
|
|
|
|
|
|
|
|
Is there any work around??
|
|
|
|
|
|
|
Did you get any work around for this?
The child grid is not recognised during page load
|
|
|
|
|
|
|
You can try to to the data binding as early as possible in the page lifecycle, if possible before PageLoad, in Init or PreLoad.
If you can't explain something to a six year old, you really don't understand it yourself. (Albert Einstein)
|
|
|
|
|
|
|
I implement it and working fine.. But i have one problem.. I want to populate GridView on the basis of Selection of item that is in DropDownList...
When i select the item of DropDownList.. Gridview doesn't show me it's child content and not collapsible image...
How we retain a child Gridview Data After Postback..
|
|
|
|
|
|
|
If you add select,edit command column in the ExtGridView, you got problems!!!
异常详细信息: System.NullReferenceException: 未将对象引用设置到对象的实例。
源错误:
行 34: //GridView1.SelectedIndexChanged += new EventHandler(GridView1_SelectedIndexChanged);
行 35: GridView DetailGridView = e.Row.FindControl("GridView2") as GridView;
行 36: DataSet1.elelockapplyRow dataRow = (e.Row.DataItem as DataRowView).Row as DataSet1.elelockapplyRow;
行 37: DataSet1.elelockapplydetailDataTable dt = LockDetailAdapter.GetData(dataRow.ApplyID);
行 38: DetailGridView.DataSource = dt;
|
|
|
|
|
|
|
Hi wehen clicking on expand/collapse all first level grid of first row is missing.I have checked the rendered HTMl and i didnt find any difference.
Can any body help.I have included expand/collapse all in the grid header.
below i am providing the code below can any body help...
function TglHeaderRow(v)
{
//////////////////////////
var tbl = document.getElementById("grdTransmissions");
TglHederImage(tbl);
var expandClass = tbl.attributes.getNamedItem('expandClass').value;
var collapseClass = tbl.attributes.getNamedItem('collapseClass').value;
var expandText = tbl.attributes.getNamedItem('expandText').value;
var collapseText = tbl.attributes.getNamedItem('collapseText').value;
for (var i = 1; i < tbl.rows.length; i+=2)
{
var row = tbl.rows[i];
var row1 = tbl.rows[i+1];
var ihExp = row.cells[0].getElementsByTagName('input').item(0);
var ctl = row.cells[0].getElementsByTagName('a').item(0);
if (!ihExp || !ctl)
{
continue;
}
if (row1.style.display == 'none')
{
row1.style.display = '';
ctl.innerHTML = collapseText;
ctl.className = collapseClass;
ihExp.value = '1';
}
else
{
row1.style.display = 'none';
ctl.innerHTML = expandText;
ctl.className = expandClass;
ihExp.value = '';
}
}
}
function TglHederImage(tbl)
{
var expandClass = tbl.attributes.getNamedItem('expandClass').value;
var collapseClass = tbl.attributes.getNamedItem('collapseClass').value;
var expandText = tbl.attributes.getNamedItem('expandText').value;
var collapseText = tbl.attributes.getNamedItem('collapseText').value;
var row = tbl.rows[0];
var row1 = tbl.rows[1];
var ihExp = row.cells[0].getElementsByTagName('input').item(0);
var ctl = row.cells[0].getElementsByTagName('a').item(0);
if (row1.style.display == 'none')
{
row1.style.display = '';
ctl.innerHTML = expandText;
ctl.className = expandClass;
ihExp.value = '';
}
else
{
row1.style.display = 'none';
ctl.innerHTML = collapseText;
ctl.className = collapseClass;
ihExp.value = '1';
}
}
|
|
|
|
|
|
|
by default expand/collapse button is hide but inner grid display is visible
i want to display inner grid without expand/collapse button how it is possible.
and how can disable expand/collapse button .
we can't open or close inner grid using expand/collapse button.
Please help me.
thank you. 
|
|
|
|
|
|
|
by default expand/collapse button is hide but inner grid display is visible
i want to display inner grid without expand/collapse button how it is possible.
Please help me.
thank you.
|
|
|
|
|
|
|
Can anybody help me, how to achive sorting with up and down imagesthis grid..
Its a critical requirement and help will be appriciated...
|
|
|
|
|
|
|
As I wrote in the article this is just the regular ASP.NET GridView (only the rendering being modified). All the GridView behaviours, including sorting, should work in the same way for the ExtGridView.
If you can't explain something to a six year old, you really don't understand it yourself. (Albert Einstein)
|
|
|
|
|
|
|
I can do sorting but I amunable to add up and down arrow images to columns to which sorting is enabled.
I am trying to override onsort method to add images but images are not displaying and I am unable to figure out the problem.
Please help me..
Thanks,
Vidya
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Rant 
Admin