Details

    • Type: Task Task
    • Status: Closed Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.2.0-m1, 2.2
    • Component/s: Development
    • Security Level: Public (Public: Anyone can view)
    • Labels:
      None
    • 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-7987Problems with tooltip and mouse event
      KULRICE-1982Add parms to widget's page_button to allow 'onClick' events to invoke javascript. Also add a readOnly parm.
      KULRICE-4049documentControlstag not setting custom button onclick event
      KULRICE-8861Eventing Framework
      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-7008Add flag to component that enables storing of component in session
      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.

        Activity

        Hide
        Jerry Neal (Inactive) added a comment -

        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.

        Show
        Jerry Neal (Inactive) added a comment - 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.
        Hide
        Daniel Seibert (Inactive) added a comment -

        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.

        Show
        Daniel Seibert (Inactive) added a comment - 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.
        Hide
        Daniel Seibert (Inactive) added a comment -

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

        Show
        Daniel Seibert (Inactive) added a comment - Created a matrix of KRAD components and Script Event Support. http://bit.ly/HYl7Jq
        Hide
        Daniel Seibert (Inactive) added a comment -

        Opened up scripting to all types of components.

        Show
        Daniel Seibert (Inactive) added a comment - Opened up scripting to all types of components.
        Hide
        Daniel Seibert (Inactive) added a comment -

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

        Show
        Daniel Seibert (Inactive) added a comment - Added a new kitchen sink page for event script demo and test.
        Hide
        Daniel Seibert (Inactive) added a comment -

        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.

        Show
        Daniel Seibert (Inactive) added a comment - 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.
        Hide
        Daniel Seibert (Inactive) added a comment -

        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.

        Show
        Daniel Seibert (Inactive) added a comment - 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.
        Hide
        Daniel Seibert (Inactive) added a comment -

        Have tested the various events on most KRAD components.

        Show
        Daniel Seibert (Inactive) added a comment - Have tested the various events on most KRAD components.

          People

          • Assignee:
            Daniel Seibert (Inactive)
            Reporter:
            Jerry Neal (Inactive)
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Structure Helper Panel