Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@using DevExtreme.MVC.Demos.Models.SampleData
<div class="left">
@(Html.DevExtreme().List()
.ID("list")
.Grouped(true)
.SearchEnabled(true)
.SelectionMode(ListSelectionMode.Single)
.DataSource(d => d.WebApi().Controller("ActionsOverview").Key("Id"))
.DataSourceOptions(o => o.Group("City").SearchExpr(new[] { "Hotel_Name", "City", "Address" }))
.SelectedItems(new[] { SampleData.Hotels.First() })
.ItemTemplate(@<text>
<div>
<div class="hotel">
<div class="name"><%- Hotel_Name %></div>
<div class="address"><%- Postal_Code + ", " + Address %></div>
<div class="type <%- Hotel_Class.toLowerCase() %>"></div>
</div>
<div class="price-container">
<div class="price">$<%- Price %></div>
<div class="caption">per<br>night</div>
</div>
</div>
</text>)
.OnSelectionChanged("selectionChanged")
)
</div>
<div class="right">
<div class="header">
<div class="name-container">
<div class="name"></div>
<div class="type"></div>
</div>
<div class="price-container">
<div class="price"></div>
<div class="caption">per<br>night</div>
</div>
</div>
@(Html.DevExtreme().TileView()
.ID("tile")
.NoDataText("")
.Height(224)
.BaseItemHeight(100)
.BaseItemWidth(137)
.ItemMargin(12)
.ItemTemplate(@<text>
<div class="tile-image" alt="<%- FileName %>" style="background-image: url(<%- '../../Content/images/hotels/' + FileName %>);"></div>
</text>)
)
<div class="address"></div>
<div class="description"></div>
</div>
<script>
function selectionChanged(e) {
var hotel = e.addedItems[0];
var tile = $("#tile").dxTileView("instance");
tile.option("dataSource", hotel.Images);
$(".header .name").text(hotel.Hotel_Name);
$(".header .price").text("$" + hotel.Price);
$(".header .type").removeClass("diamond platinum gold");
$(".header .type").addClass(hotel.Hotel_Class.toLowerCase());
$(".right .description").text(hotel.Description);
$(".right .address").text(hotel.Postal_Code + ", " + hotel.Address);
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class CommonController : Controller {
public ActionResult ActionAndListsOverview() {
return View();
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Web.Http;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class ActionsOverviewController : ApiController {
[HttpGet]
public object Index(DataSourceLoadOptions options) {
return DataSourceLoader.Load(SampleData.Hotels, options);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public class Hotel {
public int Id { get; set; }
public string Hotel_Name { get; set; }
public string Address { get; set; }
public string Postal_Code { get; set; }
public string Description { get; set; }
public string Hotel_Class { get; set; }
public string City { get; set; }
public int Price { get; set; }
public IEnumerable<HotelImage> Images { get; set; }
}
public class HotelImage {
public string FileName { get; set; }
public int widthRatio { get; set; }
public int heightRatio { get; set; }
}
public partial class SampleData {
public static readonly IEnumerable<Hotel> Hotels = new[] {
new Hotel {
Id = 73,
Hotel_Name = "Hamburg Suites",
Address = "An Der Alster 82",
Postal_Code = "20099",
Description = "Only a few hundred meters from the city center, enjoy the energy of Hamburg each and every night of your stay in our hotel. We are currently renovating some of our guest rooms so that we can serve you better. Welcome to Hamburg and enjoy your stay.",
Hotel_Class = "Diamond",
City = "Hamburg",
Price = 299,
Images = new[] {
new HotelImage { FileName = "Hamburg-1.jpg" },
new HotelImage { FileName = "Lobby-0.jpg" },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-18.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-1-2.jpg" },
new HotelImage { FileName = "Bathroom-0.jpg" }
}
},
new Hotel {
Id = 75,
Hotel_Name = "The Stanadard Resort",
Address = "Steindamm 99",
Postal_Code = "20359",
Description = "At the Standard, there is nothing we won't do to make our guests feel at home. Our rooms offer the very best quality furnishings. Our restaurants serve the best foods and our bar has the largest collection of German beers in Europe. See you soon.",
Hotel_Class = "Platinum",
City = "Hamburg",
Price = 399,
Images = new[] {
new HotelImage { FileName = "Hamburg-5.jpg" },
new HotelImage { FileName = "Lobby-14.jpg" },
new HotelImage { FileName = "Bathroom-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-4.jpg" },
new HotelImage { FileName = "Restaurant-15.jpg" }
}
},
new Hotel {
Id = 76,
Hotel_Name = "The Park Hotel",
Address = "Borstelmannsweg 82",
Postal_Code = "20537",
Description = "The Park remains the go to address for those travelling to the beautiful city of Hamburg. It's where both old and new merge into a single experience. We are currently offering special rates for frequent travellers to our hotel. Call us and book your room.",
Hotel_Class = "Gold",
City = "Hamburg",
Price = 289,
Images = new[] {
new HotelImage { FileName = "Hamburg-7.jpg" },
new HotelImage { FileName = "Lobby-9.jpg" },
new HotelImage { FileName = "Bathroom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-1.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-0.jpg" },
new HotelImage { FileName = "Restaurant-13.jpg" }
}
},
new Hotel {
Id = 28,
Hotel_Name = "Honolulu Inn",
Address = "822 Mauna Loa Rd",
Postal_Code = "96801",
Description = "Sun, sand and tropical breezes await you at the Honolulu Inn. Just 2 miles from the world famous Waikiki Beach, the hotel is nearby the famous Kona shopping center. We'll do everything we can to make your stay with us memorable.",
Hotel_Class = "Gold",
City = "Honolulu",
Price = 111,
Images = new[] {
new HotelImage { FileName = "Honolulu-0.jpg" },
new HotelImage { FileName = "Lobby-11.jpg" },
new HotelImage { FileName = "Bedroom-4-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-14.jpg" },
new HotelImage { FileName = "Restaurant-6.jpg" }
}
},
new Hotel {
Id = 29,
Hotel_Name = "Waikiki Beach Hotel",
Address = "800 Waikiki Beach Rd",
Postal_Code = "96801",
Description = "Situated directly on Waikiki Beach you are 100 yards away from the fun that awaits you whenever you visit Honolulu. The hotel offers free shuttle service from Honolulu International Airport and we provide you with free towels when using our pool.",
Hotel_Class = "Diamond",
City = "Honolulu",
Price = 399,
Images = new[] {
new HotelImage { FileName = "Honolulu-1.jpg" },
new HotelImage { FileName = "Lobby-13.jpg" },
new HotelImage { FileName = "Bathroom-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-4-10.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-3.jpg" },
new HotelImage { FileName = "Restaurant-13.jpg" }
}
},
new Hotel {
Id = 30,
Hotel_Name = "Waikiki Suites",
Address = "900 Waikiki Beach Rd",
Postal_Code = "96801",
Description = "The only all suite hotel on Waikiki Beach. Enjoy panoramic views of the Pacific and world famous Diamond Head Crater. Visit our popular health spa for a relaxing day of pampering from our world renowned spa technicians. We look forward to your visit.",
Hotel_Class = "Platinum",
City = "Honolulu",
Price = 399,
Images = new[] {
new HotelImage { FileName = "Honolulu-10.jpg" },
new HotelImage { FileName = "Lobby-2.jpg" },
new HotelImage { FileName = "Bedroom-4-11.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-7.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-4.jpg" },
new HotelImage { FileName = "Restaurant-14.jpg" }
}
},
new Hotel {
Id = 31,
Hotel_Name = "White Sand Resort",
Address = "543 Sandy Beach Rd.",
Postal_Code = "96801",
Description = "A resort of uncompromising beauty. Lush landscaping will make you feel like you are in the heart of old Hawaii. The largest pool in Honolulu offers 3 different water slides to keep your kids busy while you enjoy our grand spa. See you soon at the Sand.",
Hotel_Class = "Platinum",
City = "Honolulu",
Price = 499,
Images = new[] {
new HotelImage { FileName = "Honolulu-2.jpg" },
new HotelImage { FileName = "Lobby-32.jpg" },
new HotelImage { FileName = "Bathroom-6.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-4-5.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-3.jpg" },
new HotelImage { FileName = "Restaurant-7.jpg" }
}
},
new Hotel {
Id = 35,
Hotel_Name = "Sandpiper Hotel",
Address = "424 Sand Hill Rd",
Postal_Code = "96801",
Description = "Built to amaze, the Sandpiper Hotel includes a 100 million dollar art collection, manicured lawns and gardens and an adult only pool. For kids, we offer all day camps and tours of old Hawaiian towns on the North Shore. Our hotel is simply the best.",
Hotel_Class = "Diamond",
City = "Honolulu",
Price = 599,
Images = new[] {
new HotelImage { FileName = "Honolulu-6.jpg" },
new HotelImage { FileName = "Lobby-21.jpg" },
new HotelImage { FileName = "Bathroom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-4-8.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-8.jpg" },
new HotelImage { FileName = "Restaurant-8.jpg" }
}
},
new Hotel {
Id = 1,
Hotel_Name = "Grand Gold Resort",
Address = "123 Las Vegas Blvd.",
Postal_Code = "89120",
Description = "A gorgeous resort in the heart of Las Vegas. Enjoy our 50,000 gallon pool in the summer and dine at one of our 10 highly rated restaurants. We even give away free casino chips so you can leave Las Vegas a winner. There is nothing like Grand Gold.",
Hotel_Class = "Platinum",
City = "Las Vegas",
Price = 90,
Images = new[] {
new HotelImage { FileName = "LV-0.jpg" },
new HotelImage { FileName = "Bathroom-0.jpg" },
new HotelImage { FileName = "Bedroom-1-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-0.jpg" },
new HotelImage { FileName = "Restaurant-0.jpg" }
}
},
new Hotel {
Id = 2,
Hotel_Name = "Desert Sun Resort",
Address = "47 Las Vegas Blvd.",
Postal_Code = "89119",
Description = "Created by renowned architect John Biltmore, the Desert Sun Resort is the newest Resort hotel in Las Vegas and offers its guests the very best rooms, dining and gaming options. You will never want to stay at another resort once you've experienced it.",
Hotel_Class = "Platinum",
City = "Las Vegas",
Price = 105,
Images = new[] {
new HotelImage { FileName = "LV-1.jpg" },
new HotelImage { FileName = "Lobby-1.jpg" },
new HotelImage { FileName = "Bedroom-1-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-1.jpg" },
new HotelImage { FileName = "Pool-1.jpg" }
}
},
new Hotel {
Id = 4,
Hotel_Name = "Casino World Resort",
Address = "28 Sunset Drive",
Postal_Code = "89120",
Description = "The ultimate casino in Las Vegas. Based on your play, we comp rooms, food and airfare. You will love the newly renovated rooms and the focus on the well-being of our guests. The pool includes a slide for children so you can gamble in peace.",
Hotel_Class = "Diamond",
City = "Las Vegas",
Price = 211,
Images = new[] {
new HotelImage { FileName = "LV-2.jpg" },
new HotelImage { FileName = "Pool-11.jpg" },
new HotelImage { FileName = "Lobby-11.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-1-3.jpg" },
new HotelImage { FileName = "Restaurant-10.jpg" }
}
},
new Hotel {
Id = 6,
Hotel_Name = "Paradise Resort",
Address = "524 Paradise Road",
Postal_Code = "89120",
Description = "Constructed in 2012, the Paradise is the pinnacle of elegance and fun. Enjoy our 50,000 gallon pool or our 150,000 square foot casino. We have more games than any other casino in Las Vegas. Come join us next time you are in town. We'll treat you well.",
Hotel_Class = "Platinum",
City = "Las Vegas",
Price = 299,
Images = new[] {
new HotelImage { FileName = "LV-4.jpg" },
new HotelImage { FileName = "Bathroom-6.jpg" },
new HotelImage { FileName = "Bedroom-1-7.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-13.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-4.jpg" },
new HotelImage { FileName = "Pool-14.jpg" }
}
},
new Hotel {
Id = 7,
Hotel_Name = "Sun World Hotel",
Address = "1000 Las Vegas Blvd.",
Postal_Code = "89119",
Description = "Enjoy the warmth of Las Vegas in our amazing hotel. Swim in our beautiful pool, gamble in our comfortable casino and dine in our amazing restaurants. Once you feel the Sun World difference, you will never stay at another Las Vegas Hotel again.",
Hotel_Class = "Gold",
City = "Las Vegas",
Price = 149,
Images = new[] {
new HotelImage { FileName = "LV-6.jpg" },
new HotelImage { FileName = "Pool-3.jpg" },
new HotelImage { FileName = "Restaurant-16.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Lobby-14.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-1-8.jpg" },
new HotelImage { FileName = "Bathroom-7.jpg" }
}
},
new Hotel {
Id = 61,
Hotel_Name = "Metropolis Hotel",
Address = "822 Edgware Rd",
Postal_Code = "W2 4AD",
Description = "At the Metropolis, you will be welcomed by the most professional hotel staff in the city of London. We take great pride in making certain that all of our guests are lavished while staying in the most famous city on earth. Welcome to the Metropolis.",
Hotel_Class = "Diamond",
City = "London",
Price = 379,
Images = new[] {
new HotelImage { FileName = "London-0.jpg" },
new HotelImage { FileName = "Lobby-4.jpg" },
new HotelImage { FileName = "Bedroom-5-1.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-0.jpg" },
new HotelImage { FileName = "Restaurant-18.jpg" }
}
},
new Hotel {
Id = 63,
Hotel_Name = "Royal Grande Hotel",
Address = "99 Garden Park",
Postal_Code = "W2 3JP",
Description = "The Royal Grande is the ultimate in luxury. From Kings to Queens, our hotel has hosted the very rich and very famous throughout its amazing history. Our staff will help you enjoy your time in the city of London and we'll work hard to earn your business.",
Hotel_Class = "Platinum",
City = "London",
Price = 449,
Images = new[] {
new HotelImage { FileName = "London-10.jpg" },
new HotelImage { FileName = "Lobby-5.jpg" },
new HotelImage { FileName = "Bedroom-5-14.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-5.jpg" },
new HotelImage { FileName = "Restaurant-12.jpg" }
}
},
new Hotel {
Id = 65,
Hotel_Name = "Palace Hotel",
Address = "537 Southwark",
Postal_Code = "SE1 9HH",
Description = "The epitome of luxury, the Palace is near all the famous landmarks in the city of London and minutes away from the best shopping in Europe. If you love to be lavished by an amazing staff and want the best guest rooms, then the Palace is the place for you.",
Hotel_Class = "Platinum",
City = "London",
Price = 389,
Images = new[] {
new HotelImage { FileName = "London-3.jpg" },
new HotelImage { FileName = "Lobby-3.jpg" },
new HotelImage { FileName = "Bedroom-4-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-3.jpg" },
new HotelImage { FileName = "Bathroom-0.jpg" }
}
},
new Hotel {
Id = 12,
Hotel_Name = "Downtown Inn",
Address = "528 Pico Blvd.",
Postal_Code = "90012",
Description = "In the heart of LA's business district, the Downtown Inn has a welcoming staff and award winning restaurants that remain open 24 hours a day. Use our conference room facilities to conduct meetings and have a drink at our beautiful rooftop bar.",
Hotel_Class = "Diamond",
City = "Los Angeles",
Price = 199,
Images = new[] {
new HotelImage { FileName = "LA-0.jpg" },
new HotelImage { FileName = "Lobby-19.jpg" },
new HotelImage { FileName = "Bedroom-2-1.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-6.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-0.jpg" },
new HotelImage { FileName = "Pool-13.jpg" }
}
},
new Hotel {
Id = 50,
Hotel_Name = "Reef Resort",
Address = "1 Reef Coast Street",
Postal_Code = "0002",
Description = "A premier destination for the rich and famous, the Reef Resort offers you luxuries not found at any other resort in the Bahamas. Our pool inclues 6 super slides so your children can enjoy themselves from morning to night. Join us and have fun.",
Hotel_Class = "Diamond",
City = "Nassau",
Price = 399,
Images = new[] {
new HotelImage { FileName = "Nassau-0.jpg" },
new HotelImage { FileName = "Lobby-20.jpg" },
new HotelImage { FileName = "Bedroom-3-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-8.jpg" },
new HotelImage { FileName = "Restaurant-21.jpg" }
}
},
new Hotel {
Id = 52,
Hotel_Name = "Nassau Beach Hotel",
Address = "34 Coast Hwy",
Postal_Code = "0003",
Description = "Who does not love an oceanfront hotel? At the Nassau Beach you'll be minutes away from the warm Atlantic and you'll have views of the bay and some of the most beautiful boats on this planet. Yes, the Nassau Beach is the place to be if you love boating.",
Hotel_Class = "Diamond",
City = "Nassau",
Price = 299,
Images = new[] {
new HotelImage { FileName = "Nassau-11.jpg" },
new HotelImage { FileName = "Lobby-18.jpg" },
new HotelImage { FileName = "Pool-5.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-15.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-3-1.jpg" }
}
},
new Hotel {
Id = 53,
Hotel_Name = "Sandybridge Inn",
Address = "58 Bridge Road",
Postal_Code = "0004",
Description = "Low prices does not mean bad service or unkept rooms. At the Sandybridge, we make your stay enjoyable with an uncompromising commitment to affordable services without all the fuss so common with high-priced hotels on the island. Come join us.",
Hotel_Class = "Gold",
City = "Nassau",
Price = 249,
Images = new[] {
new HotelImage { FileName = "Nassau-12.jpg" },
new HotelImage { FileName = "Lobby-17.jpg" },
new HotelImage { FileName = "Bedroom-3-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Pool-3.jpg" },
new HotelImage { FileName = "Restaurant-14.jpg" }
}
},
new Hotel {
Id = 54,
Hotel_Name = "Colonial House",
Address = "8 Old City Dr",
Postal_Code = "0004",
Description = "The Colonial House is consistently voted best hotel in the Bahamas. Our guests know that we will do everything we can to make your stay a memorable one. Note: Our pool is undergoing renovations throughout this year so please plan accordingly.",
Hotel_Class = "Diamond",
City = "Nassau",
Price = 379,
Images = new[] {
new HotelImage { FileName = "Nassau-14.jpg" },
new HotelImage { FileName = "Lobby-25.jpg" },
new HotelImage { FileName = "Pool-13.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-3-3.jpg" },
new HotelImage { FileName = "Bathroom-3.jpg" }
}
},
new Hotel {
Id = 37,
Hotel_Name = "SoHo Inn",
Address = "82 Houston St",
Postal_Code = "10001",
Description = "The trendiest hotel in NYC. If you love SOHO, you are going to love staying at our hotel. You'll be in the heart of all of the action and a short subway ride to the everything NYC has to offer to visitors. Hotel is currently undergoing a renovation.",
Hotel_Class = "Diamond",
City = "New York",
Price = 299,
Images = new[] {
new HotelImage { FileName = "NYC-0.jpg" },
new HotelImage { FileName = "Lobby-1.jpg" },
new HotelImage { FileName = "Bathroom-7.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-1.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-0.jpg" },
new HotelImage { FileName = "Restaurant-9.jpg" }
}
},
new Hotel {
Id = 38,
Hotel_Name = "NoHo Hotel",
Address = "99 Houston St",
Postal_Code = "10001",
Description = "Some say that NOHO is the best area in Manhattan and who are we to disagree. Our hotel caters to the rich and famous and the not so rich and not so famous. We will do everything we can to make your stay memorable, fun and exciting.",
Hotel_Class = "Gold",
City = "New York",
Price = 199,
Images = new[] {
new HotelImage { FileName = "NYC-1.jpg" },
new HotelImage { FileName = "Lobby-9.jpg" },
new HotelImage { FileName = "MeetingRoom-1.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-10.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-6.jpg" },
new HotelImage { FileName = "Restaurant-8.jpg" }
}
},
new Hotel {
Id = 39,
Hotel_Name = "Broadway Suites",
Address = "887 Broadway",
Postal_Code = "10002",
Description = "The lights of broadway. The excitement of Times Square. The energy of New York. You are a short walk away from Broadway and Times Square. Discounted show tickets are available from our concierge 7 days a week. Don’t forget our new restaurants.",
Hotel_Class = "Gold",
City = "New York",
Price = 119,
Images = new[] {
new HotelImage { FileName = "NYC-10.jpg" },
new HotelImage { FileName = "Lobby-7.jpg" },
new HotelImage { FileName = "Restaurant-7.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-11.jpg" },
new HotelImage { FileName = "Bathroom-4.jpg" }
}
},
new Hotel {
Id = 40,
Hotel_Name = "NY Convention Hotel",
Address = "288 6th Ave",
Postal_Code = "10002",
Description = "The premier location for business conventions in New York City. With 500,000 square feet of convention space, we can host any event for any organization. Our rooms are spotless and our staff is extremely knowledgeable about the hidden gems of the city.",
Hotel_Class = "Diamond",
City = "New York",
Price = 299,
Images = new[] {
new HotelImage { FileName = "NYC-2.jpg" },
new HotelImage { FileName = "Lobby-6.jpg" },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-14.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-4.jpg" },
new HotelImage { FileName = "Restaurant-6.jpg" }
}
},
new Hotel {
Id = 41,
Hotel_Name = "Central Park Suites",
Address = "900 Park Ave",
Postal_Code = "10003",
Description = "Wake up, open your windows and take in a refreshing view of Central Park. We recently renovated all public areas of our hotel and world famous chef Johnny James will be opening his new restaurant within the next two months. Join us and have a great time.",
Hotel_Class = "Diamond",
City = "New York",
Price = 219,
Images = new[] {
new HotelImage { FileName = "NYC-3.jpg" },
new HotelImage { FileName = "Lobby-5.jpg" },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-6.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-2.jpg" },
new HotelImage { FileName = "Bathroom-6.jpg" }
}
},
new Hotel {
Id = 42,
Hotel_Name = "Wall St Hotel",
Address = "882 Battery Street",
Postal_Code = "10005",
Description = "Business means Wall Street and the best hotel in the district is the Wall St. Hotel. We have special weekend rates for visitors who want to stay close to Battery Park. During the week, our rates are very competitive and we offer free internet access.",
Hotel_Class = "Gold",
City = "New York",
Price = 249,
Images = new[] {
new HotelImage { FileName = "NYC-4.jpg" },
new HotelImage { FileName = "Lobby-31.jpg" },
new HotelImage { FileName = "MeetingRoom-5.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-5.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-0.jpg" },
new HotelImage { FileName = "Restaurant-5.jpg" }
}
},
new Hotel {
Id = 43,
Hotel_Name = "The Grand Hotel",
Address = "100 Park Ave",
Postal_Code = "10002",
Description = "Like the name implies, the Grand Hotel is simply grand. We recently purchased a Picasso painting for 50 million dollars, adding to our already famous art collection. Our rooms now offer the heaven bed and bedding, so you can sleep in luxury every night.",
Hotel_Class = "Platinum",
City = "New York",
Price = 399,
Images = new[] {
new HotelImage { FileName = "NYC-6.jpg" },
new HotelImage { FileName = "Lobby-3.jpg" },
new HotelImage { FileName = "Bathroom-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-7.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-1.jpg" },
new HotelImage { FileName = "Restaurant-5.jpg" }
}
},
new Hotel {
Id = 45,
Hotel_Name = "The Americas Hotel",
Address = "938 Ave of Americas",
Postal_Code = "10003",
Description = "Directly across from the United Nations, the Americas Hotel has hosted politicians from throughout the world. Meet and greet the most powerful men and women in the world and find out why we are consistently voted the best hotel on the east side.",
Hotel_Class = "Diamond",
City = "New York",
Price = 299,
Images = new[] {
new HotelImage { FileName = "NYC-9.jpg" },
new HotelImage { FileName = "Lobby-28.jpg" },
new HotelImage { FileName = "MeetingRoom-5.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-5-9.jpg" },
new HotelImage { FileName = "Bathroom-6.jpg" }
}
},
new Hotel {
Id = 55,
Hotel_Name = "Hotel de Paris",
Address = "49 Rue Pierre Charron",
Postal_Code = "75008",
Description = "The magnificant city of Paris like you've never experienced it before. Get ready for the time of your life with the world's best dining and shopping options. Get ready for the time of your life with the world's best hotel staff ready to help you anytime.",
Hotel_Class = "Platinum",
City = "Paris",
Price = 399,
Images = new[] {
new HotelImage { FileName = "Paris-1.jpg" },
new HotelImage { FileName = "Lobby-9.jpg" },
new HotelImage { FileName = "MeetingRoom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-0.jpg" },
new HotelImage { FileName = "Restaurant-0.jpg" }
}
},
new Hotel {
Id = 56,
Hotel_Name = "Champs Elysees Hotel",
Address = "1 Champs Elysees",
Postal_Code = "75008",
Description = "The most famous boulevard in the world meets the most luxurious hotel in the world. Minutes away from the Eiffel Tower and the Seine River, enjoy unmatched service and pampering at the Champs Elyesees Hotel. Kids are welcome and we are pet friendly.",
Hotel_Class = "Platinum",
City = "Paris",
Price = 399,
Images = new[] {
new HotelImage { FileName = "Paris-10.jpg" },
new HotelImage { FileName = "Lobby-0.jpg" },
new HotelImage { FileName = "Bathroom-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-1-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-1.jpg" },
new HotelImage { FileName = "Restaurant-0.jpg" }
}
},
new Hotel {
Id = 58,
Hotel_Name = "The Hermitage",
Address = "44 Rue Beaujon",
Postal_Code = "75008",
Description = "The queen of hotels in the city of Paris, the Hermitage is currently under-going major renovations for a grand re-opening in 2016. We currently have a limited number of rooms available and they have been discounted during the renovation phase.",
Hotel_Class = "Diamond",
City = "Paris",
Price = 299,
Images = new[] {
new HotelImage { FileName = "Paris-3.jpg" },
new HotelImage { FileName = "Lobby-14.jpg" },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-10.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-1-3.jpg" },
new HotelImage { FileName = "Bathroom-6.jpg" }
}
},
new Hotel {
Id = 60,
Hotel_Name = "Opera Hotel",
Address = "77 Blvd Haussmann",
Postal_Code = "75009",
Description = "Situated near the world famous Paris Opera and countless other Paris landmarks, the Opera Hotel will astound you with its attentive and knowledgeable staff, immaculate guest rooms and amazing décor. We look forward to serving your needs soon.",
Hotel_Class = "Diamond",
City = "Paris",
Price = 399,
Images = new[] {
new HotelImage { FileName = "Paris-9.jpg" },
new HotelImage { FileName = "Lobby-18.jpg" },
new HotelImage { FileName = "MeetingRoom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-17.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-1-8.jpg" },
new HotelImage { FileName = "Bathroom-0.jpg" }
}
},
new Hotel {
Id = 67,
Hotel_Name = "Hotel Roma",
Address = "Via Roma 427",
Postal_Code = "00185",
Description = "In the center of Rome, the Hotel Roma is a blend of old and new. Our gardens will take you back in time and our service will remind you how great life can be. We want to make your stay with us the best experience of your life. We love our guests.",
Hotel_Class = "Platinum",
City = "Rome",
Price = 299,
Images = new[] {
new HotelImage { FileName = "Rome-1.jpg" },
new HotelImage { FileName = "Lobby-4.jpg" },
new HotelImage { FileName = "Bedroom-5-1.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-7.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-12.jpg" },
new HotelImage { FileName = "Pool-3.jpg" }
}
},
new Hotel {
Id = 68,
Hotel_Name = "The International Inn",
Address = "Via Nazionale 28",
Postal_Code = "00184",
Description = "Just as the name implies, the International is the hotel of choice for travellers from all around the world. Centrally located to all the sights and sounds of the great city of Rome, you will feel like you are in paradise whenever you stay with us.",
Hotel_Class = "Diamond",
City = "Rome",
Price = 279,
Images = new[] {
new HotelImage { FileName = "Rome-4.jpg" },
new HotelImage { FileName = "Lobby-27.jpg" },
new HotelImage { FileName = "Pool-11.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-13.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-1-9.jpg" },
new HotelImage { FileName = "Bathroom-6.jpg" }
}
},
new Hotel {
Id = 70,
Hotel_Name = "The Colosseum Inn",
Address = "Via Sforza 99",
Postal_Code = "00184",
Description = "The most beautiful hotel in Rome. You will feel warm and comfortable the minute you step into our grand lobby. We are prepared to do everything we can to make your stay in Rome a pleasurable one. Nothing compares to the Colosseum.",
Hotel_Class = "Diamond",
City = "Rome",
Price = 299,
Images = new[] {
new HotelImage { FileName = "Rome-7.jpg" },
new HotelImage { FileName = "Lobby-18.jpg" },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-16.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-5.jpg" },
new HotelImage { FileName = "Bathroom-3.jpg" }
}
},
new Hotel {
Id = 19,
Hotel_Name = "The Bay Hotel",
Address = "1 Fishermans Rd",
Postal_Code = "94105",
Description = "Located at the Fisherman's Wharf, the Bay Hotel will lavish you in luxury and allow you to experience all the sights and sounds of San Francisco. Our world-class restaurants serve the freshest seafood. Come join us at The Bay Hotel…it will be our pleasure",
Hotel_Class = "Diamond",
City = "San Francisco",
Price = 299,
Images = new[] {
new HotelImage { FileName = "SF-0.jpg" },
new HotelImage { FileName = "Bedroom-5-10.jpg" },
new HotelImage { FileName = "Lobby-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-20.jpg" },
new HotelImage { FileName = "Pool-8.jpg" }
}
},
new Hotel {
Id = 20,
Hotel_Name = "Golden Suites",
Address = "14 Golden Gate Blvd",
Postal_Code = "94014",
Description = "Overlooking the amazing Golden Gate Bridge, the Golden Suites welcomes its guests with free bottled water upon check-in and a coupon for a free trip to Alcatraz Island. We will do everything we can to make your stay a positive one.",
Hotel_Class = "Diamond",
City = "San Francisco",
Price = 599,
Images = new[] {
new HotelImage { FileName = "SF-2.jpg" },
new HotelImage { FileName = "Lobby-22.jpg" },
new HotelImage { FileName = "MeetingRoom-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-10.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Restaurant-21.jpg" },
new HotelImage { FileName = "Pool-8.jpg" }
}
},
new Hotel {
Id = 21,
Hotel_Name = "Metropolitan Hotel",
Address = "378 Green St.",
Postal_Code = "94102",
Description = "Luxury has been re-defnied at the Met. A $0 milllion dollar renovation in 2011 upgraded all guest rooms to include state of the art technology and the finest quality furnishings. Our hotel offers 3 indoor pools and the largest health club in the city.",
Hotel_Class = "Platinum",
City = "San Francisco",
Price = 599,
Images = new[] {
new HotelImage { FileName = "Pool-8.jpg" },
new HotelImage { FileName = "Bedroom-2-2.jpg" },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-1.jpg" },
new HotelImage { FileName = "Restaurant-3.jpg" }
}
},
new Hotel {
Id = 22,
Hotel_Name = "Residence Suites",
Address = "278 Spring Rd",
Postal_Code = "94104",
Description = "In the heart of San Francisco's financial district, the Residence is an all-suite hotel with a professional staff, manicured lawns and immaculate hotel rooms. Choose the Residence when you want the best and will not settle for anything less.",
Hotel_Class = "Gold",
City = "San Francisco",
Price = 299,
Images = new[] {
new HotelImage { FileName = "SF-4.jpg" },
new HotelImage { FileName = "Lobby-27.jpg" },
new HotelImage { FileName = "Restaurant-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-3.jpg" },
new HotelImage { FileName = "Bedroom-2-4.jpg" }
}
},
new Hotel {
Id = 23,
Hotel_Name = "City Lights Inn",
Address = "278 Market St",
Postal_Code = "94104",
Description = "Everyone at the City Lights Inn takes great pride in serving our guests. From our parking attendants to our management team, we will do everything we can to make your stay in San Francisco a memorable one. Join us and let us serve you in style.",
Hotel_Class = "Gold",
City = "San Francisco",
Price = 299,
Images = new[] {
new HotelImage { FileName = "SF-5.jpg" },
new HotelImage { FileName = "Lobby-27.jpg" },
new HotelImage { FileName = "Bathroom-2.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-5.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-2.jpg" },
new HotelImage { FileName = "Restaurant-4.jpg" }
}
},
new Hotel {
Id = 24,
Hotel_Name = "Sunset Hotel",
Address = "282 Fishermans Rd",
Postal_Code = "94102",
Description = "Built in 2007, the newest hotel in Fisherman's Wharf is the Sunset. With large rooms, manicured gardens and a friendly staff, you'll experience everything San Francisco has to offer in style and luxury. Come stay with us at the Sunset Hotel.",
Hotel_Class = "Diamond",
City = "San Francisco",
Price = 299,
Images = new[] {
new HotelImage { FileName = "SF-6.jpg" },
new HotelImage { FileName = "Lobby-28.jpg" },
new HotelImage { FileName = "Restaurant-5.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-4.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-8.jpg" },
new HotelImage { FileName = "Bathroom-6.jpg" }
}
},
new Hotel {
Id = 25,
Hotel_Name = "The Grand Resort",
Address = "5772 1st Street",
Postal_Code = "94104",
Description = "When opulance is your desire and when you only want the best in dining, shopping and guest room options, then choose the Grant Resort in downtown San Francisco. We cater to both the business and leisure traveller so please join us on your next visit.",
Hotel_Class = "Platinum",
City = "San Francisco",
Price = 499,
Images = new[] {
new HotelImage { FileName = "SF-7.jpg" },
new HotelImage { FileName = "Lobby-3.jpg" },
new HotelImage { FileName = "Restaurant-6.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bathroom-7.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-2-9.jpg" },
new HotelImage { FileName = "Restaurant-21.jpg" }
}
},
new Hotel {
Id = 27,
Hotel_Name = "Golden Gate Hotel",
Address = "6222 Bridge Rd",
Postal_Code = "94102",
Description = "At the Golden Gate, we welcome you to the Golden State with open arms and strive to make your stay in San Francisco a memorable one. We wil do everything we can to make sure you have fun in the city and to earn your business year after year. Stay with us.",
Hotel_Class = "Diamond",
City = "San Francisco",
Price = 199,
Images = new[] {
new HotelImage { FileName = "SF-9.jpg" },
new HotelImage { FileName = "Lobby-18.jpg" },
new HotelImage { FileName = "Bathroom-3.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "Bedroom-3-0.jpg", widthRatio = 2, heightRatio = 2 },
new HotelImage { FileName = "MeetingRoom-1.jpg" },
new HotelImage { FileName = "Restaurant-19.jpg" }
}
}
};
}
}
.left {
float: left;
width: 330px;
height: 470px;
padding: 20px;
background: rgba(191, 191, 191, 0.15);
margin-right: 30px;
}
.right {
overflow: hidden;
}
.left #list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
.left #list .hotel {
float: left;
}
.left #list .hotel .name {
font-weight: bold;
}
.right .header {
height: 70px;
}
.right .header .name-container {
float: left;
}
.right .header .name {
font-size: 30px;
font-weight: bold;
}
.right .header .price-container {
padding-top: 27px;
}
.right .name-container .type {
margin-top: 0;
}
.right #tile {
margin: 0 -12px 0 -12px;
}
.right .tile-image {
height: 100%;
width: 100%;
background-size: cover;
}
.right .address {
padding-top: 30px;
font-size: 18px;
opacity: 0.7;
}
.right .description {
margin: 10px 0;
}
.type {
margin: 3px 0 5px 0;
height: 14px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2214px%22%20%3E%3Cpolyline%20fill%3D%22%23F05B41%22%20points%3D%227.5%2C0%209.972%2C4.399%2014.999%2C5.348%2011.5%2C9.015%2012.135%2C14%207.5%2C11.866%202.865%2C14%203.5%2C9.015%200.001%2C5.348%205.028%2C4.399%207.5%2C0%20%22%2F%3E%3C%2Fsvg%3E');
background-size: 18px 14px;
}
.type.gold {
width: 54px;
}
.type.platinum {
width: 72px;
}
.type.diamond {
width: 90px;
}
.price-container {
float: right;
padding-top: 13px;
}
.price-container > div {
display: inline-block;
}
.price-container .price {
font-size: 25px;
}
.price-container .caption {
font-size: 11px;
line-height: 12px;
padding-left: 2px;
opacity: 0.7;
}