Showing posts with label Jsf. Show all posts
Showing posts with label Jsf. Show all posts

Thursday 5 April 2012

Get the value of t:inputCalendar if readonly is true


<t:inputCalendar id="cal" value="#{backingBean.date1}"
        renderAsPopup="true"
        popupDateFormat="MM/dd/yyyy"
        popupTodayDateFormat="dd-MMM-yyyy"
        popupWeekString="Week"
        popupTodayString="The date today is :"
        renderPopupButtonAsImage="true"
        helpText="MM/DD/YYYY"
        readonly="true"/>

To get the value in the backing bean just add the below code.
When readonly attribute is true, the component cannot be edited by the user.(ie the text box in the calendar cannot be edited.)

bodyId:id of body tag
formId:id of form tag
String dateString = (String) getExternalContext().getRequestParameterMap().get("bodyId:formId:date1");

SimpleDateFormat dateFormat = new SimpleDateFormat("MM/dd/yyyy",
                 getCurrentLocale());


                                                                                        



Monday 12 March 2012

valign not working for row in jsf panelgrid?

valign not working for row in jsf panelgrid?

Instead of valign we should give:

vertical-align : top

In panelgrid add rowclasses="rowStyle"


<h:panelGrid columns="3" styleClass="rowStyle">
</h:panelGrid>

In CSS add

.rowStyle{
vertical-align:top
}


Tuesday 6 March 2012

How to expand and collapse rows in jsf datatable?

How to expand and collapse rows in jsf datatable?

<%@ taglib uri="http://myfaces/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://adesa.com/jsf/components" prefix="adesa"%>
<%@ taglib uri="http://www.adesa.com/security" prefix="security"%>
<script type="text/javascript">
 function validate() {
     return false;
}

function addOnclickToDatatableRows(row) {
   
    var trs = document.getElementById('body:form1:dt1:'+row+':hide');
   
    if(trs.style.display=='none') {
        trs.style.display='block'
    } else {
        trs.style.display='none'
    }
 }

function highlightRow(tr) {
    tr.style.display = 'none' ;
}
</script>
<f:view>
    <h:form id="form1" onsubmit="return validate();">
        <br>
        <br>
        <br>
        <t:dataTable id="dt1" rowIndexVar="row"
            value="#{TableBean.perInfoAll}" var="item" bgcolor="#F1F1F1"
            border="10" cellpadding="5" cellspacing="3" first="0" rows="4"
            width="50%" dir="LTR" frame="hsides" rules="all"
            summary="This is a JSF code to create dataTable.">
            <h:column>
           
                <t:div id="heading">
                    <h:outputText value="heading"></h:outputText>
                   
                </t:div>
                <t:div id="hide">
                    <h:outputText value="#{item.id}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                    <h:outputText value="#{row}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                </t:div>
                <h:commandLink value="show/hide"
                    onclick="addOnclickToDatatableRows(#{row})"></h:commandLink>
            </h:column>
        </t:dataTable>
        <br>
        <br>
    </h:form>
</f:view>

How to Re-Execute Javascript on Ajax Render?

How to Re-Execute Javascript on Ajax Render?

Enclose all the ajax call and java script with in the output panel and set ajaxRendered = true

<a4j:outputPanel ajaxRendered="true">