Dynamic Template for ListView

[Bill]

I am currently developing a mobile-first page using a listview with a template of k-card-list so it looks good on a phone(vertical).  I would like to display the same info horizontally(almost like a grid) if the user is on a smaller device.

There is a ton of real estate wasted on a large screen that I would like to take advantage of.

What is the preferred method of doing this?

I have attached a couple of screenshots.

Below is my current template:

<script type="text/x-kendo-tmpl" id="template">
    <div class="k-card-list">
        <div class="k-card" style="min-width: 300px;">
            <div class="k-card-header">
                <div><h4>Service Date: #= kendo.toString(kendo.parseDate(ServiceDate), "MM/dd/yyyy")#</h4></div>
                <div><h4>Store No: #:StoreNumber#</h4></div>
                <div><h4>Store Name: #:StoreName#</h4></div>
                <div><h4>Visit Type: #:VisitTypeName#</h4></div>
            </div>
            <div class="k-card-body">
                <div>Round Trip Miles: ${ ActualTotalMileage == null ? '' : ActualTotalMileage }</div>
                <div>Compensable Miles: ${ ActualCompensableMileage == null ? '' : ActualCompensableMileage }</div>
                <div>Hours: ${ ActualHours == null ? '' : ActualHours }</div>
                <div>Minutes: ${ ActualMinutes == null ? '' : ActualMinutes }</div>
                <div>Comments: ${ CommentText == null ? '' : CommentText }</div>
            </div>
            <div class="k-card-actions k-card-actions-stretched">
                <span class="k-card-action">
                    <span class="k-button k-flat k-primary k-edit-button">
                        # var miles = ActualTotalMileage#
                        # if (miles > 0) { #
                        Update Expense Claim
                        # } else { #
                        Create Expense Claim
                        #} #
                    </span>
                </span>
            </div>
        </div>
        <hr class="k-hr" />
    </div>
</script>

[Bill]

The second sentence should say:

I would like to display the same info horizontally(almost like a grid) if the user is on a LARGER device.

[Tsvetomir]

Hi Bill,

If the same information should be used for both of the views on desktop and in mobile, I would recommend you to adjust the CSS styles for each of those. Here the media query CSS option comes in handy. It can be used to alternate the CSS applied either to a smartphone, tablet, and desktop.

In general, all that you have to do is to declare two media queries and put the relevant styles within each of those. More information could be obtained in the following StackOverflow article:

https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

In case you would like to alternate the whole content of the Telerik UI ListView, the above would not be applicable. Let me know in case the approach above is not applicable to you.

 

Regards,
Tsvetomir
Progress Telerik