Telerik Forums
Kendo UI for jQuery Forum
2 answers
106 views
Hi,

I am writing a Kendo SPA application that uses MVVM.  I have a bit of HTML and functionality (for choosing a user) that I will be reusing throughout my application.  The functionality is as follows:
There will be a label containing a user name next to a button.  The user can click on the button and a popup window appears containing a textbox and a button.  The user puts a search term in the textbox and clicks the button.  The user is presented with a list of relevant users under the button and textbox.  Once they click on a user in the list, the window closes and the label in the main page contains the new user name.

I am able to package up the functionality in a requirejs module but not sure how to include the html and use it all in the Kendo window as described above.

Can you please point me in the right direction and let me know the recommended approach?

Thanks,
Lance
Top achievements
Rank 1
 answered on 10 Jul 2014
2 answers
82 views
I am working on a project where Kendo UI SPA is a good fit.  I use Visual Studio as my development environment and found the Kendo UI SPA project template for Visual Studio 2013.  Unfortunately I am a VB programmer and the project template is only available for C#.

Do you expect to have a VB version soon or is there perhaps a way to convert the C# project to a VB.Net project?
Phil H.
Top achievements
Rank 2
 answered on 04 Jul 2014
3 answers
123 views
I am building a Kendo UI application which is working perfectly fine in IE11. But when I add the site to be displayed in compatibility mode in IE11 i am getting an error "'NodeFilter' is undefined'. It raises this error while rendering the layout. see below code.var appRouter = new kendo.Router({
init: function () {
layout.render("#application");
}
});Error is raised in kendo.web.min.js where it tries to remove white spaces (I guess by the name). This is the line of code that is failing.var t=document.createNodeIterator(n,NodeFilter.SHOW_TEXT,function(t){...}

Just learned that NodeFilter is a property for window object. window.NodeFilter is null when compatibility mode is enabled in IE11. But Telerik demo SPA site works fine under these settings.

I have posted this question here also http://stackoverflow.com/questions/24372876/nodefilter-is-undefined-error-when-using-ie-compatibility-mode-with-kendo-ui-spa
Petyo
Telerik team
 answered on 27 Jun 2014
1 answer
236 views
Hi,

I am working on an application that uses Kendo SPA and Kendo MVVM. I've looked at the examples for both technologies and have it working mostly how I want but I am having a couple of issues. I want to have a CRUD page that uses a local object. The properties of this object are bound to the various controls and are updated through user input. Once the user is finished, this changed object will be sent to the server to update the database. One of the properties of this object is an array of objects which I want to bind to a Kendo Grid. This is the part I am having trouble with. I don't seem to be able to get the Grid to bind to this property. The grid displays and when I click on the Add button a row is created in the grid, but it never updates its datasource and when you hit Add again the data disappears from the new row and isn't saved.

I have attached a working example which has this issue. The page in question is in the Menu option "Make a request" and side menu option of "Equipment Loan".
Another minor issue is the main menu at the top sometimes does render and needs a page refresh.

Please can you help me with these issues.  I also posted this in the MVVM forum.

Thanks
Lance
Top achievements
Rank 1
 answered on 13 Jun 2014
3 answers
97 views
I believe I have found a bug in the router control, with the routeMissing callback.  According to the documentation, you should be able to call e.preventDefault() to cancel the navigation and stay on the current route.

This works as expected if I have a link on a page that points to an invalid route (ex. "#/missing") - the route is cancelled and I stay on the current view.  But if I type the missing route (#/missing) into the browser address bar, then it reverts back to the route prior to the current route.

I have created an example in JS Bin that demonstrates this behavior - http://jsbin.com/EXARiTiJ/26

Here are the steps to recreate the issue:
  1. When the page loads, it will first navigate to the Home view
  2. Click on "Orders" to navigate to the Orders view.  This will navigate correctly and update the url appropriately.
  3. Click "Missing" to navigate to a route that has not been defined.  This will fire the routeMissing handler, which calls e.preventDefault() and reverts the url and the view back to "Orders"
  4. However, if you manually update the url in the address bar to "#/missing", the routeMissing handler fires and you are sent back to the Home view, and the url still has the invalid route (#/missing)

I am using the Q1 2014 release of the controls and testing in IE 10.  I do not see the issue when testing with Google Chrome (v. 33)

Petyo
Telerik team
 answered on 18 Apr 2014
10 answers
207 views
I'm trying to set up two pages: 1 with a listview and another with a grid. The problem is that the grid isn't being initialized and isn't shown...

Important parts of the code: 
<div id="app" class="contentPages">
    <button data-bind="click: gotopage1">Page 1</button>
    <button data-bind="click: gotopage2">Page 2</button>
</div>
 
<script id="page1" type="text/x-kendo-template">
    <ul id="listView1" data-bind="source: photossource"></ul>
</script>
 
<script id="page2" type="text/x-kendo-template">
    <div id="grid">
    </div>
</script>
 
<script id="layout" type="text/x-kendo-template">
    <header>Header</header><section id=content></section>
</script>
<script type="text/x-kendo-template" id="templatelistitem">
    <div class="item">
        <img data-bind="attr: { src: src }" />
        <p data-bind="text: description" style="text-align: center"></p>
    </div>
</script>
<script>
var
set1 = new Array();
 
   for (var i = 0; i <= 71; i++) {
       //fill set1
   }
 
   var appViewModel = new kendo.observable({
       gotopage1: function () {
           router.navigate("/");
       },
       gotopage2: function () {
           router.navigate("/page2");
       }
   });
   kendo.bind($("#app"), appViewModel);
 
   var pageViewModel = new kendo.observable({
       photossource: set1
   });
 
   var page1 = new kendo.View("#page1", { model: pageViewModel });
   var page2 = new kendo.View("#page2", { model: pageViewModel });
 
   var layout = new kendo.Layout("#layout");
 
   var router = new kendo.Router();
 
   router.route("/", function () {
       layout.showIn("#content", page1);
   });
 
   router.route("/page2", function () {
       layout.showIn("#content", page2);
   });
 
   $(function () {
       router.start();
       layout.render($("#app"));
       layout.showIn("#content", page1);
   });
 
   kendo.bind($("#listView1"), pageViewModel);
 
   var listview1, grid;
 
   $(document).ready(function () {
       listview1 = $("#listView1").kendoListView({
           template: kendo.template($("#templatelistitem").html()),
           change: onChange,
           selectable: true
       }).data("kendoListView");
       grid = $("#grid").kendoGrid({
           columns: [
               {
                   field: "FirstName",
                   title: "First Name"
               },
               {
                   field: "LastName",
                   title: "Last Name"
               }],
           dataSource: {
               data: [
                   {
                       FirstName: "Joe",
                       LastName: "Smith"
                   },
                   {
                       FirstName: "Jane",
                       LastName: "Smith"
                   }]
           }
       });
 
   });
</script>
With the debugger I can see that the listview and the grid have different types after running the ready() method (see attachment).

Why this happen?
Petyo
Telerik team
 answered on 01 Apr 2014
1 answer
97 views
In the latest version 2014.1.318 (and even the latest internal build 2014.1.321), I am having issues in the view.init event.  I've created this sample to show the issue.  
http://trykendoui.telerik.com/OvaD

Inside the view init event, I tie a double-click event handler to the kendo grid using jquery, and use that event to route the SPA to a details page.  When using the latest version, nothing happens. If I roll back to the 2013.3.1119 version, it works seemingly fine.
http://trykendoui.telerik.com/oziR

Thanks.

Petyo
Telerik team
 answered on 27 Mar 2014
3 answers
52 views
Since Q1 2014 my views haven't been rendering properly.  If I don't have a single tag wrapping the entire template, the view is renders each element in the template with a wrapped div.  I've prepared a sample with two different views.  One is wrapped with a single div element and the other has multiple root elements.  After they are rendered you can look at the html and see that the unwrapped view has a new div around each root element in the template (see attached screen shot).  The sample can be run here: http://jsfiddle.net/9DF9k/

Thanks in advance!
DerekAlfonso
Top achievements
Rank 1
 answered on 21 Mar 2014
5 answers
93 views
I am working on creating a new application using the Kendo SPA framework.  One must-have feature is the ability to cancel navigation to a route, for example - don't allow the user to navigate away if the current has unsaved changes.

According to the documentation, this should be as simple as calling e.preventDefault() in the router's change event.  And this does work in the simplest scenario - if you wire up the change event and call preventDefault, the route will be cancelled, you stay on the current view, and the url is reverted back to it's original value.

However, I feel that is overly simplistic.  In reality, you would never simply just cancel the route.  You need to make a call to see if there are unsaved changes so that you can determine whether or not the navigation is allowed.  And this is where my problem lies.

In my scenario, I have a callback that is executed in the router change event that checks to see if the navigation is allowed.  If I hit a route that I cannot leave, then I call e.preventDefault and the view does not change (which is good), but the route does not revert back to the original value (which is bad).  So now the wrong url is showing in the browser.  What's worse is that if I now attempt to navigate to a different route, this will cause an infinite loop where the change event keeps firing and being cancelled, which locks up the browser.

I have created an example in JS Bin that demonstrates this behavior - http://jsbin.com/EXARiTiJ/10.  Here are the steps to recreate the issue:
  1.  When the page loads, it will first navigate to the Home view
  2.  Click on "Orders" to navigate to the Orders view.  This will navigate correctly and update the url appropriately.
  3.  Click "Products" to navigate to the Products view.  Again, this will navigate correctly and update the url.
  4.  Click "Orders" to navigate back to the Orders view.  The code in the change event will call preventDefault and this will trigger the error condition. The Products view will remain visible, but the url now shows "/orders" - however, it should still show "/products".
  5.  Now click "Home" to try to navigate to the Home view.  Be warned though, this will now create an infinite loop and lock up the browser.

It seems like this is a bug with the router, but maybe I am missing something.  Is there a different way that I should be handling canceling the route navigation?  If this is a bug, I would like to know if there is a workaround/fix that can be implemented, since this feature is a must-have for my application. 

Sean
Top achievements
Rank 1
 answered on 20 Mar 2014
4 answers
114 views
I have a need to change the URL without routing/changing the existing view.

Here is the use case:
User navigates to mysite.com/app#/items/add  to add a new item. User then hits save. I would like for the page to stay on that view in case the user wishes to make more edits but I want the URL and history to change to mysite.com/app#/items/<new-id>.

Right now when it changes the hash fragment, it swaps the view with the same view and there is a "add" in the history, neither of which is desirable. 

Is there any way to achieve my goal?

Thanks in advance for any help you may give me.
Michael
Top achievements
Rank 1
 answered on 14 Mar 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?