ClientDataSource and NestedViewTemplate Grid

6 posts, 0 answers
  1. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 08 Jul 2014 Link to this post

    Hi,
    I'm trying to populate the nestedviewtemplate in my grid..

    If I use <# Eval("Code")%> in NestedViewTemplate I've got an error
    <telerik:RadGrid ID="HomeRadGrid" runat="server" ClientDataSourceID="RadClientDataSource1"
                 EnableEmbeddedSkins="False" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True"
                 Skin="MySkin" ShowGroupPanel="True" PageSize="10">
                 <PagerStyle Mode="NextPrevAndNumeric" />
                 <MasterTableView AutoGenerateColumns="False" ClientDataKeyNames="Id" HierarchyLoadMode="Client">                 
                     <NestedViewTemplate>
                         <div class="homeBackground">
                             <div style="float: left; padding-left: 10px; padding-top: 10px">
                                 <asp:Image ID="ItemImage" runat="server" ImageUrl='<%# GetItemImageUrl(Container) %>'
                                     Width="150px" meta:resourcekey="ItemImageResource1" />
                             </div>
                             <div style="float: left; padding-left: 10px; width: 50%">
                                 <div class="homeTitle">
                                     <asp:Label ID="CodeLabel" runat="server"></asp:Label>
                                 </div>
                                 <span style="color: #555555">
                                     <asp:Label ID="DescriptionLabel" runat="server"></asp:Label>
                                 </span>
                                 <hr class="lineSeparator" />
                                 <table width="100%" class="homeInfo">
                                     <tr>
                                         <td>
                                             <strong>
                                                 <asp:Label ID="SiteLabel" runat="server" meta:resourcekey="SiteLabelResource1">Site</asp:Label>:</strong>
                                             <asp:Label ID="SiteLabel" runat="server"></asp:Label>
                                         </td>
                                     </tr>
                                     <tr>
                                         <td>
                                             <strong>
                                                 <asp:Label ID="PlateLabel" runat="server" meta:resourcekey="PlateLabelResource1">Plate</asp:Label>:</strong>
                                             <asp:Label ID="TargaLabel" runat="server"></asp:Label>
                                         </td>
                                     </tr>
                                 </table>
                             </div>
                             <div style="float: right; padding-right: 10px; padding-left: 10px; padding-top: 10px">
                                 <div style="width: 150px; height: 150px; border: solid 1px black" id='smallmap'>
                                 </div>
                             </div>
                             <div style="clear: both">
                             </div>
                         </div>
                     </NestedViewTemplate>
                     <Columns>
                         <telerik:GridBoundColumn DataField="CompanyCode" HeaderText="Company Code" SortExpression="CompanyCode"
                             ShowFilterIcon="false" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains"
                             UniqueName="CompanyCode" Visible="true" meta:resourcekey="GridBoundColumnResource1">
                         </telerik:GridBoundColumn>
                         <telerik:GridBoundColumn DataField="Code" HeaderText="Project" SortExpression="Code"
                             ShowFilterIcon="false" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains"
                             UniqueName="CdcCode" Visible="true" meta:resourcekey="GridBoundColumnResource2">
                         </telerik:GridBoundColumn>
                         <telerik:GridBoundColumn DataField="Site" HeaderText="Site" SortExpression="Site"
                             AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                             ItemStyle-Width="50px" FilterControlWidth="30px" UniqueName="Site" Visible="true"
                             meta:resourcekey="GridBoundColumnResource3">
                             <ItemStyle Width="50px"></ItemStyle>
                         </telerik:GridBoundColumn>     
                         ...
                     </Columns>             
                 </MasterTableView>
                 <ClientSettings ReorderColumnsOnClient="false" AllowDragToGroup="True" AllowColumnsReorder="false">
                     <ClientEvents OnRowDblClick="RowDblClick" OnHierarchyExpanded="LoadSmallMap" OnHierarchyExpanding="CollapseOtherRows">
                     </ClientEvents>
                     <Selecting AllowRowSelect="true"></Selecting>
                 </ClientSettings>
             </telerik:RadGrid>

       <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">
            <ClientEvents OnChange="LoadBigMap" />
            <DataSource>
                <WebServiceDataSourceSettings>
                    <Select Url="load_map.asmx/GetHomeData" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                </WebServiceDataSourceSettings>
            </DataSource>
            <Schema DataName="d">
            </Schema>
            <Schema>
                <Model>
                    <telerik:ClientDataSourceModelField FieldName="Id" DataType="Number" />
                    <telerik:ClientDataSourceModelField FieldName="CompanyCode" DataType="String" />
                    <telerik:ClientDataSourceModelField FieldName="Code" DataType="String" />
                    <telerik:ClientDataSourceModelField FieldName="Site" DataType="String" />
    ...
                </Model>
            </Schema>
        </telerik:RadClientDataSource>

    Thanks
  2. Alex Fuernsinn
    Alex Fuernsinn avatar
    5 posts
    Member since:
    Nov 2013

    Posted 08 Jul 2014 in reply to Stefania Link to this post

    Hi,
    have you forgotten the first % symbol?
    <%# Eval("Code")%>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 08 Jul 2014 in reply to Alex Fuernsinn Link to this post

    It was a copy and paste error.. I have % symbol in my code..

    I made some test..

    1. <%# Eval("Site.Code")%>
    ERROR
    DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'Site'.

    2. <%# Eval("SomeOtherField")%>
     <asp:Label ID="Label1" runat="server" Text='<%# Eval("SomeOtherField")%>'></asp:Label>
    NO ERROR but label text is empty
  5. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 10 Jul 2014 in reply to Stefania Link to this post

    Could you provide me an example using grid with nested view template and ClientDataSource?

    I couldn't find it in telerik demo project

    Thanks
  6. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 11 Jul 2014 Link to this post

    Hello Stefania,

    I am sorry to say but you can not use bind expression to populate the NestedViewTemplate. The reason for this is that the current implementation of the grid does not support hierarchy with client-side data-binding. If using a hierarchical grid is mandatory I recommend binding the grid on the server.

    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 14 Jul 2014 in reply to Angel Petrov Link to this post

    Hi,
    thanks for your reply.

    This is my workaround..

    OnHierarchyExpanded="PopulateNestedView"


    function PopulateNestedView(sender, args) {               
                  if (args) {
                      if (args._dataKeyValues != null) {
                          var item = args.get_gridDataItem()._dataItem;
                          var id = args._dataKeyValues.Id;
                       
                          //popolo i campi del sottogrid
                         
                          var code = item.Code;
                          var desc = item.Description;
                          $('[id$="CodeLabel"]').html(code);
                          $('[id$="DescriptionLabel"]').html(desc);
                          ...
                           
                      }
                  }
              }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017