issue setting up listview

[gary]

Hi guys,

 

I am havning a hard time understanding the setup process of the list view. i followed the documentation offered but i am finding it very difficult to set it up anyways. The issue i am having is that it is displaying no listview in the view.

 I deployed my site to garyrizzo.com if you are interested. just navigate to Household menu item and click on bathroom accessories.

Would appreciate if someone assists.

 

Here is my code:

 

Controller:

 

 public ActionResult ProductListing(string catname)
        {
            //Category cat = (from s in dbContext.Categories
            //          where s.Category1 == catname
            //          select s).Single();
            
            //int catid = cat.ID;

            //var prodlist = from s in dbContext.Products
            //                                 where s.C_ID == catid
            //                                 select s;

            //return View(prodlist);
            return View(GetProducts());
        }

        protected override void Dispose(bool disposing)
        {
            dbContext.Dispose();

            base.Dispose(disposing);
        }
                                      
        public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetProducts().ToDataSourceResult(request));
        }

        public IEnumerable<ideaworktelekrik.Models.ProductViewModel> GetProducts()
        {
            var northwind = from s in dbContext.Products
                            //where s.C_ID == catid
                            select s;

            List<ideaworktelekrik.Models.ProductViewModel> prodlist = new List<ideaworktelekrik.Models.ProductViewModel>();

            foreach (Product product in northwind)
            {
                ideaworktelekrik.Models.ProductViewModel newprod = new ideaworktelekrik.Models.ProductViewModel();
                   newprod.productID = product.ID;
                   newprod.ProductName = product.Name;
                   prodlist.Add(newprod);
            }
            return prodlist;
        }
    }

 

 

Model:

 

          public int productID {get;set;}
        public string ProductName {get;set;}
        public decimal unitprice {get;set;}

 

View:

 

@model IEnumerable<ideaworktelekrik.Models.ProductViewModel>

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <img src="@Url.Content("~/ProductImages/image001.png/")" alt="#:ProductName# image" />
        <h3>#:ProductName#</h3>
    </div>
</script>

<div class="demo-section">
    @(Html.Kendo().ListView<ideaworktelekrik.Models.ProductViewModel>(Model)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("Products_Read", "Home"));
        dataSource.PageSize(15);
    })
    .Pageable()
    )
</div>

<style>
    .demo-section {
        padding: 30px;
        width: 577px;
    }

    #listView {
        padding: 10px;
        margin-bottom: -1px;
        min-width: 555px;
        min-height: 510px;
    }

    .product {
        float: left;
        position: relative;
        width: 111px;
        height: 170px;
        margin: 0;
        padding: 0;
    }

        .product img {
            width: 110px;
            height: 110px;
        }

        .product h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 96px;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }

        .product p {
            visibility: hidden;
        }

        .product:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 0;
            margin: 0;
            padding: 0;
            line-height: 110px;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }

        .k-listview:after, .product dl:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
</style>

[Daniel]

Hi,

I checked the site and the problem will occur because jQuery is loaded again after the Kendo scripts have been included:

<script src="/Scripts/kendo/2015.1.429/jszip.min.js"></script>
<script src="/Scripts/kendo/2015.1.429/kendo.all.min.js"></script>
<script src="/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js"></script>
...
<!-- scripts -->
<script src="/themes/js/jquery-1.7.2.min.js"></script>

jQuery should be loaded only once before Kendo.

Regards,
Daniel
Telerik