Questions on Kendo UI for jQuery Forum

1 answer

525 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

7 answers

351 views

Broken Grid with scrollable.virtual and serverPaging = true

We are trying to implement Grids with scrollable.virtual = true using a DataSource with serverPaging = true, where the data in the datasource is updating frequently (every second). I have tried two approaches:

1. Using a timer to trigger DataSource.read() every second.
or
2. Registering transport.push and using that to call pushUpdate every second with the updated items.

In both cases the results are extremely buggy, the scroll bar and rows jump around each time read() or pushUpdate() is called, and if the user happens to be scrolling at the time the update occurs, often the scroll bar will get stuck in a weird broken state.

What is the recommend way to implement virtual scrolling + serverPaging with dynamically updating data?

thank you,
Rowan

Grid

answered on 26 Feb 2015

2 answers

192 views

Drag and Drop error

Hi,

We have a scheduler with local dataSource. When we drag and drop an event on the scheduler multiple times, we see an error on console and drag and drop stop working. Here is a screenshot of the stack trace from chrome console. We are not doing much on the transport methods on the datasource. Let us know if we should do something differently or of this is a know bug.

Thanks,
Manish

Scheduler

answered on 26 Feb 2015

2 answers

9.0K+ views

Datasource read with parameters

I've got a datasource for a combobox working with a local variable passed in the read function so that whenever the variable gets changed the read is called again and the datasource is updated properly like so:

transport: {
read: function (operation) {
var url = "/api/read/Locations/"
$.getJSON(url, { guid: thisGUID }, function (json) {
operation.success(json);
});

I'd like to make this a little more generic, so I can include the control in various scripts and pass the parameter to the read function ala .read({ guid: thisGUID}). Also, I feel like this ought to work the same way as the call above:

read:
    url: "/api/read/Locations/",
    data: { guid: thisGUID }

But it doesn't seem to. Do I need to declare something in the parametermap to get this to work? I can't seem to pass that local variable to the datasource in the read no matter what I do.

Data Source

answered on 26 Feb 2015

26 answers

193 views

BUG: in IE8, text gets generated

see attached video

Editor

answered on 26 Feb 2015

2 answers

132 views

PDF Export completion

Hi,

Is there an event that's fired when a PDF export is complete or when the PDF generation is complete. In my case generating the PDF takes a long time and I'd like to start and stop a spinner while the PDF is being rendered.

Thanks,

Jim

Gantt

answered on 26 Feb 2015

4 answers

132 views

Bug: summary tasks are not displayed properly when "columns" array is defined.

Hello, I found a bug. Summary tasks (which have children) are not displayed properly when "columns" array is defined in kendoGantt .
This bug is present in the latest version (2014.3.1411) too.
If "columns" array is removed summary tasks are displayed normally.
Link with the bug.

Gantt

answered on 26 Feb 2015

5 answers

205 views

IE9-friendly CSV Export?

Is there a pure javascript method for exporting a csv from a grid that will work in IE9?

Grid

answered on 26 Feb 2015

1 answer

229 views

Grid Hirarchy only select one row

Hi

It seems it is not the default that only one row at a time is selected.

Try to select "Nancy" and then any row below her in the demo http://demos.telerik.com/kendo-ui/grid/hierarchy. Both "Nancy" and any row below her will be simultaneously selected.

I only want to be able to select one row at a time (this works on a level basis but not generally).

I am trying to accomplish this using grid.clearselection() however this function does not clear rows that are not on the "top" level?!

http://dojo.telerik.com/odIKu

Many thanks

Grid

answered on 26 Feb 2015

2 answers

159 views

Weird Behaviour

I have a template that gets data bound.

<script type="text/x-kendo-template" id="filtering-template">
<table class="edit-panel">
<colgroup>
<col class="fields-col">
<col class="operator-col">
<col class="value-col">
<col class="delete-col">
</colgroup>
<tbody data-template="filtering-row-template" data-bind="source: filter.Rows"></tbody>
</table>
<a id="add-filter-row" data-role="button" data-bind="click: addRow">Add</a>
</script>

In this format the link at the bottom does not get set to a kendo button.
If I change the order to this:

<script type="text/x-kendo-template" id="filtering-template">
<a id="add-filter-row" data-role="button" data-bind="click: addRow">Add</a>
<table class="edit-panel">
<colgroup>
<col class="fields-col">
<col class="operator-col">
<col class="value-col">
<col class="delete-col">
</colgroup>
<tbody data-template="filtering-row-template" data-bind="source: filter.Rows"></tbody>
</table>
</script>

Then the button gets created correctly but the body of the table never gets created.

There are no JS errors being displayed at all.

Templates

answered on 26 Feb 2015