Telerik Forums
Kendo UI for jQuery Forum
6 answers
117 views
I am testing and evaluating kendoUI. I am filling the grid with data form a remote database, the info came correctly and I can fill the grid. I can filter, sort, and also I can show lines with the pageSize command. The only one that is not working for me is the "pageable", down the grid it appears all the buttons, but It seems not to have any register, and there they are. Of course any pageable button works. Here is my simple code:

Here is the link to web:  http://www.midilusa.com/sistema/prueba_kendoUI/prueba.php

Here is it´s code:


        <div id="example" class="k-content">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: {
                                    url: "pais.php",
                                    dataType: "json"
                                }
                            },
                            schema: {
                                total: function(response) {
                                return response.total; // total is returned in the "total" field of the response
                                },   
                            },                      
                        pageSize: 10,      
                        },
                        pageable: true,
                        filterable: true,
                        sortable: true,
                        groupable: true,
                    });
                });
            </script>
        </div>



Rosen
Telerik team
 answered on 01 May 2014
5 answers
209 views
Hello,

I have a small scroll view generated dynamically when I retrieve some data from the server.

Basically, I have the following template:

<script id="friendsToInvite-template" type="text/x-kendo-template">
            <p class="friendName">#= name #</p>
            <div style="width: auto; height: 180px; background: url('https://graph.facebook.com/#= fbId #/picture?type=large')  no-repeat center;"></div>
            #if( invited ) {#
                <p class="friendsButtons"><button class="button2 btn-green unInvite" data-fbid="#= fbId #" data-eventid="#= eventId #">Invited</button></p>
            #} else {#
                <p class="friendsButtons"><button class="button2 btn-orange invite" data-fbid="#= fbId #" data-eventid="#= eventId #">Invite</button><!-- /*<button class="button2 btn-grey">Dont show me again</button>*/ --></p>
            #}#
        </script>

As you can see, I have a button with a class of invite or uninvite depending on the scenario.
In my js, I have a event listener binded to the on click action that trigger a js function. But unfortunately, I'm noticing that after the second element, the buttons do not trigger the js function as they are generated when the user scroll from an element to another ( I believe its better for perfs, great) 


So my question is, how do I bind an event to my button in this scroll view for every element generated by Kendo UI when a user is swiping from an element to another ? If possible, I'd like to avoid listening for a user moving from an element to the other to rebind my buttons again (and onclick does not work on phonegap I think).

Thank You :)
Kiril Nikolov
Telerik team
 answered on 01 May 2014
2 answers
192 views
In KendoUI chart, when aggregating series data for a category, one would expect that the dataItem for the point would contain all the actual data points used to construct that dataItem. Since the point on the graph is an aggregate, its reasonable to assume that more than one piece of data was used to construct it.

For example, given the series data:
                   [
                      {'Operation': 'A', 'Cost': 2.5, 'StartTime':'2014-04-02T00:00:00-07:00'},
                      {'Operation': 'B', 'Cost': 2.5, 'StartTime':'2014-04-02T00:00:00-07:00'},
                      {'Operation': 'C', 'Cost': 3, 'StartTime':'2014-04-03T00:00:00-07:00'},
                      {'Operation': 'D', 'Cost': 3, 'StartTime':'2014-04-03T00:00:00-07:00'}    
                    ]

Where categoryField is 'StartTime',  (value) field is 'Cost' and aggregate is 'sum',  we can then assume that we will have 2 data points on the graph:

2014-04-02 = 5
2014-04-03 = 6

When we look at the dataItem for the first point (in a tooltip for example), we would assume that somehow 'A' and 'B' would be represented.  However the data point looks like 'A', with 'Cost' set to the aggregate of A+B.

So it seems instead of returning the set of items in the point aggregate, kendo is doing some sort of weird merging of the point (probably just taking the first) and merging in the aggregate.

Take a look at this example, when hovering the chart item, look at the console output for the dataItem.   Also note series.data is now missing B and D respectively.

http://trykendoui.telerik.com/@jsconnell@2ndwatch.com/ASEM

Am I wrong to make this assumption, or is this a bug?
James
Top achievements
Rank 1
 answered on 30 Apr 2014
2 answers
73 views
I've been having a problem getting the Grid widget to render out.  I've been getting the following output with no table, header or footer.

[object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object][object Object]

I finally traced the problem to a reference to the Dataviz script that I had referenced next to Kendo Web.  I tried the kendo.all and the problem went away but not before wasting a bunch of time trying to figure out what the problem was.  I tried reproducing the problem with one of the Grid examples in the Dojo but no luck.  Should the scripts not be used side by side in this way?
RES
Top achievements
Rank 1
 answered on 30 Apr 2014
1 answer
131 views
I wish to set the Target bar to show a range.  My desire is to have the target bar show the min and max value (range) and then a line as the current value.  Right now I can only set the target value Max which shows a bar from the origin of the chart to the set value.  I wish to control both ends of the target bar.   Is this possible.
Iliana Dyankova
Telerik team
 answered on 30 Apr 2014
1 answer
2.4K+ views
Hello Telerik,

I want to handle the "enter" key while keyboard navigation is enabled.

I could handle the keydown event within the tbody.

I need to handle a keypress event in a custom editor too. And here comes the trouble.. I registered a keypress event in the custom editor but is never fired with the "enter" key. The other keys like letters and numbers fire the event.

I could reproduce my code logic here:
http://trykendoui.telerik.com/onaD

am I missing something? My requirement is to handle keydown => keypress => and keyup in the editor.
The keydown and keyup is firing ok. 

Can you help me?

Thank you in advance, 

regards
Vladimir Iliev
Telerik team
 answered on 30 Apr 2014
2 answers
121 views
I'm using multiple treeviews on a page, bound to WCF services on a NTLM authenticated website.  If more than a single treeview is requesting data to come from the webservice only the first works and the others immediately fail.  On the server side for some reason it's because the subsequent requests are coming in unauthenticated.  However if I put in a setTimeout()s on the extra treeviews so they load sequentially there's no errors.  Instead of relying on an uncertain setTimeout()s, is there any way to have a treeview retry it's dataload on failure, or do you have any ideas on how to get multiple simultaneous requests to NTLM authenticated wcf services to work?
Elizabeth
Top achievements
Rank 1
 answered on 30 Apr 2014
5 answers
181 views
I have angular kendo setup in my web app and it runs GREAT! (Bit of a learning curve but that's how things go). I want to know test that directives i've written work properly and would LOVE to be able to test the with the kendo directives i'm looking for.
Now for the code

resize-directive.js
01.app.directive("ibsResizeGraphDirective", ['$window', function ($window) {
02.    return function (scope, element) {
03.        //Bind to window resize so that we can have the elements respond.
04.        //There is no element.resize event and watching for width change doesn't work
05.        angular.element($window).bind('resize', function () {
06.            scope.$apply();
07.        });
08. 
09.         //Watch for element.width() change
10.        scope.$watch(function () {
11.            return $(element).width();
12.        }, function (newValue, oldValue) {
13.            if (newValue != oldValue) {
14.                scope.graph.options.chartArea.width = $(element).width();
15.                // Turn off transitions so that the graphs don't redraw everytime the window changes
16.                if (oldValue != 0 && scope.graph.options.transitions) {
17.                     scope.graph.options.transitions = false;
18.                 }
19.                 scope.graph.refresh();
20.            }
21.        })
22.     //...
23.    };
24.}]);

as you can see i'm trying to basically check the size of the chart's element and set the chartArea.width accordingly.The biggest problem i'm having is getting the chart to even show up. To help make things easier on our end we decided to wrap up our chart declaration into a directive!

chart.js
01.app.directive('ibsChart', [ "ibsMainService", function (ibsMainService) {
02.    return {
03.        // Restrict E for element
04.        restrict: 'E',
05.        // Here we setup the template for the code we want to replace our directive
06.        template:"<div ng-show='graph.options.title.text != null' \n\
07.                       ibs-resize-graph-directive \n\
08.                       ibs-owner-warehouse-listener-directive \n\
09.                       ibs-graph-culture-caption \n\
10.                       kendo-chart='graph' \n\
11.                       k-options='chartOptions' \n\
12.                       k-data-source='dataSource' \n\
13.                       class='col-lg-4'/>",
14.        replace: true,
15.        scope: {
16.            // ...
17.        },
18.        controller: function($scope){
19.            //...
20.        },
21.        link: function (scope, element, attrs) {
22.            //...
23.    };
24.}]);


And i've attached a screenshot of the debug output

1. There is not chart rendered (which I know it's because i'm not appending it to the body)
2. There is no element in the body after my scripts (which when doing the angular-kendo tests they appear)
3. I get the prototype returned from my element.find('div')

This is definitely a longer post but I wanted to be as thorough as I could to get a good answer. Anyone have any thoughts?
Collin
Top achievements
Rank 1
 answered on 30 Apr 2014
1 answer
218 views
Is there any way to imitate what checking the 'all day event' check box in the Kendo Scheduler does?
e.g. the current functionality is it changes the boxes to DatePicker instead.

I'm not sure if the best practice is to just destroy and re-create the widgets as the user checks/unchecks the box. Is there any other way, like another method that does this? I am using a custom form outside the scheduler for this.

Currently I have the following which just changes the format to use only Date, but the button for selecting time is still there.
http://jsbin.com/binetupa/1/

Cheers
Georgi Krustev
Telerik team
 answered on 30 Apr 2014
2 answers
696 views
I have a kendo grid plugged on a OData service providing date into the Microsoft date format and everything is working like a charm.

However, the OData service will be upgraded to be ISO 8601 compliant.  Kendo grid seems to handle it very well.... except for one thing: Milliseconds.

Indeed, even if I set the column format to {0:yyyy-MM-dd HH:mm:ss.fff}, the displayed milliseconds are always set to 0.

Ex:

-With Microsoft date format, the OData value /Date(1376439064929-0400)/ will be displayed as 2013-08-13 13:31:04.929
-With ISO 8601 date format, the OData value  2013-08-13T20:11:04.9297826 will be displayed as 2013-08-13 20:11:04.0

Is it a bug or is this the expected behavior from the Kendo Grid?

Best regards,

Simon

P.S. I know the ISO date format isn't officially supported by OData but Kendo already did most of the job for handle the ISO date format...
Simon
Top achievements
Rank 1
 answered on 30 Apr 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
Drag and Drop
Application
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
DropDownTree
ListBox
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
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?