ASP.NET AJAX Control Toolkit

Re: How to access datagrid seleted index change event inside an accordion control?

sillysoumare — Fri, 08 Aug 2008 00:01:36 GMT

I have fixed it by removing the selectedindex event in the .cs file and changing the HTML file as follow. This way when the you click on the link it will take you to the page you are looking for and it will concatenate the ProjectId at the of the URL.

<ajaxToolkit:AccordionPane ID="apReport" runat="server">

<Header>Reports</Header>

<asp:DataGrid id="dgReports" GridLines="None" CellSpacing ="0" CellPadding ="0" ShowHeader="false" AutoGenerateColumns="False" AllowSorting="false" runat="server" DataKeyField="ProjectID">

<asp:TemplateColumn Visible="False" HeaderText="Project ID">

<asp:Label ID="lblProjectID" runat="server"

Text='<%# DataBinder.Eval(Container, "DataItem.ProjectID") %>'>

</asp:Label>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn >

<li>

<a href='IssueReport.aspx?ProjectId=<%# DataBinder.Eval(Container.DataItem,

"ProjectId")%>'><%# DataBinder.Eval(Container.DataItem, "ProjectName")%>

</a>

</li>

</ul>

</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:datagrid>

</Content>

</ajaxToolkit:AccordionPane>

Re: How to access datagrid seleted index change event inside an accordion control?

sillysoumare — Thu, 07 Aug 2008 14:41:38 GMT

It is not working.

My problem is the event gets fired after clicking on it the second time. I would like to be able to clik on it just once.

Re: How to access datagrid seleted index change event inside an accordion control?

Zhi-Qiang Ni - MSFT — Thu, 07 Aug 2008 04:50:26 GMT

Hi sillysoumare,

I have built a test application based on your situation, and all the event which is inside the AccordionPane’s Content area could be fired normally. I built the page by following the method which I provided above:

Create the LinkButton and its Click event outside the Template, then move it into the Template tag.
Create the DataGrid and its SelectedIndexChanged event outside, then move it into the AccordionPane’s Content tag.
In the DataGrid, I add two Columns- the Select Command Column & the Template Column to test the events separately.

Please refer to my code here:

.aspx file

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestDataGridInAccordion.aspx.cs"
    Inherits="SoluTest_CSApplication.TestDataGridInAccordion" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="Stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelect" ContentCssClass="accordionContent"
            FadeTransitions="True" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"
            RequireOpenedPane="false" SuppressHeaderPostbacks="true">
            <Panes>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        <p>
                            This is the header area! Please click a link.</p>
                    </Header>
                    <Content>
                        <asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False"
                            CellPadding="0" OnSelectedIndexChanged="DataGrid1_SelectedIndexChanged">
                            <Columns>
                                <asp:ButtonColumn HeaderText="Command" CommandName="Select" Text="Select" DataTextField="Field1">
                                </asp:ButtonColumn>
                                <asp:TemplateColumn HeaderText="Template">
                                    <ItemTemplate>
                                        <ul style="list-style-type: square">
                                            <li>
                                                <asp:LinkButton ID="lbtnReport" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Field1") %>'
                                                    CausesValidation="False" OnClick="lbtnReport_Click"></asp:LinkButton>
                                            </li>
                                        </ul>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                            </Columns>
                        </asp:DataGrid>
                    </Content>
                </cc1:AccordionPane>
            </Panes>
        </cc1:Accordion>
        The result:
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString.ProviderName %>"
            SelectCommand="SELECT [ID], [Field1] FROM [AssName]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

.aspx.cs file

    public partial class TestDataGridInAccordion : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void DataGrid1_SelectedIndexChanged(object sender, EventArgs e)
        {
            SelectedChanged(sender, e);
        }

        protected void lbtnReport_Click(object sender, EventArgs e)
        {
            SelectedChanged(sender, e);
        }

        private void SelectedChanged(object sender, EventArgs e)
        {   
            LinkButton lnkBtn = new LinkButton();
            if (sender is DataGrid)
            {
                lnkBtn = (LinkButton)DataGrid1.SelectedItem.FindControl("lbtnReport");
            }
            else if (sender is LinkButton)
            {
                lnkBtn = (LinkButton)sender;
            }
                Label1.Text = "You have selected " + lnkBtn.Text;
        }

    }

You may modify it with yours and tell me the result.

Best regards,

Zhi-Qiang Ni

Re: How to access datagrid seleted index change event inside an accordion control?

sillysoumare — Wed, 06 Aug 2008 14:18:11 GMT

If I move the datagrid out of the Content Pane of the accordion, the selected index changed event works fine. But when I place the datagrid inside the Content Pane of the accordion control it does fire the selected index changed event, even when I add a Select Command Column in the HTML designer.

One thing I realized is that by adding and Item Command event it works fine but I have to click on the grid items twice for the event to get fired. And that's not what I want.

Could you please help me on this?

Re: How to access datagrid seleted index change event inside an accordion control?

Zhi-Qiang Ni - MSFT — Wed, 06 Aug 2008 09:16:29 GMT

Hi sillysoumare,

From your description, I understand that your situation is to use the DataGrid in the Content area of the AccrodionPane and the issue is the SelectedIndexChanged event of the DataGrid can’t be fired.

I have tested your code locally. Actually, there is an easy method that we can follow to resolve your issue:

Let’s build the Accordion and the DataGrid separately at first.
Band the DataGrid to a DataBase and tie a function to its SelectedIndexChanged event by clicking the DataGrid in the design view.
Check if the SelectedIndexChanged event could be fired or not. (Note: add a select command column.)
If yes, place this DataGrid into the Content area of the AccrodionPane by moving the DataGrid’s tag in the design page.

Then you will find the function which handles the SelectedIndexChanged event can still be fired.

Have my suggestions resolved your issue?

Best regards,

Zhi-Qiang Ni

Re: How to access datagrid seleted index change event inside an accordion control?

sillysoumare — Fri, 01 Aug 2008 16:07:06 GMT

I am actually using a datagrid. Here is what I have added according to your explanation

protected void dgReports_ItemCreated(object sender, DataGridItemEventArgs e)

{

if (e.Item.ItemType == ListItemType.Item)

{

dgReports.SelectedIndexChanged += new EventHandler(dgReports_SelectedIndexChanged);

}

but when I do this the SelectedIndexChanged event does not get fired.

Re: How to access datagrid seleted index change event inside an accordion control?

AMR_PHASE — Fri, 01 Aug 2008 14:13:21 GMT


protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e){

// Only perform the operation for data rows, header and footer will be skipped.
// note this does not determine if the row is in edit mode 

if (e.Row.RowType == DataControlRowType.DataRow){ 

/// Get a reference to the button, note that the indexes may need to be adjusted to your case.

LinkButton btn = (LinkButton)e.Row.Cells[0].Controls[0];

// Attach the handler.
btn.Click += new EventHandler(btn_Click);

}

}private void btn_click(object sender, EventArgs e) 
{

/// Do something here...
Trace.Write("Hello World");

}

Re: How to access datagrid seleted index change event inside an accordion control?

sillysoumare — Fri, 01 Aug 2008 05:19:24 GMT

Could you please provide example of code, not just theory?

Thanks

Re: How to access datagrid seleted index change event inside an accordion control?

AMR_PHASE — Fri, 01 Aug 2008 02:40:51 GMT

Since you are using a template control inside the update panel you probably need to re-attach the event handler for your event. AutoWireup will not always re-create the handler. the best option is to re-associate the event handler for the link button (e.g select) during the grid_rowcreated event

How to access datagrid seleted index change event inside an accordion control?

sillysoumare — Thu, 31 Jul 2008 23:28:34 GMT

I have this code below in html.

<ajaxToolkit:Accordion ID="accMenu" runat="server" AutoSize ="None" ContentCssClass="accordionContent"

FadeTransitions="true" FramesPerSecond="40" HeaderCssClass="accordionHeader"

HeaderSelectedCssClass="accordionHeaderSelected" RequireOpenedPane="false"

SelectedIndex="-1" SuppressHeaderPostbacks="true" TransitionDuration="250"

Width ="180" >

<Panes>

<ajaxToolkit:AccordionPane ID="apReport" runat="server">

<Header>Reports</Header>

<asp:DataGrid id="dgReports" GridLines="None" CellSpacing ="0"

CellPadding ="0" ShowHeader="false" OnSelectedIndexChanged = "dgReports_SelectedIndexChanged"

AutoGenerateColumns="False" AllowSorting="false" runat="server" DataKeyField="ProjectID">

<asp:TemplateColumn Visible="False" HeaderText="Project ID">

<asp:Label ID="lblProjectID" runat="server"

Text='<%# DataBinder.Eval(Container, "DataItem.ProjectID") %>'>

</asp:Label>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn >

<li>

<asp:LinkButton ID="lbtnReport" runat="server"

Text='<%# DataBinder.Eval(Container, "DataItem.ProjectName") %>'

CausesValidation="False" ></asp:LinkButton>

</li>

</ul>

</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:datagrid>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

The code in C# does not get fired for SelectedIndexChanged Event.

protected void dgReports_SelectedIndexChanged(object sender, EventArgs e)

{

try

{

DataGridItem lobjItem = dgReports.Items[dgReports.SelectedIndex];

int projectId = Int32.Parse(((Label)lobjItem.FindControl("lblProjectID")).Text);

Response.Redirect("IssueReport.aspx?ProjectId=" + projectId.ToString(), false);

}

catch (Exception ex)

{

throw new Exception(ex.Message);

}