Trying to add a new jquery UI element

[Bob Sleys]

I'm trying to implement kendo.ui.NumericTextBox (http://docs.kendoui.com/api/web/numerictextbox#downarrowtext-stringdefault) in a similar manner to the other jquery ui elements.  I've included the necessary basics for the kendoui stuff ie the kendoui-rails gem and added all that is required for it.  Now I'm trying to create a rich data type and implement the numerical text box using the jquery ui calendar control.

First things first the rich data type below seems to work find when I add it to a field of a model 

 

class Currency < DelegateClass(BigDecimal)

  COLUMN_TYPE = :decimal#, :precision => 12, :scale => 2

  HoboFields.register_type(:currency, self)

  def to_html(xmldoctype = true)

    "$#{number_with_precision self, :precision => 2}"

  end

end

I wish I could specify the precision and scale here but that doesn't work the last I checked so I need to have the field in the model setup as:

    cost      :currency, :precision => 12, :scale => 2

But it works so moving on.

My problem is in setting up the tag to go along with the rich type.  I have the following so far based again on the jquery calendar tag

<def tag="input" for="Currency">

<currency format="c" decimals="2" merge/>

</def>

<def tag="currency" attrs="name"><%

  options, attrs = attributes.partition_hash(['culture', 'decimals', 'downArrowText', 'format', 'max', 'min', 'placeholder', 'spinners', 'step', 'upArrowText', 'value'])

  events, html_attrs = attrs.partition_hash(['change', 'spin'])

  add_data_rapid!(html_attrs, "kendoNumericTextBox", :options => options, :events => events)

  name ||= param_name_for_this %>

<%= text_field_tag(name, this, deunderscore_attributes(html_attrs)) %>

</def>

Two issues so far.

First the first tag isn't get used by default for currency fields.

If I work around it by manually calling the second tag as per below the input tag looks fine but the kendoNumericTextBox function is never called to convert the standard text box over.  I don't see how that is done for the calendar control.

Work around to manual call the second tag

<field-list size="8" columns="2" fields="price, cost">

<cost-view:><currency/></cost-view:>

</field-list>

Any help in understanding all this would be appreciated.  I hope to add a few other kendoui controls once I figure out how this all works.  I'll of course make it all available as a gem for others to use assuming I ever get it working properly.

Bob

[Bryan Larsen]

>
> I wish I could specify the precision and scale here but that doesn't work
> the last I checked

That's correct, it would be nice, but hobo doesn't support that.

> First the first tag isn't get used by default for currency fields.

It does appear that you've done things correctly, I'd have to take a
look at a sample app to look into things further.

>
> If I work around it by manually calling the second tag as per below the
> input tag looks fine but the kendoNumericTextBox function is never called to
> convert the standard text box over. I don't see how that is done for the
> calendar control.

Here's how it is done for the datepicker:

https://github.com/Hobo/hobo/blob/master/hobo_jquery_ui/vendor/assets/javascripts/hobo-jquery-ui/hjq-datepicker.js

That's actually virtually all boilerplate, it could be just:

jQuery.fn.hjq_datepicker = function(annotations) {
if(!this.attr('disabled')) {
this.datepicker(this.hjq('getOptions', annotations));
}
};


I hope you're using this manual chapter to assist you in your work
rather than trying to reverse engineer existing plugins:

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

cheers,
Bryan

[Bob Sleys]

Thanks much I got most of what I wanted working.

However I'm still having a problem with the default tag for my rich data type not working by default.  I can't figure it out.

The only odd thing I see is even though I have the field setup as so:

    price     :currency, :precision => 12, :scale => 2

The input box class is setup as so:

<input class="price-tag decimal part-price" id="part_price" name="part[price]" type="text" value="4.99">

Notice the class list is still showing the class decimal and not currency.  I'm thinking something in Hobo in still seeing the field as type :decimal and not my new type :currency but I have no idea what might be causing the problem.

Bob

[Bryan Larsen]

I think your two problems are related.

It probably has something to do with the fact that you're inheriting
from DelegateClass(BigDecimal) rather than straight from BigDecimal.
You can try removing the DelegateClass bit. It used to be necessary
for other reasons, perhaps it isn't anymore.

Another thing to try is that instead of doing

price :currency, :precision => 12, :scale => 2

try

price Currency, :precision => 12, :scale => 2

cheers,
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/-/VRXAIgTXpcUJ.
>
> 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.

[Bob Sleys]

GRRR so close.

It worked for a minute and I was all happy so I went in and finished removing all my direct calls to the tag and when I restarted the server it went back to decimal vs currency.  I've removed the Delegate stuff and changed to using Currency vs :currency on the field but it's not working.  

Bob

[Bob Sleys]

Oh and unless I'm missing something an update to the docs for this should include something about passing boolean values or numbers to the jquery control.

The controls I'm using expect some of the options to be true/false or numbers and not string data types.

I added the following to my tag right after I filter out the possible options to do the conversions   I'm sure there is better way but this worked for me.

  options["spinners"]=false if options["spinners"] && options["spinners"].casecmp("false") == 0  #defaults to true

  options["decimals"]=options["decimals"].to_i if options["decimals"]

  options["max"]=options["max"].to_f if options["max"]

Bob

[Bryan Larsen]

There is a line explaining this in the hobo-jquery-ui main page:

Options that expect a type other than string can be provided by
passing a ruby object:

<datepicker dayNamesMin="&['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']" />

I emphasize this further in hobo-jquery-ui is through the use of
examples for the tags. For instance:

<combobox autoFill="&false" clearButton="&false"/>

Other than having the user use an ampersand, there's also a nice way
of passing in true:

<combobox autoFill/>

is equivalent to

<combobox autoFill="&true"/>

Bryan

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

[Bob Sleys]

AHHH I knew I probably missed something.  I was looking on the make a plugin page.  Sorry my bad.

Bob

[Bryan Larsen]

If you can think of a clearer way to add it to the documentation, that
would be useful.

Bryan

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

[Bob Sleys]

Ok I've pushed my plugin to my person github page.  The default tag for Currency doesn't work and more work needs to be done on the documentation.  Once it's working fully I'd be happy for it to move over to the Hobo repos and make a ruby gem for it.

The link is https://github.com/bsleys/hobo_kendoui

Bob