[KULRICE-6833] Enable onclick event for Group components Created: 27/Feb/12  Updated: 03/Apr/13  Resolved: 23/Apr/12

Status: Closed
Project: Kuali Rice Development
Component/s: Development
Affects Version/s: None
Fix Version/s: 2.2.0-m1, 2.2
Security Level: Public (Public: Anyone can view)

Type: Task Priority: Major
Reporter: Jerry Neal (Inactive) Assignee: Daniel Seibert (Inactive)
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Similar issues:
KULRICE-4813Unable to add Onclick Event to any HTML element
KULRICE-8697Binding events on components within a row details group do not execute
KULRICE-1982Add parms to widget's page_button to allow 'onClick' events to invoke javascript. Also add a readOnly parm.
KULRICE-7987Problems with tooltip and mouse event
KULRICE-4049documentControlstag not setting custom button onclick event
KULRICE-8861Eventing Framework
KULRICE-7008Add flag to component that enables storing of component in session
KULRICE-13790Fill AFT Gap: Kitchen Sink: Event Examples
KULRICE-11537Rice Sampleapp Krad Configuration Test View Page 1 Day Events - Sorting enable/disable testing not rendered
KULRICE-12441Library - Controls - Disable on Key Event examples are ambiguous
Rice Module:
KRAD
KAI Review Status: Not Required
KTI Review Status: Not Required

 Description   

Currently the onclick event is not being supported on Group components, however the span element does support the event so the component should to. Likely just need to override supportOnClick to true in Group.

Here is the reported thread:

I think spans do support onclick
(http://www.w3schools.com/tags/tag_span.asp). Its listed under the event attributes.

There are 3 fields within the group, and I can add the onclick event to any of them, but the UX calls for entire group to be the target for a popup onclick. Very similar to a table row of data to be clickable.

Garett Gowens
garettg@uw.edu
206.221.7890

On 2/23/12 5:31 PM, "Jerry Neal" <jkneal@indiana.edu> wrote:

>Garett,
>
> Group components do not support the onclick event. With each type of
>event, there is a supports* method that component types set to true or
>false. Since the Group generates a span, and onclick is not supported
>on a span it is not supported for the group. At least I think onclick
>is not supported on span. If I am wrong we can enable it. Once we have
>validation in place it should give you an error in these cases.
>
> Is there a field within the group you can put the onclick event on?
>
>Jerry
>
>----Original Message----
>From: Garett Gowens garettg@uw.edu
>Sent: Thursday, February 23, 2012 4:22 PM
>To: Eric Njogu; Garett Gowens
>Cc: rice.usergroup.krad@kuali.org
>Subject: Re: [kuali] onClick event for a field group
>
>Here it is:
>
><bean parent="Uif-HorizontalFieldGroup" p:labelField.render="false"
>p:id="@

{#line.id}">
> <property name="group.errorsField.render" value="false"/>
> <property name="onDocumentReadyScript"
>value="truncateField('@{#line.id}

');"/>
> <property name="onClickScript"
>value="openPopUp('@

{#line.id}','course_details_popup','start','inquiry'
>,{v
>i
>ewId:'SavedCoursesPopup-InquiryView',planItemId:'@{#line.id}

'}, e);"/>
> <property name="items">
> <list>
> <bean parent="Uif-MessageField"
>p:messageText="@

{#line.courseDetails.code}

">
> <property name="styleClasses">
> <list merge="true">
> <value>fl-text-bold</value>
> </list>
> </property>
> </bean>
> <bean parent="Uif-MessageField"
>p:messageText="@

{#line.courseDetails.courseTitle}

">
> <property name="styleClasses">
> <list merge="true">
> <value>myplan-text-ellipsis</value>
> </list>
> </property>
> </bean>
> <bean parent="Uif-MessageField"
>p:messageText="@

{#line.courseDetails.credit}

"/>
> </list>
> </property>
> </bean>
>
>
>
>--
>
>
>Garett Gowens
>garettg@uw.edu
>206.221.7890
>
>
>
>
>On 2/23/12 11:21 AM, "Eric Njogu" <enjogu@strathmore.edu> wrote:
>
>>Hi Garett, please post a code snippet of the bean config.
>>
>>On 2/23/12, Garett Gowens <garettg@kuali.org> wrote:
>>> I am trying to add an onClick event to a Uif-HorizontalFieldGroup
>>> without success. I added an onClickScript property to the field
>>> group, but script is not visible in the DOM and there are no
>>> exceptions. Any suggestions on how I can accomplish this?
>>>
>>> –
>>> You received this message because you are subscribed to
>>>http://kuali.org/kis Kuali "rice.usergroup.krad" group. To post to
>>>this group, send email to rice.usergroup.krad@kuali.org To
>>>unsubscribe from this group, login to http://kuali.org/kis and remove
>>>this group from your profile.
>>>
>>
>>
>>--
>>Regards,
>>Eric.



 Comments   
Comment by Jerry Neal (Inactive) [ 03/Apr/12 ]

As part of this please do a full review of components and the events they should support. See note:

I added properties 'onClickScript' and 'onKeyUpScript' to a Uif-HorizontalBoxSection and a Uif-InputField but they do not show up. onClickScript shows up when added to the field's control, but not onKeyUpScript. What's the secret here? onkeyup is supposed to work for many html elements including div & span, according to w3schools.com.

Comment by Daniel Seibert (Inactive) [ 09/Apr/12 ]

Enabled onClick event script HTML generation by implementing the ScriptEventSupport method supportsOnClick() to return true.

To set the script, use the onClickScript property in the group definition.

Setting the script in FieldGroups is a bit confusing. Since a FieldGroup is a component that "has a" group container, use the "group.onClickScript" property.

Comment by Daniel Seibert (Inactive) [ 09/Apr/12 ]

Created a matrix of KRAD components and Script Event Support.
http://bit.ly/HYl7Jq

Comment by Daniel Seibert (Inactive) [ 18/Apr/12 ]

Opened up scripting to all types of components.

Comment by Daniel Seibert (Inactive) [ 18/Apr/12 ]

Added a new kitchen sink page for event script demo and test.

Comment by Daniel Seibert (Inactive) [ 20/Apr/12 ]

Some notes after testing various components and events:

1. MessageField - does not work as expected. This is because messages are wrapped by <span> tags. Workaround is to wrap the messages in a group (<div> tag).

2. Now that InputFields allow scripts, the user has the choice to assign the event script to the InputField or the Component. The differences are subtle.

Comment by Daniel Seibert (Inactive) [ 23/Apr/12 ]

I noticed when I have scripts setup for both onClick and onDblClick, when you perform a double click, it fires two click events and a double click event.

Comment by Daniel Seibert (Inactive) [ 23/Apr/12 ]

Have tested the various events on most KRAD components.

Generated at Fri Apr 10 02:01:47 CDT 2020 using JIRA 6.1.5#6160-sha1:a61a0fc278117a0da0ec9b89167b8f29b6afdab2.