Another Nested Datalist Inside Gridview Problem?

pointeman
pointeman used Ask the Experts™
on
I'm having difficulty Binding the nested DataList duing the GridVeiw Bind. The goal is to have a photo to the left and details to the right. So far not errors, but also not DataList Binding either.

[Goal Result]
__________
|                  |    Title.....................
|                  |
|     photo    |    Description.........
|                  |    ...........................
|                  |    ...........................
|_________|

[code]

<asp:GridView ID="GridView1" runat="server" Width="100%" AllowPaging="True"
                    AutoGenerateColumns="False" Font-Names="Arial" Font-Size="Small"
                    OnRowDataBound="GridView1_RowDataBound"
                    Height="38px" HorizontalAlign="Center" OnPageIndexChanging="GridView1_PageIndexChanging"
                    PagerSettings-Mode="NextPrevious" PagerSettings-NextPageText="Next"
                    PagerSettings-PreviousPageText="Back">
                    <PagerSettings NextPageText="Next" PreviousPageText="Back" />
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:ImageButton ID="ibtngrid0" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Photo") %>'
                                    Height="50" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Photo") %>' OnCommand="ImageButton1_Command"
                                    Width="70" />
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" Width="100px" />
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:DataList ID="DataList1" runat="server" RepeatDirection="Vertical" Visible="true">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTitle" Text='<%# DataBinder.Eval(Container.DataItem, "Title") %>' Font-Bold="True" runat="Server" /><br />
                                        <asp:Label ID="lblDescr" Text='<%# DataBinder.Eval(Container.DataItem, "Descr") %>' runat="Server" /><br />
                                    </ItemTemplate>
                                </asp:DataList>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:GridView>

[Code Behind]
protected void GridView1Bind()
    {
        DataList dataList1 = (DataList)GridView1.FindControl("DataList1");
        dataList1 = new DataList();
        dt = new DataTable();
        SqlConnection cn = new SqlConnection(cnPath);
        SqlDataAdapter da = new SqlDataAdapter(" Select Photo, Title, Descr From Schedule_Artist", cn);
        cn.Open();
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        dataList1.DataSource = dt;
        dataList1.DataBind();
        cn.Close();
    }
       
   
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solutions Only
guru_sami
Top Expert 2013

Commented:
looks you have two dataList1 defined:
1:DataList dataList1 = (DataList)GridView1.FindControl("DataList1");
2: dataList1 = new DataList();
2 is what being DataBound and not the 1..which is in the GridView...
So try removing line 2...
Top Expert 2013
Commented:
Also ..
First ...If you want to display Photo in the First Colum and  Details in the second column...you don't need DataList you can just format the output in ItemTemplate using two Labels as well or ul-li tags...
Secondly...
If you want to display details on the right only when user clicks on the photo then also you don't need DataList inside the GV...but you can use DetailsView outside the GV and show details as per the need..
Third..
This..--> DataList dataList1 = (DataList)GridView1.FindControl("DataList1");
might give you null because the DataList1 is inside the template and I think thats the reason you added that second datalist1....
So please clarify what is the exact way you want to show the description....
jinal

Commented:
You have to handle GrdView OnRowDataBound event.

In that you have to find out DataList and bind over there.

DataList dl = e.Row.FindControl("DataList1") as DataList;
dl.DataSource = "source for datalist";
dl.DataBind();

Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Learn More!
jinal

Commented:
Also all of your field Photo,Title , Desc is in single from datasource (datatable) . then you can also avoid to used datalist . Just use TemplateField and inside that Format data using Table so no need for DataList.
pointeman

Author

Commented:
Yea, understood on the overkill. I've used many DataList's before, but never nested like this. So, another GridView </asp:TemplateField> and two labels for the second column would be much simpler code. Also, forgot to mention needed code funtion clearly.

1. Photo appears on Left and Title, Description on right at same time at page load.
2. Photo click simply fires Response.Redirect to persons bio page.
pointeman

Author

Commented:
Also, I did receive a null reference exception concerning the DataList1. Although I'll probably use a single GridView, I would still like to know how to successfully nest a DataList inside a GridView.
jinal
Commented:
Try attached gridview . That solve formatting problem with use of just main grid.

<asp:GridView ID="GridView1" runat="server" Width="100%" AllowPaging="True"
                    AutoGenerateColumns="False" Font-Names="Arial" Font-Size="Small"                    
                    Height="38px" HorizontalAlign="Center" OnPageIndexChanging="GridView1_PageIndexChanging"
                    PagerSettings-Mode="NextPrevious" PagerSettings-NextPageText="Next"
                    PagerSettings-PreviousPageText="Back">
                    <PagerSettings NextPageText="Next" PreviousPageText="Back" />
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:ImageButton ID="ibtngrid0" runat="server" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Photo") %>'
                                    Height="50" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Photo") %>' OnCommand="ImageButton1_Command"
                                    Width="70" />
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" Width="100px" />
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>                                
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                <tr>
                                    <td>
                                        <asp:Label ID="lblTitle" Text='<%# DataBinder.Eval(Container.DataItem, "Title") %>' Font-Bold="True" runat="Server" ></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblDescr" Text='<%# DataBinder.Eval(Container.DataItem, "Descr") %>' runat="Server" />
                                    </td>
                                </tr>
                            </table>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:GridView>

Open in new window

jinal
Commented:
For dataList under gridview .. GridView RowBound image should look like this.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataList lst =  e.Row.FindControl("DataList1") as DataList;
            lst.DataSource = "your data source for list";
            lst.DataBind();
        }
    }

Open in new window

jinal

Commented:
As your example single dataitem that you want to use DataList. DataList required Datasource of IList or iListDataSource type so use RowBound for your example.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            List<DataRowView> lstDataList = new List<DataRowView>();
            lstDataList.Add(((DataRowView)e.Row.DataItem));
            DataList lst =  e.Row.FindControl("DataList1") as DataList;
            lst.DataSource = lstDataList;
            lst.DataBind();
        }
    }

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial