UI-Router + Kendo UI Grid, weird issue - angular-ui-router

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.

Related

Kendo UI Mobile ListView filter

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

View not updating on changing the view model in kendo ui web

I am using kendo ui web for one component, in this I have two level of arrays in the dataModel,
I have rendered successfully when on initial load, but when the change the viewModel of it is not updating the view.
Can any one help me here.

How do I know when kendo treeview has finished loading?

I'm trying the Kendo Ui framework. I'm working on a treeview.
I need to know if there is an event that is raised when it is finished loading the complete treeview. I'm using a call json.
Loading it or rendering it? It is similar but not the same, first you need to load the data and only then it starts rendering the loaded items.
For loading you might use dataBound in the TreeView

KendoGrid with in a new custom kendo ui widget

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.

Telerik MVC Chart: How to change databinding mode at client side using javascript?

I have a telerik MVC barchart that uses serverside binding during startup for performance purpose. Afer the page is loaded. I want to change the databinding to AJAX, so the chart can update itself responding to other events. Can the databinding mode be updated using javascript
You could pass the values you want to initially load to the Chart constructor and also define an ajax binding and select method. After that once the page is loaded you can refresh the Chart with the following code
<code>
$('#chartID').data().tChart.rebind()
</code>

Resources