Questions on Kendo UI for jQuery Forum

1 answer

380 views

I have a single page app built with KendoUI javascript framework from Telerik. The pages are loaded from a client router (samples and docs here) and javascript modules are added with RequireJS. I added some authentication mechanism based on the WIF Session Authentication Module (SAM) based on this article from Dominick Baier : http://leastprivilege.com/2012/02/09/replacing-asp-net-forms-authentication-with-wif-session-authentication-for-the-better/ It works very similar to the Forms authentication since I am just adding a authentication tag with a form url like this :

<authentication mode="None"

<forms loginUrl="~/#/Public/Accueil" timeout="90" slidingExpiration="true" requireSSL="true"

/>

</authentication

It works fine under a normal .NET MVC4 scenario, but doesn't quite work as well when in a SPA with javascript routing. The view is displayed when the user is not logged, but nothing happens when I click on "Log in" button because. Does anyone have a clue about what I should do to keep the sync between server and client whenever a redirection on the login page occurs on the server ?

When you use a authentication tag and specify a form url, a 302 response is sent to the client every time a page that needs authorization is called without the auth cookie. The URL to wich the browser is redirected then is the one specified in the web.config under the authentication tag (like in my question it is "<base_url>/#/Public/Acceuil") and the url requested originaly requested is appended as parameter like this : "<base_url>/#/Public/Acceuil?RETURNURL=Private/Profile>". The browser then make a GET request to this new url and gets a 200 with the login view. That works just fine. The problem is that the client methods are in a separate js file that is normally loaded via the client Kendo Router using RequireJS :

router-config.js :

define(['jquery', 'lib/pubsub'],

function ($, pubsub) {

// Index

var publicAccueil =

{

url: "/Public/Accueil",

activate: function () {

var that = this;

require(['app/Public/Accueil'], function () { renderView(that); });

},

html: null

};

// MDPOublie

var publicMDPOublie =

{

url: "/Public/MDPOublie",

activate: function () {

var that = this;

require(['app/Public/MDPOublie'], function () { renderView(that); });

},

html: null

};

// Profil

var privateProfile =

{

url: "/Private/Profile",

activate: function () {

var that = this;

require(['app/Private/Profile'], function () { renderView(that); });

},

html: null

};

var renderView = function(view, id, params) {

$.publish("viewActivated", [ view, id, params ]);

};

return {

publicAccueil: publicAccueil,

publicMDPOublie: publicMDPOublie,

privateProfile: privateProfile,

};

});

Then, in the router file, the route are registered to call the "activate" fonction defined in the config object "routeConfig.privateProfile" for the route, that's what loads the Accueil.js file located unde "app/Public/".

router.js :

define([

'jquery',

'kendo',

'app/route-config',

'app/Code52'

], function ($, kendo, routeConfig, Code52) {

var router = new kendo.Router({

routeMissing: function (e) { alert("Route not defined : " + e.url); },

change: function (e) {

kendo.destroy("#content");

}

});

//Default route

router.route("/", function() {

var cheminUrl = window.location.pathname;

if (cheminUrl === "/") {

router.navigate(routeConfig.publicAccueil.url);

}

});

router.route(routeConfig.publicAccueil.url, function () { routeConfig.publicAccueil.activate(); });

router.route(routeConfig.publicMDPOublie.url, function () { routeConfig.publicMDPOublie.activate(); });

router.route(routeConfig.privateProfile.url, function () { routeConfig.privateProfile.activate(); });

$.subscribe("viewActivated", function (view, id, params) {
//If the view is not in local cache, we load it from server
if (view.html === null || view.html === "") {
$.ajax({
url: view.url + (id !== undefined ? "/" + id : "")
}).done(function (r) {

//Once loaded, we cache it
view.html = r.data;
//Render the view by injecting innerHtml property
$("#content").html(view.html);
//Event published just for each script to have a place to init
if (view.html !== "")
id !== undefined ? $.publish(view.url, [id, params]) : $.publish(view.url, [params]);

})
.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
} else { //If the view was already cached, we load thie cached version
$("#content").html(view.html);
id !== undefined ? $.publish(view.url, [id, params]) : $.publish(view.url, [params]);
}
});

return {
router: router
};
});

The other obvious problem here is when I disconnect by calling a Disconnect method. I just flush the auth cookie then, but all the "private" pages are still in cache, which means they'll be displayed if you hit the corresponding route.

So, is there a sample or tutorial somewhere on how to manage this kind of "login / logout" scenarios ?

SPA

answered on 26 Feb 2015

1 answer

259 views

Passing Route Parameters to a View

I'm starting a new project and would like to use Kendo's SPA along with RequireJS for the design; however, I'm running into a roadblock that I just can't get by and I'm hoping someone here has dealt with it in the past. My issue comes down to passing route parameters to a view for rendering. My current sample code is as follows:

main.js

(function () {

require.config({

deps: ["js/jquery"]

});

require(['app'], function(App){

App.start();

});

})();

app.js

define([

'kendo/js/kendo.all.min',

'controllers/ListController'

], function (kendo, list) {

var router = new kendo.Router({

routeMissing: function (e) {

console.log('No Route Found', e.url);

}

});

router.route("list/(:id)", function(id) {

var myIdParameter = id;

// TODO Find a way to pass the myIdParameter to the view I'm about to render.

// Render the view in the "app" div

list.render("#app");

});

return router;

});

ListController.js

define(['kendo/js/kendo.all.min'], function (kendo) {

// TODO I would like to have the "1234" value passed from the route parameter

var viewModel = kendo.observable({

id: "1234"

});

var options = {

model: viewModel

};

return new kendo.View(

"index",

options

);

});

My goal is to use the ListController for the various js logic for creating various kendo widgets for the view I'm trying to render; however, If I can't find a good way to pass parameters along to use with my future datasource calls I going to be stuck. Any push in the right direction here would be greatly appreciated.

Thanks,
-Brendan

SPA

answered on 30 Dec 2014

1 answer

79 views

SPA/MVVM: Adding templates using Require.js !text

Hey everyone,

I'm migrating from KO.js where knockout is able to parse the DOM when you add the view model to the element. However, I love how Kendo MVVM uses templates using script tags, almost in a backbone fashion. I was watching the tech chat from July 24, 2013 on YouTube and they mentioned using the !text plugin from Require.js to load the script tags to the DOM. My question is, is this a good practice and what are the performance gains of adding the templates after the DOM loads compared to downloading them on the initial request? I realize that this may be more of a Require question, but I'm hoping that you can help in identifying the best practices. The application I'm working on now has about 200 templates. I'm showing a landing page while kendo and my other libs download, and some initial ajax calls are processed using nested require calls. My concern is that by loading the templates after the DOM loads adds an additional layer of complexity and could potentially cause the app to fail to load. Is the extra added error handling worth any possible performance gains? Maybe this is an old school concern, but as a trained network engineer, I would rather make the least amount of calls as possible.

Any help is greatly appreciated.

--Matt B

SPA

answered on 08 Dec 2014

3 answers

70 views

Hide Templates from unauthorized users

Hi,

I am developing an application where based on the user role, he/she can view a set of Templates. So in case, of normal user, he/she should view X templates, while Admin can view X and Y Templates.

Is using local templates, anyone regardless of his/her role, could "View Source" and see the Templates used by Admin.

Is there a work around?

Thanks

SPA

answered on 11 Nov 2014

1 answer

45 views

Case Sensitive Routes?

I am using version 2014.2.716 of the Kendo UI Web controls, and the router treats the defined routes as case-sensitive. So if I have the route "/fooBar" defined, the router will only load that route if I type "/fooBar" in the browser address bar. If I type "/foobar" (lowercase "b"), then routeMissing event of the router fires. I would like the routes to not be case sensitive, as I think it will be confusing for end users if they manually type in a URL and it may or may not load correctly depending on the casing. Is there a way to configure this in the Kendo router?

Thanks,
Sean

SPA

answered on 06 Nov 2014

1 answer

27 views

App Cordova con Kendo SPA no funcionan los botones

Hello
I'm new to Cordova and Kendo SPA applications. My problem es:

To switch to the view "reportar", the buttons do not respond by making them click.

I'm sorry for my English, I write and speak Spanish

I show them the code here:
http://jsfiddle.net/PeterConchaR/kdbhLfgp/1/

SPA

answered on 26 Aug 2014

1 answer

94 views

Applying Kendo SPA and Template with jQuery Mobile

[English]
I'm applying the template jFlatu to my project, before already had views and routers working under Kendo SPA. But now, applying the template jFLatu, it gives me an error of GET, where tries to bring the file jQuery and not Kendo, to check the console, seems that jQuery Mobile the problem is.
If I put jQuery Mobile with comments, everything works, and Kendo does what he has to do, but I need jQuery Mobile for the operation of the template.

[Spanish]
Estoy aplicando la plantilla jFlatu a mi proyecto, que ya tenia las vistas y routers funcionando bajo Kendo SPA. Pero me da un error de GET, donde jQuery intenta traer el archivo y no Kendo, al revisar la consola parace que es jQuery Mobile el problema.
Si pongo jQuery Mobile con comentarios, todo funciona y Kendo hace lo que tiene que hacer, pero necesito jQuery Mobile para el funcionamiento de la plantilla.

<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="kendo/js/jquery.min.js"></script>

<script type="text/javascript" src="kendo/js/kendo.all.min.js"></script>
<script src="assets/flex-slider/jquery.flexslider-min.js"></script>
</head>

<body>
<div id='app'></div>

<script type="text/x-kendo-template" id="indexTemplate">
<article>
<header>
<h1>Citizen Connected</h1>
<h2>Inicio De Sesión</h2>




<div id="logged-out">
Puedes iniciar sesión con:
<button id="buttonFacebook">Facebook</button>
<button id="buttonTwitter">Twitter</button>
</div>


<form id='add-item'>
<button type='submit' id='refresh'>Actualizar</button>
<button type='submit'>Añadir</button>
<div><input type='text' id='new-item-text' placeholder='Ingresa una denuncia.' /></div>
</form>
</header>

<ul id='todo-items'></ul>
<p id='summary'>Cargando...</p>
</article>

<footer>
<ul id='errorlog'></ul>
</footer>
</script>

<script type="text/x-kendo-template" id="reportarTemplate">

<div data-role="page" data-theme="a">


<div data-role="panel" id="sideNav" data-position="left">
<ul id="sideButtons">
<li><a href="https://www.facebook.com/pages/Citizen-Connected/255467614605481"><i class="icon-facebook"></i></a></li>
<li><a href="https://twitter.com/CitizenConnecte"><i class="icon-twitter"></i></a></li>
<li><a href="https://www.facebook.com/PeterConchaR"><i class="icon-facebook"></i></a></li>
<li><a href="https://twitter.com/PeterConchaR"><i class="icon-twitter"></i></a></li>
</ul>
<ul id="sidePanel" class="clleft">
<li id="active"><a href="#"><i class="icon-home"></i>Inicio</a></li>
<li><a href="about.html"><i class="icon-lightbulb"></i>Sobre CC</a></li>
<li><a href="contact.html"><i class="icon-envelope"></i>Contáctanos</a></li>
</ul>
</div>



<div data-role="header" data-position="fixed">
<h1>Citizen Connected</h1>
<a href="#sideNav" id="navIcon"><i class="icon-th-list"></i></a>
</div>



<div data-role="content">

<div id="logged-in">
Bienvenido, <span id="login-name"></span>.
<button id="log-out">Cerrar Sesión</button>
</div>


<div class="ui-grid-solo">
<h1 class="intro">Registra tu denuncia</h1>

<div id="map_canvas" style="width: 290px; height: 200px;"></div>
<a href="#" onclick="checkIn()" data-role="button" class="btn swatch-2">Check In</a>
</div>


<hr/>


<div class="footer text-center">
<p>COPYRIGHT 2013 Universidad de Guayaquil</p>
</div>

</div>

</div>


</script>

<script type="text/x-kendo-template" id="layoutTemplate">

</script>

<script>
// Views
var indexView = new kendo.View("indexTemplate");
var reportarView = new kendo.View("reportarTemplate");

// Routers
var router = new kendo.Router();

router.route("/", function () {
indexView.render("#app");
});

router.route("/reportar", function () {
reportarView.render("#app");
});

$(function () {
router.start();
});
</script>


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>

<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript" src="js/libs/MobileServices.Web-1.1.0.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>

SPA

answered on 20 Aug 2014

2 answers

136 views

SPA and requireJS

Dear all,

I am brand new to Kendo UI SPA anf wanted to create my 1st 'Hello World' application.
To get organized JS files I also wanted to use requireJS, but I could not really get what I want and I need your help (please).

This is my index.html:

<!DOCTYPE html>

<html>

<head>

<title>TestApp</title>

<meta charset="utf-8"/>

<link href="js/libs/kendo/styles/kendo.common.min.css" rel="stylesheet"/>

<link href="css/main.css" rel="stylesheet"/>

<script data-main="js/main" src="js/libs/require.js"></script>

</head>

<body>

<noscript>

<h3>Javascript muss aktiviert werden!</h3>

<h3>Javascript must be active!</h3>

</noscript>

<h3>TestApp</h3>

<div id="app"></div>

</body>

</html>

This is my main.js:

require.config({

paths: {

jquery : "libs/kendo/js/jquery.min",

kendo : "libs/kendo/js/kendo.all.min",

text : "libs/text",

indexViewModel : "models/m_index",

indexViewTemplate : "views/v_index.html"

},

// inform requirejs that kendo ui depends on jquery

shim: {

"kendo": {

deps: ["jquery"]

}

});

require(['jquery', 'kendo', 'myapp'

], function() {

var $ = require('jquery');

var kendo = require('kendo');

var myapp = require('myapp');

var App = new myapp();

App.init();

});

This is my myapp.js:

define(function()

{

var myApp = function() {

var constructor,

app = {}, // public class object of app

constructor = function() {

console.info('App constructor executed');

return app;

};

app.init = function() {

console.info('App started');

// Here I want to enter the code which should create the view and load the template as text

          // The view model should be a requureJS file and the template for the view should be loaded by

          // require text plugin

};

return constructor.apply(null, arguments);

};

return myApp;

});

This is what I have so far, and it shows up 'App started' in the browser's console log.
But what I could not get is:

1. Create a view which is a requireJS model
2. This view should load the template from a file using the requireJS text plugin
3. The view should show up inside the DOM's #app DIV.
4. Later on I want to create several views using requreJS module and switch between them

So this is really basic. But I don't know how to combine SPA and requireJS.

I need your help,

Thanks a lot!

SPA

answered on 18 Aug 2014

5 answers

59 views

Set view to the initial state

Hi,

I am building a data entry screen using Kendo UI SPA. My users will do lot of data entry each day. So after filling in a form and pressing Save should save the records and again present them the same screen for data entry. How can I reset all the controls (or View Model) to initial state?

Thanks

SPA

answered on 14 Aug 2014

1 answer

49 views

Are view transitions included in the kendo framework, or do I have to add the CSS manually?

In the view transitions example, I was wondering whether the CSS needs to be used from the example code, or whether the library comes with predefined transitions that we can use.

I'm referring to the view transitions section of this documentation:
http://docs.telerik.com/kendo-ui/getting-started/framework/spa/layout

Thanks!

Andre

SPA