Telerik Forums
Kendo UI for jQuery Forum
3 answers
159 views
I have an issue with the ListView where having a comment in between the <li> and <a> tags causes the > not to show up.  For example:

<!-- This works -->
<li>
  <a>Foo</a>
</li>
 
<!-- This doesn't work -->
<li>
  <!-- This comment causes the arrow to not appear -->
  <a>Foo</a>
</li>

It seems like in the 2nd case, the comment should be ignored and the > character should still appear for the list item.
Kiril Nikolov
Telerik team
 answered on 28 Feb 2014
10 answers
1.8K+ views
When pasting from Word into the editor there is a lot of extra formatting styles that don't get automatically cleaned e.g.
<p style="text-align:justify;"></p>
<ul style="margin-top:0cm;" type="disc">
<li style="text-align:justify;tab-stops:list 36.0pt;"><span lang="EN-GB" style="font-family:'Arial','sans-serif';">
Also depending on the jQuery code used in the page you can get Sizzle attributes left in the saved html e.g.
<ul sizcache07677761204452295="38 16 10" sizset="false"><li sizcache07677761204452295="38 16 10" sizset="false" value="0">
What is the best way to clean this HTML on paste / during editing (clear formatting tool) / on save ?

We want to save just the structural formatting (H1-6/UL/OL/LI/STRONG/EM/A/IMG) with no styling (having removed the font/size/colour tools)

Thanks
Jan Hansen
Top achievements
Rank 1
 answered on 28 Feb 2014
1 answer
492 views
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>
Nikolay Rusev
Telerik team
 answered on 28 Feb 2014
1 answer
349 views
Hi,

I'm using kendo menu to create Menu in my application.
For a particular use case all sub-menu items are hidden (cssClass="hide" applied) for an item, but still parent menu item showing arrow key.
My appication dataSource for kendo menu is complex and have similar use case at deep level.
I don't want to show arrow icon on parent menu if all sub-menu items are hidden.
Please go through plunker (http://plnkr.co/edit/erYkvCkAs4jHyCyFEInt?p=preview) for more details. 

Thanks,
Vinay 
Iliana Dyankova
Telerik team
 answered on 27 Feb 2014
2 answers
154 views
Hi,

Weird issue with the height of a horizontal drag bar after dragging it when splitter set to percentage height.

Please see my fiddle that shows the problem http://jsfiddle.net/Tups/9gL5k/6/

If you drag the bar of the top splitter from right to left (making panel 1 smaller and panel 2 bigger), when you release the mouse the drag bar resizes and is too small.  If you then drag from left to right (making panel 2 smaller and panel 1 bigger) it resizes back to the correct size.

It seems this only relates to splitters set to a percentage height as the second splitter in the fiddle has a fixed height and doesn't have the problem.

Hopefully there is a solution as we have splitters at 100% the height of the page with horizontal scrollbars that are supposed to sit at the bottom of the screen but don't because of this.

Thanks
Allocate Software Internal Systems
Top achievements
Rank 1
 answered on 27 Feb 2014
13 answers
194 views
Hello

We are experiencing issue with Switch component. When user change position(tap), most of the ui elements is moving a little bit(1-2px?) and then return back to original position. This only occures on android devices(tested on Galaxy S Advance, reported from older devices too, simulator works fine). We are experiencing same behavior on few other views that doesnt contain Switch component(mostly views with long lists with scrollbar).

I am able to reproduce the problem with fresh new project from template(kendo mobile ui). Just change initial home view like this:

<div class="view-content">
            <h1>Welcome!</h1>
            <a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>
            <p>
                Telerik AppBuilderâ„¢ enables you to build cross-platform device applications regardless of your
                    development platform by combining the convenience of a local development toolset with the
                    power and flexibility of the cloud.
            </p>
            <input data-role="switch" data-on-label="" data-off-label=""/>
            <div class="img"></div>
        </div>
Kiril Nikolov
Telerik team
 answered on 27 Feb 2014
3 answers
192 views
Been fighting this for a couple of days with no easy solution.

What is the best way to have the contents of a section be 100%?  In another word, what is the best way to push the lower sections to the bottom of the view?

When I try:
this.control = jQuery('<ul id="' + this.id + '" ><li><span>Item 1</span><div id="c1" style="height:100%;">Content 1</div></li><li><span>Item 2</span><div id="c2" style="height:100%;">Content 2</div></li></ul>');
this.list = new kendo.ui.PanelBar(this.control.get(0),
                {
                    expandMode : 'single'
                });

Inspecting the HTML, c1 and c2 heights become "100px".  Seems to replace/ignore the setting.

I saw another thread of some lengthy code to expand the contents, but I need a generic way to manage N number of sections (not just two).

Also, it appears that PanelBar cannot be build dynamically.  Meaning, adding LI sections to UL section via jQuery.  The HTML shows, but it does not take on the behavior of the PanelBar.

Thanks.
            
Dimo
Telerik team
 answered on 27 Feb 2014
5 answers
244 views
Hi,

I'd like to specify a header template (http://demos.kendoui.com/web/combobox/template.html) for my MVVM Combobox. I've tried data-header-template and data-headertemplate. Neither works. Please advise.

data-template works fine, btw.

EDIT - added jsfiddle link: http://jsfiddle.net/6mHKF/20/

As you can see, the headerTemplate is ignored in the non-MVVM widget initialization method as well.

Thanks!
Vladimir Iliev
Telerik team
 answered on 27 Feb 2014
5 answers
125 views
Added approx. 600 records into ListView, only contain company names. Got "Terminated due to Memory Pressure" on iOS7, but work properly on iOS6.

Anything I can do?
Petyo
Telerik team
 answered on 27 Feb 2014
12 answers
2.1K+ views
Hi,
Is it possible to add built in Multiselect Drop-down in kendo grid. I have attached a sample snap shot of the problem.

Alexander Popov
Telerik team
 answered on 27 Feb 2014
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Drag and Drop
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?