Telerik Forums
Kendo UI for jQuery Forum
5 answers
428 views
Dear Telerik team,

is it possible to define more complex measures/aggregations than a simple sum for FLAT DATA?
... e.g. a calculating percentages, ratios, margins, etc. based on given datasource fields?

Simplified Example:

#these are the source data records:

Product        Category                      SalesChannel    Costs    Revenue
P1                 Mountain Bikes             Internet             2000    3000
P2                 Mountain Bikes             Internet             1000    2000
P3                 Mountain Bikes             Store                 3000    5000
P4                 Mountain Bikes             Store                 5000    6000
P5                 Accessoires                  Store                   100      150
P6                 Accessoires                  Internet                 80      100
P7                 Accessoires                  Store                     50        60
P8                 Accessoires                  Internet                 10        15

# We want to show the gross margin for each combination of category and sales channel with the formula:
      gross margin = (revenue-costs)/revenue

# This should lead to the following pivotgrid matrix as result:
                                                                      All Sales Channels
                                                                      Internet         Store        All Sales Channels
All Categories             Mountain Bikes             21,7%        28,6%        26,2%
                                   Accessoires                   40,0%        27,3%        31,3%
                                   All Categories                39,6%        27,3%        31,1%    

Thanks a lot for your suggestions
and best wishes from Germany
Jens
Georgi Krustev
Telerik team
 answered on 12 Nov 2014
1 answer
738 views
Is there any way to force a grid with virtual scrolling to recalculate its scroll bar?

I have a grid which is initialized whilst being hidden.  When i show the grid, i can get everything resized just fine, and the grid looks like it's ready for action.  However, if the grid has virtual scrolling enabled, the scrollbar will be visible, but set to a height of zero - meaning that whatever records are showing on the grid is all you can access, because the grid can't be scrolled down.  I can call myGrid.refresh(), but that doesn't appear to help.

As far as i can tell, the only simple way to correct this is to do another read operation myGrid.dataSource.read().  Is there any way around that?  It seems like overkill, since the grid is already set up just fine.  All it should really need to do is just recalculate the height of a row and then guess the full height - just like it would normally do.

I tried a number of work arounds, but i kept ending up with JS errors.  For example, i noted that the k-scrollbar-vertical element of the grid has a child div with the height which the grid has guessed it will need.  So it might look like this:

<div class="k-scrollbar k-scrollbar-vertical" style="width: 18px;">
     <div style="width:1px;height:8077.5599999999995px"></div>
</div>

Since that inner div is missing in my off-screen initialized grid, i tried inserting it manually.  Everything looked good then - the grid had a scroll bar and everything.  However, attempting to scroll just results in JS errors.

I've seen some other posts that are related to this, and it appears that non-visible initialization of the grid is "not supported".  But is there any way to just do this one thing - to force it to refresh the scroll bar data?

Kiril Nikolov
Telerik team
 answered on 12 Nov 2014
1 answer
161 views
Hi,

Like the Kendo (HTML/Javascript) charts have seriesClick event, does Kendo Gauges (both Radial and Linear) have any click events?

I want to have a drilldown option for gauges. See my codes below and help me please.


******************************
* My Linear Gauge code *
******************************

            $('.k-gauge').kendoLinearGauge({
                    pointer: { value: dataValue },
                    scale: { min: minValue, max: maxValue,  rangeSize: 15, vertical: true
                            labels: { color: 'white', template: _myFormat },
                            majorTicks: { color: 'white' },
                            minorTicks: { color: 'grey'},
                            ranges: _myRanges()
                    },
                    gaugeArea: { background : '#1E1E1E' }
            });

******************************
* My Radial Gauge code *
******************************

            $('.k-gauge').kendoRadialGauge({
                    pointer: { value: dataValue },
                    scale: { startAngle: angles.start, endAngle: angles.end,
                        min: minValue, max: maxValue, rangeSize: 15,
                        labels: { color: 'white', template: _myFormat },
                        majorTicks: { color: 'white' },
                        minorTicks: { color: 'grey'},
                        ranges: _myRanges()
                   },
                   gaugeArea: { background : '#1E1E1E' }
                });


Dimiter Madjarov
Telerik team
 answered on 12 Nov 2014
3 answers
365 views
Hi,

I have a huge problem with text box control on IE11 (in Chrome it works fine). From time to time all text box controls get disabled. It is very difficult to reproduce.

My application consists of 2 pages: home and details.

On the home page I have few dropdowns, few textboxes, grid control and tab strip. I select one of the items in grid control, and go to the details page. On details page I have editor control (and few more, but this one is relevant). What I noticed is that when I leave the focus in the editor control, press button to go to the home page, select item in the grid (which causes "loading" overlay to show and hide), then all text boxes are disabled. When I click on them, they don't receive the focus. Even when I put simple <input type="text" /> somewhere else in the page, it also gets blocked. When I navigate to details page, all textbox controls are blocked as well.

And this is the part when it become interesting. When I place the focus in the editor control in the details page, then the text boxes become enabled. And it doesn't have to be the same editor control than before. I have 2nd editor control on the details page and it works that way for both.

I tried profiling memory in IE, but nothing looks suspicious. 

Could you give me any hints? I know it is difficult to help when you don't actually see the code, but can you advice me when can I get more debug information which would help here?  

I'm using Kendo UI 2014.2.903 on Angular.js (v 1.2.26).

Any help will be appreciated.
Dimo
Telerik team
 answered on 12 Nov 2014
1 answer
216 views
While browsing through the grid API documentation http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveAsExcel , I ran across the saveAsExcel function which seems to suggest that the grid natively supports excel.  My other research and the following forum thread, http://www.telerik.com/support/code-library/export-grid-to-excel-27e793e949a2, seem to suggest that there is no built in excel export and it needs to be implemented manually.  Which of the two is correctm and does the saveAsExcel method actually exist, as it seems to be undefined in the grid object despite being present in the API documentation.  

I am guessing it behaves the same way, but I am also curious about the saveAsPDF method also present in the API documentation.

Thanks a lot.
Alexander Popov
Telerik team
 answered on 12 Nov 2014
2 answers
1.3K+ views
Where is the best place for documentation?  I am trying to add multiple rules to my validator but I have something that is causing it to default to the first rule.  Can you help with this?

01.<script>
02.    var myValidator = $('#keying_form').kendoValidator({
03.        rules: {
04.            custom: function (element) {
05.                var attr = $(element).attr('checkDates');
06.                if (typeof attr !== typeof undefined && attr !== false) {
07.                    console.log('validating a date--> ');
08.                    console.log(element);
09. 
10.                    var value = $(element).val();
11. 
12.                    if (value == null || value.length === 0) {
13.                        console.log('date is empty.');
14.                        return true;
15.                    }
16. 
17.                    var date = kendo.parseDate(value);
18.                    if (!date) {
19.                        console.log('date is invalid!');
20.                        return false;
21.                    }
22. 
23.                    console.log('date is valid.');
24. 
25.                }
26. 
27.                return true;
28.            },
29.            custom2: function (element) {
30.                var attr = $(element).attr('checkTime');
31.                if (typeof attr !== typeof undefined && attr !== false) {
32.                    console.log('validating a time--> ');
33.                    console.log(element);
34. 
35.                    var value = $(element).val();
36. 
37.                    if (value == null || value.length === 0) {
38.                        console.log('time is empty.');
39.                        return true;
40.                    }
41. 
42.                    var date = kendo.parseDate(value);
43.                    if (!date) {
44.                        console.log('time is invalid!');
45.                        return false;
46.                    }
47. 
48.                    console.log('time is valid.');
49. 
50.                }
51. 
52.                return true;
53.            },
54. 
55.        },
56.        messages: {
57.            custom: function (element) {
58.                return $(element).val() + ' is not a valid date.';
59.            },
60.            custom2: function (element) {
61.                return $(element).val() + ' is not a valid time.';
62.            }
63. 
64.        },
65.    });
66. 
67.</script>
Alexander Valchev
Telerik team
 answered on 12 Nov 2014
3 answers
70 views
If you group by resources and add resource item to data source, you have to set date in scheduler to display resource item added (scheduler.date(scheduler.date());).

Demo: http://dojo.telerik.com/eSodi
Alexander Popov
Telerik team
 answered on 12 Nov 2014
1 answer
210 views
Hi, 

Is it possible to stop opening dropdown when the multiselect box clicked?

We plan to bind multiselect control to a webservice and only want to open the dropdown when user enters 2 characters at least.

Regards

Serkan
Georgi Krustev
Telerik team
 answered on 12 Nov 2014
5 answers
286 views
I have a window that I'd like to toggle open and closed from a controller but since kendo creates it's windows outside of the body tag I cannot reference it using $scope.myWindow. What is the best way to access this window from a controller?
Alex Gyoshev
Telerik team
 answered on 12 Nov 2014
1 answer
88 views
I need a PanelBar's height after the user has expanded it. The problem is that I can't use the height during the expand event because the animation hasn't started or finished.

Is there a way I can have a callback when the animation is finished? Something like an "expanded" event? Is using setTimeout my only option?

Thanks!
Petyo
Telerik team
 answered on 12 Nov 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
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
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?