SQL DataSource and ASP.NET control in Grid ItemTemplate

[Greg]

Hello-
I'm having an issue with the RadGrid ItemTemplate.

I'm using the RadGrid to display three items per page.  The RadGrid gives me the fexiblity to use the ItemTemplate as well as the PagerTemplate, etc.

My issue is the following:
Inside the RadGrid > MasterTableView > ItemTemplate i have html code.  Inside this html code i need to bind a control to a second data source.  When i try this my page doesn't show what i would expect to have rendered.  When i debug using Firebug i don't see the value being set, nor do i see the control being loaded.

Of note, the second SQLDatasource is taking the ArticleID from the RadGrid control to create the proper recordset.  Running this SQL statement against the database gives me the proper COUNT that i'm looking for.

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:LionsConnectionString %>"
        SelectCommand="SELECT ArticleTitle, ArticleContent, ArticleDateTime, ArticleID FROM tblLionsArticles ORDER BY ArticleDateTime DESC">
    </asp:SqlDataSource>
    <telerik:RadGrid ID="RadGrid2" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1"
        EnableEmbeddedSkins="False" GridLines="None" PageSize="3" ShowHeader="False"
        OnItemCreated="RadGrid1_ItemCreated">
        <HeaderContextMenu EnableEmbeddedSkins="False">
        </HeaderContextMenu>
        <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="ArticleID">
            <ItemTemplate>
                <div class="apost">
                    <%# Convert.ToDateTime(Eval("ArticleDateTime"))>=(DateTime.Now.AddDays(-7)) ? "<div class='firstPost'></div>" : ""%>
                    <div class="first">
                    </div>
                    <div class="inner">
                        <div class="inner">
                            <div class="media">
                                <a href='articles/default.aspx?ArticleID=<%# DataBinder.Eval (Container.DataItem, "ArticleID") %>'>
                                    <img alt="" height="199" src="http://site/image.jpg"
                                        width="135" /></a>
                            </div>
                            <h2 id="post-181">
                                <a href='articles/default.aspx?ArticleID=<%# DataBinder.Eval (Container.DataItem, "ArticleID") %>'
                                    rel="bookmark" title='<%# DataBinder.Eval (Container.DataItem, "ArticleTitle") %>'>
                                    <asp:Label ID="ArticleTitle" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "ArticleTitle") %>'></asp:Label>
                                </a>
                            </h2>
                            <ul class="info">
                                <li class="ptime">Posted on:
                                    <asp:Label ID="ArticleDateTime" runat="server" Text=' <%#Convert.ToDateTime(DataBinder.Eval (Container.DataItem, "ArticleDateTime")).AddHours(3) %>'></asp:Label>
                                </li>
                                <li class="pcomm">Those Who Had Their Say:
                                    <asp:SqlDataSource ID="SqlDataSource_FV1" runat="server" ConnectionString="<%$ ConnectionStrings:LionsConnectionString %>"
                                        SelectCommand="SELECT COUNT(Art_Comment_Rating) AS 'Art_Comment_Rating_Count' FROM [tblLionsArticlesComments] WHERE ([ArticleID] = @ArticleID)">
                                        <SelectParameters>
                                            <asp:ControlParameter ControlID="RadGrid2" Name="ArticleID" PropertyName="SelectedValue"
                                                Type="Empty" />
                                        </SelectParameters>
                                    </asp:SqlDataSource>
                                    <asp:DataList ID="DataList1" DataSourceID="SqlDataSource_FV1" runat="server">
                                    <ItemTemplate>
                                    <asp:Label ID="Greg" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "Art_Comment_Rating_Count") %>'></asp:Label>
                                    </ItemTemplate>
                                    </asp:DataList>
                                </li>
                            </ul>
                            <div class="pmain">
                                <!-- spost -->
                                <asp:Label ID="ArticleContent" runat="server" Text='<%# Truncate(DataBinder.Eval (Container.DataItem, "ArticleContent")) %>'></asp:Label>
                                <!-- epost -->
                            </div>
                            <ul class="pfoot">
                                <li><a href='articles/default.aspx?ArticleID=<%# DataBinder.Eval (Container.DataItem, "ArticleID") %>'>
                                    continue reading post »</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="second">
                    </div>
                </div>
            </ItemTemplate>

This is the start of the RadGrid and ends at the ItemTemplate.  As you can see i have a second SQLDataSource in the ItemTemplate and then i bind the value to a label.  

But when i execute this code it doesn't show up. I see the following from firebug:

iv id="ctl00_ContentPlaceHolder1_RadGrid2" class="RadGrid RadGrid_Default" tabindex="0">
<table id="ctl00_ContentPlaceHolder1_RadGrid2_ctl00" class="rgMasterTable" cellspacing="0" border="0" style="width: 100%; table-layout: auto; empty-cells: show;">
<colgroup>
</colgroup>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr id="ctl00_ContentPlaceHolder1_RadGrid2_ctl00__0" class="rgRow">
<td colspan="4">
<div class="apost">
<div class="first"> </div>
<div class="inner">
<div class="inner">
<div class="media">
</div>
<h2 id="post-181">
</h2>
<ul class="info">
<li class="ptime">
</li>
<li class="pcomm">Those Who Had Their Say: </li>
</ul>
<div class="pmain">
</div>
<ul class="pfoot">
</ul>
</div>
</div>
<div class="second"> </div>

With the important part being:

<li class="pcomm">Those Who Had Their Say: </li>

After the ":" i would expect to see my databinded label but i see nothing. I have tried with many different .NET controls that can be databinded...and nothing works.

Should i expect this to work?  How do i get this to work?  I have seen people nest Repeaters and Grids...but not sure about doing so inside and ItemTemplate.

Thanks,
Greg
 

[Radoslav]

Hello Greg,

I looked through your code and I think that the problem is caused by your second datasource. As select parameter it use RadGrid2.SelectedValue, however when the grid item is created the SelectedValue is null, so the second SqlDataSource always execute the query where ArticleID = null.
The solution of the problem is to add into RadGrid ItemTemplate hidden label  which is bound to ArticleID:

<asp:Label ID="LabelArticleID" Visible="false" runat="server" Text='<%# DataBinder.Eval (Container.DataItem, "ArticleID") %>'></asp:Label>

Now you could use the text property of the label as Parameter for the second SqlDataSource:

<asp:ControlParameter ControlID="LabelArticleID" Name="ArticleID" PropertyName="Text" Type="Empty" />

Additionally I am sending you the simple example based on your code which demonstrates how to achieve the desired functionality.

I hope this helps.

Best wishes,
Radoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Greg]

Thank you!  This worked perfectly.  This opens up a whole new level of UI experience for me.

Greg