CardView and ListView/DataList

7 posts, 0 answers
  1. Stephen
    Stephen avatar
    70 posts
    Member since:
    Mar 2008

    Posted 08 Mar 2009 Link to this post

    I've been looking through the demos for each of these types of Grid views, which both use ItemTemplate and I'm a bit confused by how each of these work.  What properties on the grid makes it a CardView and a ListView?


    Thanks,
    Stephen
  2. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 09 Mar 2009 Link to this post

    Hi,

    it is the "global item template feature" which makes this possible.
    This means you have no "columns section" instead you start with <ItemTemplate> straight in the MasterTableView.

    BUT I have also a question about this:

    How can I select which rows are displayed in the header (filter) section?

    Assume a cardview which displays details about my shop items.
    And a single item has, weight, widht, height, color, speed, ..... and so on -- let's say about 30 fields.
    What I want to sort is for an example "in stock" or color -- but not all the other fields.
    I have no idea how I can solve this!

    Regards

    Manfred
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephen
    Stephen avatar
    70 posts
    Member since:
    Mar 2008

    Posted 09 Mar 2009 Link to this post

    Right, and I get the gist of what ItemTemplate is and does, but my question was...  what makes it a CardView versus a ListView/DataList?  I've been playing with this some and from what I can gather, it's essentially the same.  Only difference I really saw was that ListView/DataList is using a table within ItemTemplate, where CardView isn't.

    In the documentation...

    CardView talks about ItemTemplate

    ListView/DataList tables about a global item template.

    From the sample code and from what I can tell based on these statements, is they are referring to the same thing, ItemTemplate.  This I guess for me seems rather confusing in the documentation.
  5. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 09 Mar 2009 Link to this post

    Sorry - I'v overseen that you ask about the difference.

    I think there is no real difference.

    What they do in the sample - they add "placeholder tables" between the items.
    Those tables are use to consume the emited rows (so that they do not display one below the other).
    I don't know if this is intended but  the source result looks like this:

        <tbody> 
            <tr class="GridRow_Telerik" id="RadGrid1_ctl00__0">  
                <td colspan="6">  
                    <div id="RadGrid1_ctl00_ctl04_ItemContainer" class="item">  
                        <b>CustomerID:</b> ALFKI  
                        <br /> 
                        <b>CompanyName:</b> Alfreds Futterkiste  
                        <br /> 
                        <b>ContactName:</b> Maria Anders  
                        <br /> 
                        <b>ContactTitle:</b> Sales Representative  
                        <br /> 
                        <b>City:</b> Berlin  
                        <br /> 
                        <b>Country:</b> Germany  
                    </div> 
                    <table style='display: none;'>  
                        <tr> 
                            <td> 
                            </td> 
                        </tr> 
                        <tr class="GridAltRow_Telerik" id="RadGrid1_ctl00__1">  
                            <td colspan="6">  
                            </td> 
                        </tr> 
                    </table> 
                    <div id="RadGrid1_ctl00_ctl06_ItemContainer" class="alternatingItem">  
                        <b>CustomerID:</b> ANATR  
                        <br /> 
                        <b>CompanyName:</b> Ana Trujillo Emparedados y helados  
                        <br /> 
                        <b>ContactName:</b> Ana Trujillo  
                        <br /> 
                        <b>ContactTitle:</b> Owner  
                        <br /> 
                        <b>City:</b> México D.F.  
                        <br /> 
                        <b>Country:</b> Mexico  
                    </div> 
                    <table style='display: none;'>  
                        <tr> 
                            <td> 
                            </td> 
                        </tr> 
                        <tr class="GridRow_Telerik" id="RadGrid1_ctl00__2">  
                            <td colspan="6">  
                            </td> 
                        </tr> 
                    </table> 
                    <div id="RadGrid1_ctl00_ctl08_ItemContainer" class="item">  
                        <b>CustomerID:</b> ANTON  
                        <br /> 
                        <b>CompanyName:</b> Antonio Moreno Taquería  
                        <br /> 
                        <b>ContactName:</b> Antonio Moreno  
                        <br /> 
                        <b>ContactTitle:</b> Owner  
                        <br /> 
                        <b>City:</b> México D.F.  
                        <br /> 
                        <b>Country:</b> Mexico  
                    </div> 
                    <table style='display: none;'>  
                        <tr> 
                            <td> 
                            </td> 
                        </tr> 
                        <tr class="GridAltRow_Telerik" id="RadGrid1_ctl00__3">  
                            <td colspan="6">  
                            </td> 
                        </tr> 
                    </table> 
                    <div id="RadGrid1_ctl00_ctl10_ItemContainer" class="alternatingItem">  
                        <b>CustomerID:</b> AROUT  
                        <br /> 
                        <b>CompanyName:</b> Around the Horn  
                        <br /> 
                        <b>ContactName:</b> Thomas Hardy  
                        <br /> 
                        <b>ContactTitle:</b> Sales Representative  
                        <br /> 
                        <b>City:</b> London  
                        <br /> 
                        <b>Country:</b> UK  
                    </div> 
                    <table style='display: none;'>  
                        <tr> 
                            <td> 
                            </td> 
                        </tr> 
                        <tr class="GridRow_Telerik" id="RadGrid1_ctl00__4">  
                            <td colspan="6">  
                            </td> 
                        </tr> 
                    </table> 
                    <div id="RadGrid1_ctl00_ctl12_ItemContainer" class="item">  
                        <b>CustomerID:</b> BERGS  
                        <br /> 
                        <b>CompanyName:</b> Berglunds snabbköp  
                        <br /> 
                        <b>ContactName:</b> Christina Berglund  
                        <br /> 
                        <b>ContactTitle:</b> Order Administrator  
                        <br /> 
                        <b>City:</b> Luleå  
                        <br /> 
                        <b>Country:</b> Sweden  
                    </div> 
                </td> 
            </tr> 
            </tbody> 
     

    I would say what they do is a bit tricky :)

    Anyhow - I know Card display from a competitiors gird (WPF in this case).
    The big difference - there you have a "Card Template" -- here the things are done with "code behind tricks".

    In simple words I would say - the grid renders nothing else than what you define in the template if no "colums section" is found.
    And you can intercept this in code behind to produce a listview look.

    A nice thing - but anyhow - without the capability to define the columns displayed in the header the thing is more or less useless for my typical Card-View scenario.

    I guess there is a way to intercept the column generation in code behind.

    But for sure telerik will provide us with an answer to our questions :)

    Regards and sorry again for overseeing what you really asked for

    Manfred
  6. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 09 Mar 2009 Link to this post

    And I found out at the very moment that CardView also works if you define columns.
    So what I asked for was solved - I can define the columns with the <columns> section and still have more columns in the card.

    My situation at the moment - it does not bind to a usercontrol - but that's another problem :)
  7. Stephen
    Stephen avatar
    70 posts
    Member since:
    Mar 2008

    Posted 09 Mar 2009 Link to this post

    Thanks for the clarification, it really helps.  Telerik I think needs to clarify this in their documentation some.

    I actually found I couldn't get CardView or DataList to work without defining at least one column, which I made invisible.
  8. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 09 Mar 2009 Link to this post

    Also my UserControl Problem got fixed -- ItemDataBound fires AFTER Page Load of the control.
    In my case I simply set the values in the Property set accessor - and the things work.

    By the way -- YES one column must be there - otherwhise gird says "No records found".
    BUT - you can set "ShowHeader" to false if you simply want a list of cards without any headers.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017