I have a Kendo UI Html helper for creating a Kendo Map. I am able to bind remote data and display the markers. However the map tiles do not show up on the page. I am not sure what to do. Here is my markup. The mvc site is created as a Widget to use within sitefinity.
#(Html.Kendo().Map()
.Name("trailerLocationMap")
.Center(33.066826, -96.804286)
.Zoom(4)
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Bing)
.ImagerySet(MapLayersImagerySet.Road)
.Key("myKey");
})
)
If you are using sitefinity 11 or above you need to add the Bing URLs to the web security configs. https://www.progress.com/documentation/sitefinity-cms/web-security-module
Related
I am completely new to using Kendo UI, and would like some help on how to render a array of objects to the screen with each object having it's own data source.
Application Background: A SPA dashboard that will show a list of charts that a user can interact with, moving (drag and drop), deleting, creating new charts.
I have done some digging into the Kendo framework and haven't landed on a solution that seems to work. My original thought was to use a custom defined widget that would use a template to render the charts to the screen and each widget would have it's own data source. However, I couldn't figure out a way to render the widgets.
I tried the MVVM data-bind: source and using a Kendo template to load the widget with the data-role attribute, but that didn't work.
HTML content area
<div data-bind="source: widgetsDataSource" data-template="widget-template-test"></div>
Kendo Template
<script type="text/x-kendo-template" id="widget-template-test">
<div data-role="custom-widget"></div>
</script>
widgetsDataSource: the dataSouce used to retrieve the list of charts to render to the screen
widget-template-test: the template used to initialize and show the custom widget using the data-role attribute
custom-widget: The link to the custom widget I defined in separate JS file.
Question: Does anyone have a resource I may look at or some suggestions on how to tackle this problem? Any help would be greatly appreciated.
Thanks in advance!
I do a lot of work with kendo widgets, my go to resources are the API docs http://docs.telerik.com/kendo-ui/introduction and then if I want to see some demos http://demos.telerik.com/kendo-ui/, I use them with Angular, the demo's are nice because they have Angular specific (as well as MVVM) code, the API docs are handy when you are looking for specific configuration settings.
Ok so lemme explain first for those who are not familiar
Rule number for using Telerik's Kendo UI is to reference the following in this order Jquery.min.js>Angular.min.js>Kendo.all.min.js
Here is the pseudo-code of my web application
in my parent.html:
-reference for jquery
-reference for angular
-reference for kendo
-ui-view container
this is my ui-view(child.html)
-initialize kendo grid
What happened is that the kendo widget was not rendered
Then I looked at the console of the browser and there was something like
"Jquery should be initialized first before angular when using Kendo-UI widgets"
I tried removing the ui-view and and just yolo-pasted the contents of the child.html and the grid widget successfully rendered
But when I use angular-ui-routing, the error appears again saying I should reference jquery first before referencing angular when using kendo widgets
You can only load jQuery once. I had a similar problem where I was calling it once from a shared view and once inside the main view. You have child views? My solution was to push the loading of the Javascript from the shared view to the main view, and also called them inside of the kendo tabStrips, because apparently those were sandboxed enough not to affect the main view. The second loading of jQuery is what's crushing the kendo rendering; figuring out the workaround depends on the relationships between the views.
I've been using kendo for quite some time but there is a issue that I'm facing using kendo filter in kendo list view. I am developing a SPA using kendo UI. In one of the views I've implemented kendo filter using http://demos.telerik.com/kendo-ui/mobile-listview/filtering link. The filter works fine on writing any input but when I re navigate to that view again it displays two filters. What can be the issue. Thanks
To solve this, make sure you render the kendo mobile listView only once. If not, kendoMobileListView() will add another input each time you'll use
$("#list").kendoMobileListView() .
If you have to render the listView on pageShow event, make sure you remove additionnal filter inputs with:
$("#your-view form:not(:first)").remove();
Hope it helps
I need to create forms dynamically in which the required field parameters will come from the backend. I will use input, dropdown and switch as form elements.
Is there a kendo specific easy way to generate these forms like kendo is doing in listview using template and datasource?
You probably want to check our MVVM framework for this. And some demos.
Please guide me how to make a custom kendo ui widget, like if you could refer to some tutorial or anything. Secondly the main question is that I want to use kendo grid to consume webapi and i want to use it in a widget in which and pass the datasource to this widget.
Bascially I want to make a widget which will consume the webapi using a particular url, and which will return a data source that I can add to this kendogrid widget.
Googling a little I just found:
Creating Custom Kendo UI Plugins
Creating a DataSource Aware Kendo UI Widget
Inheriting From Custom Widgets
Creating A Kendo UI MVVM Widget
I think that any and all this blogs should help you (I've written several widget and I found here all I needed).
In addition to #Emiliano's links, the Kendo Music Store demo app also contains a custom Widget bound to a DataSource that you can look at as an example:
Live demo site: http://www.kendouimusicstore.com/
Source code: https://github.com/telerik/kendo-music-store
Custom Widget source: MvcMusicStore/Scripts/App/kendo-cart-menu-widget.js
Documentation for this custom widget: http://docs.kendoui.com/tutorials/ASP.NET/Kendo%20Music%20Store/Music%20Store%20Web/kendo-music-store-web-cart-menu-widget
If you are going to use WebAPI, you will probably want to read this (The Facts On Using Kendo UI With ASP.NET WebAPI) first.
"Use WebApi" is a very broad statement, and narrowing down your approach would be the first step.