Adobe Air with Kendo Grid

[Hugo]

Hi,

I'm having a problem with Kendo Grids and Adobe Air.

When I create a new DataSource (let's call it DS) and then set it to a Grid when the page is loading (document ready), it works great  and  the grid is correctly populated.

But I try to do it after page load, I get the following error:

Error: Invalid template:'<tr data-uid="#=uid#"><td >${locationName}</td><td >${answered}</td><td>${unanswered}</td><td >${total}</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<trdata-uid="'+(uid)+'"><td >'+(e(locationName))+'</td><td >'+(e(answered))+'</td><td >'+(e(unanswered))+'</td><td >'+(e(total))+'</td></tr>';}return o;'

So I thought I could just create a row template, and I did it with:

<script id="feeds-template" type="text/x-kendo-tmpl"><tr><td>${ locationName }</td><td>${ answered }</td><td>${ unanswered }</td><td>${ total }</td></tr></script>

And the error give is very similar. I then proceeded to create a "dumb" template in order to test everything thoroughly, and did as follows:

<script id="feeds-template" type="text/x-kendo-tmpl"><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></script>

Which produces the following error:

Error: Invalid template:'<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>';}return o;'

I started digging in Adobe Air configuration, since it could the source of error, and found the following: 

Adobe Air Security Issues

So basically Adobe Air does not support eval (which I believe is used for the templating system).

Is there any workaround for this issue?

Tks,

HL

[Kamen Bundev]

Hello Hugo,

Unfortunately yes, due to security restrictions Kendo UI can't work in Adobe Air directly (our templates use eval and the Function constructor and we do employ setTimeout sometimes). You can however use a non-application sandbox (basically an iframe) to load Kendo UI and use it, however you won't have direct access to Air APIs and you'll have to use sandbox bridge interface for communication between the different security sandboxes.

Regards,
Kamen Bundev
the Telerik team

[Hugo]

Thanks, I was able to solve the problem with the guidance you provided.

HL

[Oscar]

Hi Kamen,

It's a bit disappointing to know that we can't use Kendo UI in a straightforward manner in Adobe AIR because of Kendo UI's use of eval() , "Function", and passing a string parameter to the setTimeout() function, and that we have to resort to employing some elaborate work-arounds (although prescribed and documented) to get Kendo UI working in Adobe AIR.

I have no doubt your Kendo UI Development Team members are some of the best Javascript/jQuery programmers around (given the quality of Kendo UI itself), and that with some effort, the team can re-factor the Kendo UI code so it conforms to Adobe AIR's security requirements vis-a-vis the above coding practices.

The Adobe AIR documentation prescribes some Javascript coding practices on this page to avoid security-related Javascript errors. Do you think your Kendo UI Development Team can find time to review the recommendations on that page to see if they can code Kendo UI to conform with Adobe AIR's security restrictions with respect to Javascript?

I'm really eager to know what you and your Kendo UI Team think about this, and whether the above JS coding practices can be implemented by the team for Kendo UI.

Best,
Oscar

[Kamen Bundev]

Hi Oscar,

Most of the Kendo UI framework is built around our templating engine which as I said uses eval and Function constructor in order to work. There is no way to work around the Adobe Air security restrictions without rewriting our framework from scratch. This however is not applicable - even if we do such enormous effort, this will result in losing much of the functionality and the flexibility of the framework.

Note that similar security restrictions apply for other environments too - like Chrome extensions and Metro, and to support them all we should forgo templates as a whole. However, every environment also has a way to work around the said restrictions - by using sandboxes, or running in non-secure contexts, which is the recommended way.

Regards,
Kamen Bundev
the Telerik team

[Oscar]

Hi Kamen,

Thanks for explaining to us the reason why you and your team aren't able to re-factor the security-related Kendo UI code so that Kendo UI can work seamlessly in Adobe AIR.

But can you and your team at least provide us with some guidance or "best practices" on how to implement code in what you call the Adobe AIR 'non-application sandbox" ? This will help us greatly in coding things using Kendo UI and Adobe AIR in a consistent, best-practice way.

There are still a lot of developers using Adobe AIR to create apps for the different platforms (desktop, tablets, smartphones, TVs), so I think the time (and effort) you spend on these best-practice guides will be time well spent.

Do you think this is possible? If it is, please let us know where to find these best-practices tutorials/articles in the future (we hope soon).

Thanks,
Oscar

[Kamen Bundev]

Hi Hugo,

You can check this Air example application which shows how to work with non-application sandboxes and how to communicate with the device APIs residing in the main document:
http://www.adobe.com/devnet/air/ajax/quickstart/articles/sandbox_bridge.html

Using the above sample, I made a small Grid example (attached) which uses non-application sandbox and adds grid rows dynamically from the application sandbox to the non-application.

Greetings,
Kamen Bundev
the Telerik team

[Oscar]

Hi Kamen,

Thanks for spending time to code and post the KendoUI Grid-in-Adobe AIR sample app - much appreciated.

It did generate the error below when I clicked on the column header to sort on the column:

"Adobe AIR runtime security violation for Javascript code in the application security sandbox (Function constructor)".

While we very much appreciate your effort to help us with your sample code, we truly will find it very helpful if you or your team can can take some time to provide us with a "comprehensive-enough", "best-practice", sandbox-bridge reference application that implements KendoUI widgets that "violate" Adobe AIR's security restrictions.

I have a team of 4 developers, including myself, eager to use KendoUI for our consulting projects in Adobe AIR, but we're new to KendoUI (and therefore are unfamiliar with it) and have never worked with libraries that do not pass the Adobe AIR security policies with respect to Javascript. We hope you can help us get over this hurdle soonest.

All the best,
Oscar

[Kamen Bundev]

Hi Hugo,

I didn't experience such error on any operation with the Grid. How do you run the application and which Air SDK version are you using.

We will consider creating a separate Air integration demo or tutorial, meanwhile you can add a feature request to the Kendo Feedback UserVoice page, where others can vote for the same feature.

Greetings,
Kamen Bundev
the Telerik team

[Oscar]

Hi Kamen,

I really appreciate your effort to respond to our questions and suggestions.

I hope that an expert coder In the KendoUI team will be able to find the time to work on a set of "Best Practices" articles/tutorials for Adobe AIR/Javascript developers, who may be a sizeable market for KendoUI but who currently face some complex and time-consuming hurdles in using the KendoUI library because of its incompatibilities with Adobe AIR.

By the way, you've been calling me Hugo in your previous posts. :)

All the best,
Oscar