Horizontal vs Vertical layout in ItemTemplate

[David]

Hi - I've got a table within an ItemTemplate inside a GridTemplate Column in the Columns collection of my MasterTableView.

The default behaviour of the grid appears to run each table corresponding to a vertically rather than horizontally.  How can I specificy the opposite?

The output looks like this:

11:18 1 2:18 2 2:18

14:38 2 3:20 2 5:38

15:30 2 0:52 2 6:30

I want it to look like this:

11:18                          14:38                   15:30

1 2:18                        2  3:20                 2  3:20

2 2:18                        2  5:38                 2  6:30

Here is the code:
                                <telerik:RadGrid id="CheckPointsGrid"
                                    OnNeedDataSource="CheckPointsGrid_NeedDataSource"  
                                    runat="server"
                                    EnableEmbeddedSkins="false"                                
                                    AutoGenerateColumns="false"
                                    HierarchyDefaultExpanded="true"
                                    CommandItemDisplay="None"
                                    Width="100%"
                                    AllowPaging="false"
                                    AllowFilteringByColumn="false">
                                    <MasterTableView AutoGenerateColumns="false"
                                        DataKeyNames="checkpointid"
                                        CommandItemDisplay="None"
                                        ShowHeader="false">

                                        <Columns>
                                            <telerik:GridTemplateColumn>
                                                <ItemTemplate>
                                                    <table cellpadding="0" cellspacing="0" width="42"; style="text-align: right">     
                                                            <tr>
                                                                <td><%# Eval("out")%></td>
                                                            </tr>
                                                            <tr>
                                                                <td><%# Eval("splitplacement")%> <%# Eval("split")%></td>
                                                            </tr>
                                                            <tr>
                                                                <td><%# Eval("overallplacement")%> <%# Eval("overall")%></td>
                                                            </tr>
                                                    </table>                                                
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>

Thanks!!

[Dimo]

Hello David,

Since RadGrid is a table and each table row corresponds to a data item from the datasource, you need a little trick in order to achieve the desired layout. Please refer to the following demo:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[David]

Thanks for the quick reply. 

I've made changes as shown below.  Having done this I appear to have lost the data obtained from my xmldatasource in the "CheckPointsGrid_NeedDataSource" event (also included below).  I now get a "No Records to display" message.    Note that stepping through the code I do seem to be retrieving data as before.  It just doesn't seem to be resolving to anything in the webform using the Eval...

new webform code:
                                <telerik:RadGrid id="CheckPointsGrid"
                                    OnNeedDataSource="CheckPointsGrid_NeedDataSource"  
                                    runat="server"
                                    EnableEmbeddedSkins="false"                                
                                    AutoGenerateColumns="false"
                                    HierarchyDefaultExpanded="true"
                                    CommandItemDisplay="None"
                                    Width="100%"
                                    AllowPaging="false"
                                    AllowFilteringByColumn="false">
                                    <MasterTableView AutoGenerateColumns="false"
                                        DataKeyNames="checkpointid"
                                        CommandItemDisplay="None"
                                        ShowHeader="false"
                                        TableLayout="Fixed">
                                        <ItemTemplate>
                                            <table cellpadding="0" cellspacing="0" width="42"; style="text-align: right">     
                                                    <tr>
                                                        <td><%# Eval("out")%></td>
                                                    </tr>
                                                    <tr>
                                                        <td><%# Eval("splitplacement")%> <%# Eval("split")%></td>
                                                    </tr>
                                                    <tr>
                                                        <td><%# Eval("overallplacement")%> <%# Eval("overall")%></td>
                                                    </tr>
                                            </table>                                                
                                        </ItemTemplate>
                                    </MasterTableView>
                                </telerik:RadGrid>

CheckPointsGrid_NeedDataSource code:

    protected void CheckPointsGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        if (!e.IsFromDetailTable)
        {
            string resultId = ((GridDataItem)((GridTableCell)((RadGrid)source).Parent).Parent).GetDataKeyValue("resultid").ToString();

            XmlDataSource4.XPath = String.Format("Results/Result[@resultid='{0}']/CheckPoints/CheckPoint", resultId);
            ((RadGrid)source).DataSource = XmlDataSource4;
        }
    }

Example XML:
<?xml version="1.0" encoding="utf-8"?>
<Results title="Title Here" cert="true" live="true">
  <Result resultid="1" startpos="" endpos="01" boatnum="23" boatname="">
    <RecognitionList>
      <RecognitionItem recid="1" text="1st Unl" />
    </RecognitionList>
    <TeamMembers>
      <TeamMember memberid="1" type="c" firstname="Jerry" middlename="" lastname="Cochran" age="" state="" entered="" finished="" />
      <TeamMember memberid="2" type="c" firstname="Jeff" middlename="" lastname="Glock" age="" state="" entered="" finished="" />
      <TeamMember memberid="3" type="c" firstname="Tommy" middlename="" lastname="Yonely" age="" state="" entered="" finished="" />
      <TeamMember memberid="4" type="c" firstname="Mike" middlename="" lastname="Rendon" age="" state="" entered="" finished="" />
      <TeamMember memberid="5" type="c" firstname="Kyle" middlename="" lastname="Mynar" age="" state="" entered="" finished="" />
      <TeamMember memberid="6" type="c" firstname="Fred" middlename="" lastname="Mynar" age="" state="" entered="" finished="" />
      <TeamMember memberid="7" type="tc" firstname="Michael" middlename="" lastname="Rask" age="" state="" entered="" finished="" />
    </TeamMembers>
    <CheckPoints>
      <CheckPoint checkpointid="1" name="Staples" out="11:18" split="02:18" overall="02:18" splitplacement="1" overallplacement="2" />
      <CheckPoint checkpointid="2" name="Luling 90" out="14:38" split="03:20" overall="05:38" splitplacement="2" overallplacement="2" />
      <CheckPoint checkpointid="3" name="Zedler" out="15:30" split="00:52" overall="06:30" splitplacement="2" overallplacement="2" />
      <CheckPoint checkpointid="4" name="Palmetto" out="17:50" split="02:20" overall="08:50" splitplacement="2" overallplacement="2" />
      <CheckPoint checkpointid="5" name="Gonzales" out="21:50" split="04:00" overall="12:50" splitplacement="3" overallplacement="2" />
      <CheckPoint checkpointid="6" name="Hochheim" out="02:45" split="04:55" overall="17:45" splitplacement="2" overallplacement="3" />
      <CheckPoint checkpointid="7" name="Cuero 766" out="06:06" split="03:21" overall="21:06" splitplacement="1" overallplacement="2" />
      <CheckPoint checkpointid="8" name="Cuero 236" out="07:56" split="01:50" overall="22:56" splitplacement="1" overallplacement="2" />
      <CheckPoint checkpointid="9" name="Victoria" out="13:26" split="05:30" overall="28:26" splitplacement="2" overallplacement="2" />
      <CheckPoint checkpointid="10" name="Invista" out="18:11" split="04:45" overall="33:11" splitplacement="1" overallplacement="1" />
      <CheckPoint checkpointid="11" name="Saltwater Barrier" out="21:02" split="02:51" overall="36:02" splitplacement="1" overallplacement="1" />
      <CheckPoint checkpointid="12" name="Seadrift" out="00:34" split="03:32" overall="39:34" splitplacement="1" overallplacement="1" />
    </CheckPoints>
  </Result>
</Results>

[Dimo]

Hi David,

You need to remove  AutoGenerateColumns="false"

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[David]

Okay - that worked (somewhat counter-intuitively from my perspective) and I now have the data back.  However, it's still displaying each table vertically rather than horizontally.  The only difference is that it's moved from the far right of the page to the far left.    (refer to the original post in this thread.)

[Dimo]

Hello David,

When you set AutoGenerateColumns="false", no data columns are created by the controls. Since you don't have explicitly defined columns, the RadGrid does not show any data.

As for the layout problem, judging by the provided code snippets, I don't see that you have tried to implement the suggestion I gave you in my first message:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx

Please review the online demo again. Note that 2 things are important:

1) <table> tags are inserted in the RadGrid HTML output in order to prevent the default table rows to position each data item on a separate line.

2) the ItemTemplate wrapper must be a floated container.


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.