This is a migrated thread and some comments may be shown as answers.

CardView and ListView/DataList

6 Answers 312 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 08 Mar 2009, 08:20 AM
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

6 Answers, 1 is accepted

Sort by
0
ManniAT
Top achievements
Rank 2
answered on 09 Mar 2009, 07:49 PM
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
0
Stephen
Top achievements
Rank 1
answered on 09 Mar 2009, 07:53 PM
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.
0
ManniAT
Top achievements
Rank 2
answered on 09 Mar 2009, 08:20 PM
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
0
ManniAT
Top achievements
Rank 2
answered on 09 Mar 2009, 08:39 PM
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 :)
0
Stephen
Top achievements
Rank 1
answered on 09 Mar 2009, 08:49 PM
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.
0
ManniAT
Top achievements
Rank 2
answered on 09 Mar 2009, 08:58 PM
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.
Tags
Grid
Asked by
Stephen
Top achievements
Rank 1
Answers by
ManniAT
Top achievements
Rank 2
Stephen
Top achievements
Rank 1
Share this question
or