CardView and ListView/DataList

[Stephen]

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

[ManniAT]

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

[Stephen]

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.

[ManniAT]

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

[ManniAT]

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 :)

[Stephen]

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.

[ManniAT]

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.