Urgent : onRowClick in dataTable hightlight the row with col

[venkattippi]

hi,

iam using richFaces 3.2.2. I have an issue which i cant get solution.

I have datatable with values.when i click on the row iam opening a contextMenu with options edit,delete and view.

Now what i have to do is when i click on the row i should highlight that row with any color and show the contextMenu and when i click another row the current row should hightlight and previous one which i select should come in normal color.

i tried this but i cannot solve this problem.

For contextMenu iam using componentController in the datatable.

could you please tell me how to do this.

Thanks in advance
Venkat

[ilya_shaikovsky]

onRowClick defined at table tag - redefines component control definition. So just change the row styles and call the menu both in dataTable onRowClick instead of component control using. Call show() method.

[venkattippi]

hi ilya_shaikovsky,

Thanks for reply, but

it is not working. i given like this

onRowClick="#{ri:component('partnerMenu')}.show();this.style.backgroundColor='red';"

if i give only onRowClick="#{ri:component('partnerMenu')}.show(); also its not working.

you are telling that hightlight the row with css in that onRowClick event and call the contextMenu by show() method their itself.

thatsfine but iam using component controller because in that iam getting the current row index and set in to f:param and getting that in contextMenu menuItem and there iam using ajax actionparam tag for setting that index to my bean property and taking that index then set rowindex to the dataTable property and get the rowdata.

if i do the two things in table onRowClick how can i get the current row index and assignTo my bean property ?


Thanks,

Venkat

[ilya_shaikovsky]

I've modified RF demo sample in order to be used like you need. check pelase

 <rich:contextMenu attached="false" id="menu" submitMode="ajax">
 <rich:menuItem ajaxSingle="true">
 <b>{car} {model}</b> details
 <a4j:actionparam name="det" assignTo="#{ddmenu.current}" value="{car} {model} details"/>
 </rich:menuItem>
 <rich:menuGroup value="Actions">
 <rich:menuItem ajaxSingle="true">
 Put <b>{car} {model}</b> To Basket
 <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Put {car} {model} To Basket"/>
 </rich:menuItem>
 <rich:menuItem value="Read Comments" ajaxSingle="true">
 <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Read Comments"/>
 </rich:menuItem>
 <rich:menuItem ajaxSingle="true">
 Go to <b>{car}</b> site
 <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Go to {car} site"/>
 </rich:menuItem>
 </rich:menuGroup>
 </rich:contextMenu>

 <h:panelGrid columns="2" columnClasses="top, top">

 <rich:dataTable value="#{dataTableScrollerBean.tenRandomCars}" var="car" id="table"
 rowClasses="cur" onRowClick="this.style.backgroundColor='red';#{rich:component('menu')}.show(event, {model: '#{car.model}', car: '#{car.make}'});">
 <rich:column>
 <f:facet name="header">
 Make
 </f:facet>
 <h:outputText value="#{car.make}"/>
 </rich:column>
 <rich:column>
 <f:facet name="header">
 Model
 </f:facet>
 <h:outputText value="#{car.model}"/>
 </rich:column>
 <rich:column>
 <f:facet name="header">
 Price
 </f:facet>
 <h:outputText value="#{car.price}" />
 </rich:column>

 </rich:dataTable>

 <a4j:outputPanel ajaxRendered="true">
 <rich:panel>
 <f:facet name="header">Last Menu Action</f:facet>
 <h:outputText value="#{ddmenu.current}"></h:outputText>
 </rich:panel>
 </a4j:outputPanel>
 </h:panelGrid>
 </h:form>

[venkattippi]

hi ilya_shaikovsky,

Its working fine. Thanks for ur example.

when i select a row it is highlighting and when i select another row the previous row which i selected is also in the red color.how can i do only selected row should have the red color.

ca we do this without using any javascript or we have to use javascript for unselect the previous selected row.
can you please give me an example.

thanks,

Venkat

[venkattippi]

hi ilya,

hightLight the selected row and unselect that row when we select another is done through javascript.

but i have two more questions on that

1) i want to highlight one row defaultly in datatable when i search the results from database and display in datatable.

2) in datatable i moving Up and down the row which i select.
here when i select and move that row to Up or Down iam hightlighting the row and after i moved which ever i highlighted is disapearing. that i want to hightlight after i moved that row.

can u please tell me how to do this

Thanks ,

Venkat