or
4 answers
136 views
Hello
I have a DataSource with Items and i want to add a "ng-click" to each data item, which should trigger the corresponding $scope function.
How can i add a "ng-click" to the items?
Thanks,
Werner
Alexander Popov
Telerik team
answered
on
10 Aug 2015
4 answers
317 views
Hi Guys!
I notice in the demo section of the Kendo UI mobile website under Mobile Framework -> Forms there appear calendar controls when clicking on the down-arrow of "Type date", "Type month" and "Type datetime-local" elements, in all simulator types "iOS", "Android", "Blackberry" and "Windows Phone".
I can see the calendar appearing but somehow something looks out of place as the calendar popup is displayed outside of simulator frame and with different look and feel from other mobile elements.
I'm wondering if the calendar control is really available in the Kendo UI Mobile suite ?
Cheers!
I notice in the demo section of the Kendo UI mobile website under Mobile Framework -> Forms there appear calendar controls when clicking on the down-arrow of "Type date", "Type month" and "Type datetime-local" elements, in all simulator types "iOS", "Android", "Blackberry" and "Windows Phone".
I can see the calendar appearing but somehow something looks out of place as the calendar popup is displayed outside of simulator frame and with different look and feel from other mobile elements.
I'm wondering if the calendar control is really available in the Kendo UI Mobile suite ?
Cheers!
Dimo
Telerik team
answered
on
10 Aug 2015
2 answers
181 views
Hello,
I am new on this forum and I tried already to find answer at my question between existing post but I couldn't find anything. Please redirect me if there is a similar thread around.
I have a Kendo Ui Gridview with some info and each row has some details (another Kendo UI gridview as in http://demos.telerik.com/kendo-ui/grid/hierarchy). I want to change the header color of the details gridview. I have tried to change the color of the main grid but it applies to the details gridview too.​
Any ideeas how i can achieve this?
Thank you in advance and please tell me if something it's unclear!
Alexandru Stefan
Top achievements
Rank 1
Rank 1
answered
on
10 Aug 2015
3 answers
126 views
Hi,
I have a scroll view with several embedded mobile views, each with 1 or more mobile list views on them. ​The list views are configured to use AJAX calls to get their data. To ease the scrolling experience, I load all the list view data as soon as the user navigates to the view with the scroller.
All works great, except that the ShowLoading icon will be ​shown as long as any individual list view​ is still busy with the ajax call. This will block the scroller from being used; which i do not want. My user should be able to swipe to other views while listviews are still loading. A progress indicator on the mobile listview itself (kendo.ui.progress) would be clear enough that it is still loading and will not block the scroller.
So my question is, what is the best approach to take here? Ideally, I would like to switch off the showLoading function for AJAX calls completely and use the kendo.ui.progress by default on any ajax call. Can that be centrally configured? I tried several approaches, but none of them seem to work properly.
Best regards,
Ruud
Petyo
Telerik team
answered
on
10 Aug 2015
3 answers
675 views
The title might be longish, but I couldn't be more concise. Yet the problem is rather simple and semi-popular: let's suppose we have a `kendoListView` with some data, bound to a view model (and thus data-initialized) like this:
HTML:
<ul data-role="listview" data-bind="source: dataSource" data-template="temp"></ul><script id="temp" type="text/x-kendo-template"> <li>#=id# #=name#</li></script>JavaScript:
var dataSource = new kendo.data.DataSource({ data: [ {id: 1, name: 'John Clausky'}, {id: 2, name: 'Filippo Divoni'}, {id: 3, name: 'Foo Bar'}, ]});var viewModel = kendo.observable({ dataSource: dataSource});kendo.bind($("body"), viewModel);When adding a new item to the dataSource, kendoListView is refreshed correctly. Same with filtering the dataSource. However, changing an existing item in the dataSource causes no visible changes in the widget. Here's the demonstration: http://dojo.telerik.com/AgEhi/2
When researching the problem, I've found plenty of answers on the internet, that the kendoListView widget simply has to be refreshed manually with `refresh() function. But why the widget is properly refreshed when adding a new data item then? Moreover, when kendoListView was not bound via view model, everything works just fine (demonstration: http://dojo.telerik.com/EgidE).
I've found the problematic moment in the source code. It turns out the refresh() function is called always when manipulating the ​underlying DataSource, however it's not always refreshing the widget itself (kendo.listview.js:184, at least in the copy I have; I commented out the parts which I find irrelevant to the problem):
01.refresh: function(e){02. 03. // ...04. 05. if (e.action === "itemchange") {06. if (!that._hasBindingTarget() && !that.editable) {07. data = e.items[0];08. item = that.items().filter("[" + kendo.attr("uid") + "=" + data.uid + "]");09. 10. if (item.length > 0) {11. idx = item.index();12. 13. that.angular("cleanup", function() {14. return { elements: [ item ]};15. });16. 17. item.replaceWith(template(data));18. item = that.items().eq(idx);19. item.attr(kendo.attr("uid"), data.uid);20. 21. that.angular("compile", function() {22. return { elements: [ item ], data: [ { dataItem: data } ]};23. });24. 25. that.trigger("itemChange", {26. item: item,27. data: data28. });29. }30. }31. 32. return;33. }34. 35. // ...36. 37. for (idx = 0, length = view.length; idx < length; idx++) {38. if (idx % 2) {39. html += altTemplate(view[idx]);40. } else {41. html += template(view[idx]);42. }43. }44. 45. that.element.html(html);46. 47. // ...48.},The problem is in the first if statement (line ​5). When a data item is modified, the condition is met (a.action is equal "itemchange"). Then that._hasBindingTarget() evaluates to true, when the widget is data-initialized (is using a view model) and thus skips straight to the return statement. This is also why the item is updated when no view models are involved (line ​7) and why the widget is rebuilt when adding new data item or filtering the data (line 37).
As suspected, modifying the first if statement to always refresh the data, miraculously solves the problem, despite everyone saying it has to be done manually (and thus calling the refresh() function twice actually, which also solves the problem, "but" ...).
What was the reasoning for such blockade? Can I safely modify the if statement to solve my problem? What other features can potentially fail afterwards? All information about this will be invaluable.
Cheers, Thomas
Nikolay Rusev
Telerik team
answered
on
10 Aug 2015
2 answers
153 views
I am using kendo grid to populate json data returned from Web API dynamically, fileds are not fixed in this case. I want below functionality:
"Load from Web API and append more Grid records as the user scrolls down in Kendo Grid"
Is there any such feature/ solution available in Kendo UI. Appreciate if any one shares it.
Kiril Nikolov
Telerik team
answered
on
10 Aug 2015
1 answer
111 views
I have a grid. The filtring is working in some cases like a subcompany but doesn't work in almost all other. This is a code:
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/angular"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css" /> <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script> <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script> </head> <body> <div id="example" ng-app="KendoDemos"> <div ng-controller="MyCtrl"> <div kendo-grid="grid2" k-options="gridOptions" k-rebind="gridOptions" id="grid" k-on-change="handleChange(data, dataItem, columns)" k-selectable="true"> </div> </div> </div> <script> var subscriberslistItems=[{"monthlyDBID":1603,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Prima","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Company1","firstName":"John","lastName":"Meffey","badge":38220010,"curLocation":"52","curLocationDescription":"Out","idNum":"19294","jobTitleID":4,"jobTitleDescription":"Developer","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Desc1","accessProfileID":1,"accessProfileDescription":"Profile 1","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"6523562","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"09-7990151","city":"","area":"","zipCode":"","mobile":"050-4224606","fax":"","email":"ayaa10@gmail.com","parkingSpot":"","validFromDate":366854400,"validToDate":505008000,"recordIndex":1},{"monthlyDBID":1622,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 2","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child Company 2","firstName":"Tim","lastName":"Tompson","badge":38220000,"curLocation":"52","curLocationDescription":"Out","idNum":"19180","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 3","accessProfileID":1,"accessProfileDescription":"Profile 2","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"8044472","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"03-5666555","city":"","area":"","zipCode":"","mobile":"052-3233373","fax":"","email":"","parkingSpot":"","validFromDate":368064000,"validToDate":505008000,"recordIndex":2},{"monthlyDBID":1604,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 3","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child 1","firstName":"Tim","lastName":"Tompson","badge":38220029,"curLocation":"52","curLocationDescription":"Out","idNum":"8177","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 7","accessProfileID":1,"accessProfileDescription":"Profile 5","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"5219217","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"","city":"","area":"","zipCode":"","mobile":"050-6996801","fax":"","email":"nave@polfin-ins.co.il","parkingSpot":"","validFromDate":366854400,"validToDate":505008000,"recordIndex":3},{"monthlyDBID":1605,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 7","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child 7","firstName":"Hanna","lastName":"Lim","badge":38210651,"curLocation":"52","curLocationDescription":"Out","idNum":"19597","jobTitleID":4,"jobTitleDescription":"Software Developer","groupID":13,"groupDescription":"group 5","categoryID":4,"categoryDescription":"category 1","accessProfileID":4,"accessProfileDescription":"Profile 3","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"8959159","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"03-5168855","city":"","area":"","zipCode":"","mobile":"054-3001178","fax":"","email":"hana@orel","parkingSpot":"","validFromDate":366854400,"validToDate":505008000,"recordIndex":4},{"monthlyDBID":1606,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 10","subCompanyDBID":12,"subCompanyID":"","subCompanyName":"Child 1-2","firstName":"Martin×™","lastName":"Shepard","badge":38220034,"curLocation":"52","curLocationDescription":"Out","idNum":"2197","jobTitleID":4,"jobTitleDescription":"Developer","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 7","accessProfileID":1,"accessProfileDescription":"Profile 5","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"6260067","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"03-6257147","city":"","area":"","zipCode":"","mobile":"050-6828838","fax":"","email":"tzahim@charisma-ins.co.il","parkingSpot":"","validFromDate":367113600,"validToDate":505008000,"recordIndex":5},{"monthlyDBID":1607,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 8","subCompanyDBID":12,"subCompanyID":"","subCompanyName":"Child 4","firstName":"Netanel","lastName":"Black","badge":38220032,"curLocation":"52","curLocationDescription":"Out","idNum":"72481","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 7","accessProfileID":1,"accessProfileDescription":"Profile 5","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"1471214","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"098840010","city":"","area":"","zipCode":"","mobile":"052-5262333","fax":"","email":"rafizakar@walla.co.il","parkingSpot":"","validFromDate":367113600,"validToDate":505008000,"recordIndex":6},{"monthlyDBID":1608,"monthlyID":"","parkDBID":2,"companyDBID":34,"companyID":"","companyName":"Company 4","subCompanyDBID":10,"subCompanyID":"","subCompanyName":"Child 4","firstName":"Mishael","lastName":"Akerman","badge":38220037,"curLocation":"52","curLocationDescription":"Out","idNum":"313043","jobTitleID":4,"jobTitleDescription":"Driver","groupID":0,"groupDescription":"","categoryID":4,"categoryDescription":"Category 6","accessProfileID":1,"accessProfileDescription":"Profile 4","monthlyType":2,"monthlyTypeDescription":"Standard","priceTableID":0,"carPlate1":"7140229","carPlate2":"","carPlate3":"","carPlate4":"","carPlate5":"","address":"","phone":"09-9514169","city":"","area":"","zipCode":"","mobile":"050-5281348","fax":"","email":"amichel@bezeqint.net","parkingSpot":"","validFromDate":367113600,"validToDate":505008000,"recordIndex":7}]; angular.module("KendoDemos", [ "kendo.directives" ]) .controller("MyCtrl", function($scope){ gridScript = { /* read: companieslistItems,*/ dataSource: { data: subscriberslistItems, pageSize: 10 }, columns: [ {field: "manageName", title: "Name"}, {field: "manageNumber", title: "Number", width: "78px"}, {field: "manageCategoryDescription", title: "Desc",width:"180px"}, {field: "manageProfileAccess", title: "Access", width: "107px"}, {field: "manageParkingSpot", title: "parkingSpot", width: "107px"}, {field: "companyName", title: "CompanyName",width: "107px"}, {field: "subCompanyName", title: "subCompany",width: "107px"}, {field: "curLocationDescription", title: "curLocation", width: "78px"}, {field: "jobTitleDescription", title: "jobTitle", width: "107px"}, {field: "groupDescription", title: "group", width: "107px"}, {field: "idNum", title: "idNum", width: "107px"}, {field: "manageAddress", title: "manageAddress", width: "107px"}, {field: "manageCity", title: "City", width: "107px"}, {field: "manageArea", title: "Area", width: "107px"}, {field: "manageTelephone", title: "Phone", width: "107px"}, {field: "manageCell", title: "cell", width: "107px"}, {field: "manageEmail", title: "Email", width: "147px"} ], rowTemplate: "<tr data-uid='#: uid #' class='hasContextMenu' role='row' data-companyName='#: companyName#'>" + "<td colspan='1' style='text-align: center;' class='statusTemplate'> {{dataItem.firstName}} - {{dataItem.lastName}}</td>" + "<td colspan='1' style='text-align: center;' class='valDiscount'>{{dataItem.badge}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.categoryDescription}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.accessProfileDescription}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.parkingSpot}}</td>" + "<td colspan='1' style='text-align: center;' class='valCompany'>#: companyName#</td>" + "<td colspan='1' style='text-align: center;' class='valSubCompany'>{{dataItem.subCompanyName}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.curLocationDescription}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.jobTitleDescription}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.groupDescription}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.idNum}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.address}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.city}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.area}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.phone}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.mobile}}</td>" + "<td colspan='1' style='text-align: center;' >{{dataItem.email}}</td>" + "</tr>", filterable: true }; $scope.gridOptions = gridScript; }) </script> </body> </html>
Does somebody know why? Please, look at attached code.
Thanks!
Boyan Dimitrov
Telerik team
answered
on
10 Aug 2015
1 answer
103 views
Hello,
I'd like to use the KendoUi-Editor inside of umbracos backoffice as a property editor.
I want a package that I can reinstall on all umbraco installations I use, for that I created a folder with a package.manifest using those two docs:
package.manifest:
http://umbraco.github.io/Belle/#/tutorials/manifest
creating a property editor:
http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor
Can someone give me an example how I can integrate the editor into umbraco?
Alex Gyoshev
Telerik team
answered
on
10 Aug 2015
3 answers
242 views
If I just copy one of the simple examples and paste it into my code the only thing it renders are the legend and the labels. I have to set renderAs to canvas in order for it to show up.
I have all the right css and js files loaded but still I get nothing if I don't render as canvas.
Happens on all browsers. See attached image
This is my code:
data returned is:
[{Key:Male,Value:42},{Key:Female,Value:​29},{Key:​Other,Value:​16},{Key:Unspecified,Value:31}]
<div id="genderChart" ng-controller="GenderChartController" class="chart"></div>
<div id="workingChart" ng-controller="GenderChartController" class="chart"></div>
$("#genderChart").kendoChart({ dataSource: { transport: { read: function (options) { RadiusAjax.get('Person/GetPersonGenderMetrix').then(function (data) { options.success(data); }) } }, sort: { field: "Key", dir: "asc" } }, theme: "material", legend: { position: "bottom" }, seriesDefaults: { type: "pie" }, series: [{ type: 'pie', field: "Value", categoryField: "Key", overlay: { gradient: "sharpBevel" } }] }); $("#workingChart").kendoChart({ dataSource: { transport: { read: function (options) { RadiusAjax.get('Person/GetPersonGenderMetrix').then(function (data) { options.success(data); }) } }, sort: { field: "Key", dir: "asc" } }, theme: "material", legend: { position: "bottom" }, seriesDefaults: { type: "pie" }, series: [{ type: 'pie', field: "Value", categoryField: "Key", overlay: { gradient: "sharpBevel" } }], renderAs: "canvas", });
1 answer
419 views
Hello,
I'm currently having issues with the sliders not sliding in the KendoUI framework. In the AppBuilder Companion App and the In-Browser Client, you can slide the sliders at first, but if you click on the slider track to change the value, you can no longer slide the slider. I've tried these two different ways to instantiate the sliders:
<input id="slider" data-role="slider" />
​and
<div id='slider'></div>
<script>
$(function () { $("#slider").kendoSlider() });
</script>
I've also tried disabling the pointer-event on the slider-track. This does allow the user to keep sliding the draghandle, but disables the use of the sliders for the Windows Client.
Thank you for your help,
Stephanie
Dimiter Madjarov
Telerik team
answered
on
07 Aug 2015
