This is a migrated thread and some comments may be shown as answers.

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

1 Answer 161 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Ajo
Top achievements
Rank 1
Ajo asked on 27 Feb 2014, 07:05 PM
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>

1 Answer, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 28 Feb 2014, 06:41 AM
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!
Tags
ListView
Asked by
Ajo
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or