Selected item not getting highlighted

3 posts, 0 answers
  1. Umar
    Umar avatar
    2 posts
    Member since:
    Apr 2013

    Posted 10 Jun 2013 Link to this post

    Hello guys,

    I have made only 2 changes to selection.html from listView demos.

    1. Changed the theme to kendo.metro.min.css
    2. Added background-color property to product class.

    Now when I select an item it does not get highlighted. This problem does not occur for default theme. Am i doing  something wrong here or is this a known issue? Either way I'm looking for a solution or workaround. Any help will be really appreciated. 

    Thanks in advance.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Selection</title>
     
        <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
        <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
        <link href="../../../styles/kendo.metro.min.css" rel="stylesheet">
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/kendo.web.min.js"></script>
        <script src="../../content/shared/js/console.js"></script>
         
         
     
        <script>
             
        </script>
    </head>
    <body>
         
            <a class="offline-button" href="../index.html">Back</a>
         
        <div id="example" class="k-content">
     
        <div class="demo-section">
            <h2>Products</h2>
            <div id="listView"></div>
            <div id="pager" class="k-pager-wrap"> </div>
        </div>
     
        <div class="demo-section">
            <h2>Console Log</h2>
            <div class="console"></div>
        </div>
     
        <script type="text/x-kendo-tmpl" id="template">
            <div class="product">
                <img src="../../content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" />
                <h3>#:ProductName#</h3>
            </div>
        </script>
     
        <script>
            $(document).ready(function() {
                var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://demos.kendoui.com/service/Products",
                                dataType: "jsonp"
                            }
                        },
                        pageSize: 9
                    });
     
                $("#pager").kendoPager({
                    dataSource: dataSource
                });
     
                $("#listView").kendoListView({
                    dataSource: dataSource,
                    selectable: "multiple",
                    dataBound: onDataBound,
                    change: onChange,
                    template: kendo.template($("#template").html())
                });
     
                function onDataBound() {
                    kendoConsole.log("ListView data bound");
                }
     
                function onChange() {
                    var data = dataSource.view(),
                        selected = $.map(this.select(), function(item) {
                            return data[$(item).index()].ProductName;
                        });
     
                    kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
                }
            });
        </script>
     
        <style>
            .demo-section {
                padding: 15px;
                width: 692px;
            }
            .demo-section h2 {
                font-size: 1.2em;
                margin-bottom: 10px;
                text-transform: uppercase;
            }
            .demo-section .console {
                margin: 0;
            }
            .product
            {
                background-color: #cccccc;
                float: left;
                width: 220px;
                height: 110px;
                margin: 0;
                padding: 5px;
                cursor: pointer;
            }
            .product img
            {
                float: left;
                width: 110px;
                height: 110px;
            }
            .product h3
            {
                margin: 0;
                padding: 10px 0 0 10px;
                font-size: .9em;
                overflow: hidden;
                font-weight: normal;
                float: left;
                max-width: 100px;
                text-transform: uppercase;
            }
     
            .k-listview:after
            {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .k-listview
            {
                padding: 0;
                min-width: 690px;
                min-height: 360px;
            }
        </style>
    </div>
     
    </body>
    </html>


  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 12 Jun 2013 Link to this post

    Hello Umar,

    I believe that the issue occurs because of the ListView items have a background-color set. If you remove the following CSS line, selection will appear as expected:
    .product
    {
        /*background-color: #cccccc;*/
        float: left;
        width: 220px;
        height: 110px;
        margin: 0;
        padding: 5px;
        cursor: pointer;
    }

    For your convenience I prepared a small sample: http://jsbin.com/acuzof/2/edit
    I hope this will help.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 18 Aug 2014 in reply to Alexander Valchev Link to this post

    Another way to do it is change the class, if you want to use a background color.  This is for the listview, check event:

            function onChange() {
                $(".ulClientSelected").addClass("ulClientRow");
                $(".ulClientSelected").removeClass("ulClientSelected");
     
                this.select().removeClass('ulClientRow');
                this.select().addClass('ulClientSelected');
     
    }



Back to Top