highlight list item and scroll to it

2 posts, 0 answers
  1. RICHARD FRIEND
    RICHARD FRIEND avatar
    16 posts
    Member since:
    Nov 2008

    Posted 15 Jul 2013 Link to this post

    Hi

    I currently use this code to highlight a list item (after updating) - however i would like to scroll (smoothly if possible) to the item as well as highlighting it.



    Is there an elegant way to scroll the listview to a specific item, ive tried scrollIntoView of the html element but it messes up my fixed headers.


    highlightRow: function (listView, field, value)
            {
                setTimeout(function () {
                    var items = listView.items();
                    for (var i = 0; i < items.length; i++) {
                        var ele = $(items[i]);
                        var uid = ele.data('uid');
                        if (pev.isGoodString(uid)) {
                            var item = listView.dataSource.getByUid(uid);
                            if (item != null && typeof item != 'undefined' &&
                                item[field] == value) {
                                ele.find('.list-item').highlight();
                                 
                            }
                        }
                    }
                }, 500);
            }
     
     
    jQuery.fn.highlight = function () {
     
            $(this).each(function () {
                var el = $(this);
                el.before("<div/>")
                el.prev()
                    .width(el.width())
                    .height(el.height())
                    .css({
                        "position": "absolute",
                        "background-color": "#ffff99",
                        "opacity": ".7"
                    })
                    .fadeOut(3000);
            });
        }
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Jul 2013 Link to this post

    Hi Richard,

    The Kendo UI ListView does not have native item rendering or default scrolling behavior, that's why the described functionality is unfortunately not supported and should be achieved with a custom implementation.

    Regards,
    Dimo
    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
Back to Top