Telerik Forums
Kendo UI for jQuery Forum
1 answer
165 views
I'm setting the datasource of the sparkline to a json result which has 365 days of data.  I plan to use the sparkline to aggregate the data and plot a smaller subset of data points as 365 is not something you'd want to plot in a small area.  I set the baseUnit of the date categoryAxis to months so it will plot 12 points, which it does, but the width is out of control...  it spans way beyond the confines of my plot area.

I think the problem lies with the width algorithm of sparklines when using baseUnits/aggregate w/ a date category axis.  Even though we are only plotting 12 points, the sparkline behaves as if it is plotting 365.  Documentation states that, "The width of line, area and column sparklines is determined by the number of data points".  Help me understand this... other charts are responsive yet the sparkline is not?  The sparkline is not taking the final number of datapoints after baseUnits/aggregates are applied with the date axis.

$("#sparkQtyVehicles").kendoSparkline({
    series: [{
        name: "QtyVehicles",
        aggregate: "avg",
        type: "column",
        field: "QtyVehicles"
    }],
    categoryAxis: {
        type: "date",
        baseUnit: "months",
        field: "Date"
    },
    tooltip: {
        visible: true,
        shared: false,
        template: $('#sparkQtyVehiclesTemplate').html()
    },
    theme: "bootstrap"
});

Iliana Dyankova
Telerik team
 answered on 28 Feb 2014
3 answers
138 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.7K+ 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
474 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
329 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
140 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
178 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
173 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
222 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
116 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
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
Map
Drag and Drop
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
MultiColumnComboBox
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
BulletChart
Licensing
QRCode
ResponsivePanel
TextArea
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?