Kendo UI with Hobo

[Jeremy Savoy]

I'm trying to use the Kendo UI widgets via the kendoui-rails gem, but having a hard time incorporating that into Hobo. I'm sure it must be simple, I've tried creating a tag definition for a single widget (per the example below) and using that tag in my "new.dryml" but without success.

Here is the URL to the standard rails example ... maybe one of you can recommend a course of action. It would be nice to have an entire tag set for the Kendo UI widgets - perhaps something I can work on once I understand how to make any single widget run.

http://docs.kendoui.com/getting-started/using-kendo-with/using-kendo-with-rails

[Vivek Sampara]

It seems to be pretty straight forward , Can you share the hobo code you are using . I worked on lots of jquery plugins on hobo and 99% of the problems were related to the jquery code itself. 

--
You received this message because you are subscribed to the Google Groups "Hobo Users" group.
To view this discussion on the web visit https://groups.google.com/d/msg/hobousers/-/SNLHiyc4MokJ.
To post to this group, send email to hobo...@googlegroups.com.
To unsubscribe from this group, send email to hobousers+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/hobousers?hl=en.

[Arnaud Doyen]

Waw, this seems to be a great UI !

It could be interesting to make this one as a new hobo plugin though this will be a lot of work !

A.

2012/9/27 Vivek Sampara <ravens...@gmail.com>

[Jeremy Savoy]

Vivek I don't really have any sample code - but a simple hobo app to demonstrate how to incorporate it might be quite useful - is this something that you could demonstrate ?

[Bob Sleys]

Just thought I would post I got this working at least I got the editor to work on a textarea field quite easily.

First I added the gem to the gem file
gem 'kendoui-rails'

and did a bundle install

Now the docs say to run rails generate kendoui:install however that bombed due to the css and js files now being where the installed extects them so I just made the changes manually.

To app/assets/javascripts/application.js I added

//= require kendo/kendo.web.min

right above the require_tree line

To app/assets/stylesheets/front.scss I added

 *= require kendo/kendo.common.min

 *= require kendo/kendo.default.min

above the require_self line

Then I just had to look at the ID hobo gave to my textarea field and

<custom-javascript:>

$(document).ready(function(){

      $("#ticket_problem").kendoEditor();

      });

</custom-javascript:>

to the tag that generates the field I wanted the Kendo editor on.

Worked like magic.  Note I haven't fully tested if the formatting the editor added to the field all gets saved and output correctly when viewed yet.  But that would be a specific problem to the textarea editor.

Bob

[Jeremy Savoy]

Thanks Bob -- looks easy enough. I've not used any custom javascript in hobo before - does that tag go into one of the site-wide dryml files or in your model specific index/new/show.dryml? Thanks again !

[Bob Sleys]

Just a quick follow up on the editor.  The following settings are required to get it handle the html encoding properly with Hobo

First set the field type to :html so the html entered vie the kendo editor will get displayed properly in views.

Next turn html encoding off for the editor like so

$(document).ready(function(){

$("#gym_notes").kendoEditor({

    encoded: false

  });

      });

There may be other ways of dealing with the html encoding but the above worked for me.

Bob

On Saturday, October 6, 2012 5:03:09 PM UTC-4, Bob Sleys wrote:

[Bob Sleys]

Jeremy,

It is pretty much up to how you want to do it.  The code I posed would need to go on in the page tag. Notice I'm directly adding the editor to a specific tag, in this case ticket_problem.  So I added it like so.

<extend tag="edit-page" for="Ticket">

<old-edit-page merge>

       $(document).ready(function(){

       $("#ticket_problem").kendoEditor();

       });

</old-edit-page>

</extend>

This works fine but if you have a lot of fields you want to use the editor on you'd have to extend a lot of page tags.  Another option would be to add it to the site wide page tag for all html fields like so.

<extend tag="page">

<old-page bottom-load-javascript merge >

  <custom-javascript:>

$(document).ready(function(){

$(".html").kendoEditor({encoded: false});

    });

</custom-javascript:>

</old-page>

</extend>

Notice now I'm adding it to all fields with the class of html.  Hobo addes the html class to all model fields with a type of :html so this would end up adding the editor everyplace you have an html field on the entire site. The down side to this is the code for the editor is added to all pages wither you have an html field or not.

Bob

[Bob Sleys]

One more little trick I found for the editor.  If the editor is getting used inside of an input-many. When a new item is added, ie clicking on the '+' button the kendo editor auto sizing fails.  I found if I manually set the k-editor with to nothing it fixes the problem.  Example below.

$(document).ready(function(){

$(".html").kendoEditor({encoded: false});

$(".k-editor").width("");

});

[Bryan Larsen]

Hey Bob,

Now that you've got one plugin gem under your belt, how about taking a
stab at creating a Hobo plugin gem for Kendo UI? Sounds like it
should be fairly straightforward. Not only will it help out the
beginners, but it will help you out next time you create a project
using the Kendo UI. :)

cheers,
Bryan

[kevinpfromnm]

You could wrap your

On Monday, October 8, 2012 11:24:32 AM UTC-6, Bob Sleys wrote:

... The down side to this is the code for the editor is added to all pages wither you have an html field or not.

You could either apply it only to edit and new pages in general or parameterize it so you can do something like <show-page without-kendo-editor />.

[Bryan Larsen]

He's using the asset pipeline instead of including javascript, so
changing the javascript includes on a page-by-page basis isn't as easy
as it is without the asset-pipeline.

It's not clear that you'd want to, either. In production mode, all
the js gets concatenated and minified by the asset pipeline into one
big blob that is presumably cached by the browser. If two pages have
different javascripts, that means there's two big blobs that have to
be transferred and cached, even if one blob is smaller than the other.

Different javascript per page also breaks the new push-state option in
Hobo 2.0, as well as the pjax plugin.

Speaking of pjax, has anybody tried it with Hobo yet? It or one of
its alternatives is one of those things that I'd like to try out, but
haven't got around to yet.

Bryan

[Bob Sleys]

This all brings up another problem I've run into.

I was thinking of creating a rich_type for the kendo editor based off of the html type.  The only purpose would be to create a custom input that adds the kendo javascript to turn the text area into the editor.  However this would put javascript in the middle of the page and wont work with bottom loading of javascript since the inline code will get hit before jquery is loaded and bomb.  Given what you have said perhaps it is better off if I just add the javascript to the page and not worry about it.  After all in the grand scheme of things its really not a lot of code.  The real bulk of the code, the kendo ui stuff, is being added to every page anyway.

Bob

[Bryan Larsen]

The technique described here should work:

http://cookbook.hobocentral.net/manual/plugins#creating_a_hobo_plugin_from_a_jquery_plugin

Let me know if you have any questions, that manual page is fairly new.

Bryan

> --
> You received this message because you are subscribed to the Google Groups
> "Hobo Users" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/hobousers/-/gKeb_6mUvV0J.