I realize that Telerik has posted a roadmap to releasing an Angular 2 version for Kendo UI. That's awesome, however; our company has already begun developing using Angular 2 and our release map is not inline with Telerik's. One strategy we are considering is to use KendoUI Angular 1 directives and the Angular 2 UpgradeAdapter. This will enable us to use Angular 1 directives inside of a Angular 2 implementation.
Has anyone used the UpgradeAdapter to leverage Kendo UI Angular 1 directives inside of Angular 2 using upgradeNg1Component?
Thanks!
Hi Telerik team,
I have a grid with some columns have empty values. When i click sort on the empty values column, the grid still do the sort. It just happen only in Chrome.
you can see the example here
http://dojo.telerik.com/oYaTa/16
Thank you

Hello:
We have been struggling for a few days with inline editing with a nested Grid.
currently the grid is constructed as follows:
<div data-role="grid" data-source="{transport:{read:function(e){ e.success(eqCharges)}, update: function(e){ e.success(); }, destroy: function(e){ e.success();}, error:function(e){debugger;}},schema:{model:{id:'sbwrkordrchrge_rn'}}}" data-editable="{mode: 'inline'}" data-scrollable="false" data-toolbar="['create']" data-columns="[ {command:'edit', attributes: {style:'width:10%;'}}, {field: 'sbwrkordrchrge_rn', hidden:true}, {field: 'sbwrkordrchrge_qntty', title:'Quantity', type:'number'}, {field: 'sbwrkordrchrge_dscrptn', title: 'Description'}, {field: 'sbwrkordrchrge_unt_cst', title: 'Unit Price', format: '{0:c}'}, {field: '', title: 'Price', format: '{0:c}'}, {field: '', title: 'Status'}, {command: 'destroy', attributes: {style:'width:10%;'}} ]"></div>
the Grid displays as expected. the Edit command enables editing as it should. the problem arises when "update" or "cancel" are pressed while editing: neither has any function.
digging into the kendo.all.js file shows that upon cancel or update the data-uid's become mismatched- this appears to happen in the 'pristine data' function.
Any assistance at all is appreciated.
I'm looking at using the Pivot grid to allow some simple data analysis, attaching to an OLAP data source using msmdpump. One of the dimensions of the cube I am working with has rather a lot of rows (~15000) which is giving me a performance problem. Typically users would only want to compare 3 or 4 of these rows - but the dimension filter doesn't seem to handle such long lists of options. Similarly, expanding the whole grid with that dimension selected isn't really an option, as no one could sensibly use 15000 rows of data, even if they could be rendered in a timely manner.
Is there some way to just request a subset of a particular dimension from the cube, so that users could preselect the information for that particular dimension, allowing the Pivot Grid itself to deal with more sensible data sizes?
Is there a way to prevent default in the autocomplete change handler?
I don't want them to exit unless they type in a valid value from the data source. I tried e.preventDefault() but it doesn't seem to work.
Hi
I am trying to center align a TextBox in a diagram.
I tried using http://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/layout#configuration-alignContent, however there is very little information available on how to use it and I couldn't get it to work.
I also tried creating an html template and applying css styles (vertical-align: center / margin:0 auto) to it to center the text and it messes up the diagram completely.
I can't seem to create a dojo snippet at this time. Please edit the Diagram example (http://demos.telerik.com/kendo-ui/diagram/index) and center the text.
I am wondering if its possible to use Nunjucks to iterate through local data that populates into a Kendo UI grid. This is my first time using both Kendo and JS template engines so I am very new to this. Basically, I want to have Nunjucks iterate through my data (in script) and then have it populate into the Kendo grid. I am building this for demo purposes so there is no need to get remote data, now. I am not sure how to accomplish this. Can someone point me to the right direction. Thanks! Here is my code:
<table id="grid"> <colgroup> <col style="width: 150px" /> <col style="width: 300px" /> <col style="width: 120px" /> <col style="width: 120px" /> <col style="width: 120px" /> <col style="width: 120px" /> </colgroup> <thead> <tr> <th data-field="clientLogo" data-template="<img src='#= clientLogo #' />">Client Logo</th> <th data-field="companyName" data-template="<a href='\\#'>#= companyName#</a>">Company Name</th> <th data-field="clientID">Client ID</th> <th data-field="lastEdited">Last Edited</th> <th data-field="lastEditedBy">Last Edited By</th> <th data-field="status">Status</th> </tr> </thead></table><script> //nunjucks to iterate through data below var clients = [ { clientLogo: "/images/lowes.png", companyName: "Lowe's Home Improvement", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/verizon.png", companyName: "Verizon Wireless", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/mcdonalds.png", companyName: "McDonald's Corporation", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/att.png", companyName: "AT&T Wireless & Network Information", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/stjoseph.png", companyName: "St Joseph Healthcare System", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/proteinbar.png", companyName: "Protein Bar", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"}, { clientLogo: "/images/invision.png", companyName: "InVisionApp", clientID: 123456, lastEdited: "02/15/2016", lastEditedBy: "Barbara Johnson", status: "In Progress"} ];// end iteration
$("#grid").kendoGrid({ dataSource: clients //inline data - to change to remote data });</script>

Hello
I would like to "remove" a set widget and replace it by another widget, depending on what is chosen on a kendouidropdownlist (called "A" to reference it later on).
The input HTML element with ID = "eventobjectvalue" on which I want to set the widget will be appended before putting a widget on it:
$('#eventmaskdiv0').append(
...
+"<div name='eventobjectvaluediv' id='eventobjectvaluediv' style='float:left;'>"
+"<input id='eventobjectvalue' />"
+"</div>"
+"</div>"
);
Before attaching a widet on it, it looks like a simple and unformatted input element.
Now I set a kendoNumericTextBox widget on the element "eventobjectvalue" by choosing "Set numericbox" from the dropdownlist "A". Fine, will be done...
In the next step I choose "Set dropdown" from dropdownlist "A" and what happens can be seen in attached files (doubled). That brought me to the idea I have to delete a Widget first before attaching another one...
After some research I found the KendoUI functions remove, empty and destroy: http://docs.telerik.com/KENDO-UI/intro/widget-basics/destroy
Playing around with it doesn't help (because I'm probably doing something wrong).
$("#eventobjectvalue").empty(); -> same visual effect as in attached file doubled
$("#eventobjectvalue").data("kendoNumericTextBox").destroy(); -> same visual effect as in attached file doubled (even when making sure a numerictextbox is set on element eventobjectvalue)
kendo.destroy($("#eventobjectvalue")); -> same visual effect as in attached file doubled
$("#eventobjectvalue").remove(); -> The Widget is removed BUT the element eventobjectvalue as well (so unable to attach another Widget on it)
What am I doing wrong and which mentioned function do I have to use? I would like to switch between the Widget kendoNumericTextBox and kendoDropDownList attached to the same HTML element (if possible). The switch should happen depending on what is chosen from apersistent dropdownlist "A" (onchange).
Regards
Hello
I had a hard time to find/focus the problem and can't find any solution. I have several cascading Kendoui dropdownlists in my project. I can't use the functionality "cascadeFrom" because I have to fill dropdownlist dynamically. But I assume the problem covers also the functionality "cascadeFrom" as mentioned here.
Here is a working example to reproduce the wrong behaviour. To see the problem you have to follow the steps after the code section:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Kendo UI Snippet</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.ui.core.min.js"></script></head><body><input id='dropdownfirst'/><input id='dropdownsecond'/><script>$("#dropdownfirst").kendoDropDownList({ dataTextField: "showtext", dataValueField: "id", optionLabel: { showtext: "Choose option...", id: "-1"}, dataSource: { data: [{"id": "1", "showtext": "A"}, {"id": "2", "showtext": "B"}] }, change: function(e) { // Empty datasource of dropdownsecond $("#dropdownsecond").data("kendoDropDownList").dataSource.data([]); // Refill datasource of dropdownsecond var newDataSource = [{"id": "1", "showtext": "3"}, {"id": "2", "showtext": "4"}]; $("#dropdownsecond").data("kendoDropDownList").dataSource.data(newDataSource); }});$("#dropdownsecond").kendoDropDownList({ dataTextField: "showtext", dataValueField: "id", optionLabel: { showtext: "Choose option...", id: "-1"}, dataSource: { data: [{"id": "1", "showtext": "1"}, {"id": "2", "showtext": "2"}] }, change: function(e) { alert ("change event of dropdownsecond fired"); }});</script></body></html>After starting the code snippet you should see 2 dropdownlists. Now proceed the following steps to see when the change event of dropdownsecond will not fire:
I assume that the second dropdownlist is internally still set to "4" after step 3 and therefore will not fire on step 4 because no change was detected. My project heavily depends on a proper working change event with up to four dropdownlists in a row. I guess this problem came up after Telerik has removed the optional value from DOM (see documention in blue box below "OptionLabel").I don't mind the optionLabel is no more put into DOM but the dropdownlist should, even in such a case, brought into a state where the change event still will fire.
What do you suggest me to do to solve this problem? Workaround?
Regards
What do you suggest me to do