Re: DataTable Selected Row And Paging
Hi,
>
> 1. How to highlight/color differently the currently 'selected' row in
> the data table. I have implemented the select functionality by using the
> AjaxEventBehavior as shown the snippet below.
>
>
>
> dataTable = new DataTable( "dataTable", columns, employeeListDataProvider,
> 20) {
>
> @Override
>
> protected Item
> newRowItem(String id, int index, final IModel model) {
>
>
> rowItem.add(
> new AjaxEventBehavior( "click") {
>
>
> @Override
>
>
> protected void onEvent(AjaxRequestTarget target) {
>
>
> selectedEmployee = (Employee) model.getObject( );
>
>
> }
>
> } );
>
>
>
> return
> rowItem;
>
> }
>
>
>
> };
>
1- Generate an ID for each row of the date
2- Create a JavaScript function toggleSelect(idOfRow): this function checks
if a row has class "selected" (or not) and sets/unsets it
3- on server side target.appendJavaScript("toggleSelect('idOfRow');
4- Use CSS to draw selected rows diffrenetly
>
> The select functionality is working just fine, but now I want to show the
> row corresponding to the selected employee in a different color. The
> selected row should display as 'selected' even when the user navigates to
> another page (page means the datatable page using paging navigator and not
> WebPage) and then navigates back to the original datatable page.
>
> If row is selected add class selected to row wen table is rendered (there
is an overridable method on datatable the generates the RowItem : just do
item.add(AttributeAppender.for("class")
>
>
> 2. My list of employees is pretty large and I am using a
> BootstrapAjaxPagingNavigator along with the datatable. Now in some cases I
> want to programmatically show a particular employee as selected. So for
> this, I need some means to find the datatable page number which will have
> the desired employee, I then need to programmatically display that
> particular datatable page and then I need to show the row corresponding to
> the desired employee as highlighted/selected. To complicate matters
> further,
> my datatable is styled to display vertical scroll bars. So if possible,
> after displaying the correct datatable page, the datatable should
> automatically scroll-up or scroll-down to ensure that the row corresponding
> to the desired employee, is always visible to the user.
>
Use plugin ScrollTo?
>
> Any pointers to get the above two use cases working ?
>
>
>
>
>
> Warm regards,
>
>
>
> Anup
>
>
>
>
>
> ---
> This email has been checked for viruses by Avast antivirus software.
> https://www.avast.com/antivirus
>
--
Regards - Ernesto Reinaldo Barreiro
Re: DataTable Selected Row And Paging
Hi, I would advise you to control these via CSS rather than implementing server level logic. Though its possiblle writing server level logic to achieve client UX objectives is just bad practice in my opinion. .. BTW thats the reason why you are struggling :) Here is how I'd prefer to solve any UI/US issue. Use an *AbstractBehavior* like *SimpleAttributeModifier*, to add a class to represent some state. Then via simple CSS, simple control the UI state as you please. This ensures the server is communicating necessary information about STATE to the page, and the CSS translates the STATE to any UI logic or Action you see fit. - Software documentation is like sex: when it is good, it is very, very good; and when it is bad, it is still better than nothing! -- View this message in context: http://apache-wicket.1842946.n4.nabble.com/DataTable-Selected-Row-And-Paging-tp4673621p4673623.html Sent from the Users forum mailing list archive at Nabble.com. - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
DataTable Selected Row And Paging
Hi,
I have a couple of use cases for DataTable for which I have not been able to
find a solution. Both use cases are pretty common and I am sure that the
solution is something very simple, but somehow I am struggling to get it
working.
1. How to highlight/color differently the currently 'selected' row in
the data table. I have implemented the select functionality by using the
AjaxEventBehavior as shown the snippet below.
dataTable = new DataTable( "dataTable", columns, employeeListDataProvider,
20) {
@Override
protected Item
newRowItem(String id, int index, final IModel model) {
rowItem.add(
new AjaxEventBehavior( "click") {
@Override
protected void onEvent(AjaxRequestTarget target) {
selectedEmployee = (Employee) model.getObject( );
}
} );
return
rowItem;
}
};
The select functionality is working just fine, but now I want to show the
row corresponding to the selected employee in a different color. The
selected row should display as 'selected' even when the user navigates to
another page (page means the datatable page using paging navigator and not
WebPage) and then navigates back to the original datatable page.
2. My list of employees is pretty large and I am using a
BootstrapAjaxPagingNavigator along with the datatable. Now in some cases I
want to programmatically show a particular employee as selected. So for
this, I need some means to find the datatable page number which will have
the desired employee, I then need to programmatically display that
particular datatable page and then I need to show the row corresponding to
the desired employee as highlighted/selected. To complicate matters further,
my datatable is styled to display vertical scroll bars. So if possible,
after displaying the correct datatable page, the datatable should
automatically scroll-up or scroll-down to ensure that the row corresponding
to the desired employee, is always visible to the user.
Any pointers to get the above two use cases working ?
Warm regards,
Anup
---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus
