How to access html elements generated from kendo ui list view using jquery

2 posts, 0 answers
  1. Ajo
    Ajo avatar
    1 posts
    Member since:
    Sep 2010

    Posted 27 Feb 2014 Link to this post

    I am working with Kendo UI Asp.Net wrapper.
    I have implemented a ListView and it is working.
    I need to set the width of ListView items(li inside ul) dynamically using jquery by class name

        var col_width = jQuery('#test_col').outerWidth();

        // set product width
        jQuery(".products .product").css('width', col_width - 0.1);

    But it is not working. I have checked the page source from my browser. But I couldn't find any HTML generated for ListView control, only javascript and data.
    how can I access these li elements which I have defined in my template using jquery.

    <h2 class="font2">Most Popular</h2>
    <ul id="MostPopular" class="products products_scroll row">

    </ul>
    </p>

    <script type="text/x-kendo-tmpl" id="template1">
    <!--PRODUCT-->
    <li class="product ">
    <div class="inside">
    <div class="image_wrapper">
    <div class="image">
    <a href="/home/subcategory?CategoryUrlKey=0&SubCategoryUrlKey=0&SubCategoryUrlKey=0"><img src=" #:ThumbImage#" class="product-retina first" data-image2x="#:LargeImage#" alt="Slate Blue Printed Saree"><img class="second" src="#:MouseOverImage#" alt=" slate blue printed saree" /></a>
    </div>
    </div>
    <div class="text_wrapper">
    <div class="sort_price">790.0000</div>
    <div class="price-box">
    <span class="regular-price" id="product-price-11417">
    <span class="price">£#:kendo.toString(Price, "c")#</span>
    </span>
    </div>
    <div>SKU : #:ProductID#</div>
    <div class="info font5"><a href="https://www.jtplaza.com/best-sellers/slate-blue-printed-saree.html" title="Slate Blue Printed Saree">Slate Blue Printed Saree</a></div>
    </div>
    </div>
    </li> <!--PRODUCT EOF-->

    </script>


    <ul id="MostPopular"></ul><script>
    jQuery(function(){jQuery("#MostPopular").kendoListView({"dataSource":{"transport":{"prefix":"","read":{"url":"/Home/Products_Read"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ProductID":{"type":"number"},"ProductName":{"type":"string"},"ThumbImage":{"type":"string"},"MouseOverImage":{"type":"string"},"LargeImage":{"type":"string"},"Price":{"type":"number"}}}},"data":{"Data":[{"ProductID":30313,"ProductName":"Patiala Suits","Price":15.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30313_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/Salwar-Patiala-Suits-Womens-Wear-30313_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/30313_01.jpg"},{"ProductID":30426,"ProductName":"Salwar Suits","Price":12.500,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30426_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-patiala-suits-womens-wear-30426_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-patiala-suits-womens-wear-30426_01.jpg"},{"ProductID":30624,"ProductName":"Salwar Suits","Price":19.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30624_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30624_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30624_01.jpg"},{"ProductID":30628,"ProductName":"Salwar Suits","Price":15.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30628_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30628_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30628_01.jpg"},{"ProductID":30633,"ProductName":"Salwar Suits","Price":18.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30633_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30633_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30633_01.jpg"},{"ProductID":30635,"ProductName":"Salwar Suits","Price":12.500,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30635_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30635_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30635_01.jpg"}],"Total":6}},"template":kendo.template($('#template1').html())});});
    </script>
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 28 Feb 2014 Link to this post

    Hello Ajo,

    ListView items are available in the widget DOM after it is data bound, i.e after dataBound event is triggered, and all direct children of the wrapper ( ul#MostPopular ) element are the widget items. You can get reference to them, after the widget is data bound, as follows: jQuery("#MostPopular").children()

    Regards,
    Nikolay Rusev
    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