Ngx datatable get selected row

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub?

Sign in to your account. Current behavior Selected column in single select mode is blue. Didn't find any css class to overwrite in DOM explorer.

Get GridView Row Data On Row Click Using jQuery

Expected behavior There should be a "selected" class on the datatable-body-row. Customizing the css. Somewhere you set this classes, which can be pretty easy used to set a background color:. Any progress? Even when using the enormously specific CSS selector above I wasn't able to change the BG color from the default blue.

Suggested workarounds? Just ran into this myself. My use-case is that I essentially want to remove the added "active" class, but have the rest of the changes propagated. I tried the following:. The CSS changes are applied, but unfortunately the inherited colour is still the same as it's set further up the chain. If I try to set a specific colour, it remains blue.

I expect there's an animation going on somewhere? The following selector works in the latest version - this removes the colour entirely and uses the row-striping if it's turned on:. Thx Bidthedog that helped. I just added EEE color for hovered rows, cause inherit left white for me on hovers.Method used for setting column widths.

Distributes based on widths. Uses flex-grow API. Distributes proportionally. Array of columns to display. Total count of all rows. Default value: 0.

ngx datatable get selected row

Use external paging instead of client-side paging. Default value: false. Use external sorting instead of client-side sorting. The height of the footer in pixels. Pass a falsey for no footer. The height of the header in pixels.

Pass a falsy value for no header. Default value: Static messages in the table you can override for localization. Page size to show.

Subscribe to RSS

Default value: undefined. Show the linear loading bar. Current offset page - 1 shown. Default value: true. Swap columns on re-order columns or move them. The height of the row. When virtual scrolling is not in use, you can pass undefined for fluid heights.

If using virtual scrolling, you must pass a function or a number to calculate the heights. Using a function, you can set the height of individual rows:. Function for uniquely identifying a row, used to track and compare when displaying and selecting rows. Array of rows to display. Use horizontal scrollbar. Use vertical scrollbar for fixed height vs fluid.

This is necessary for virtual scrolling. A boolean or function you can use to check whether you want to select a particular row based on a criteria. Function to determine whether to show a checkbox for a row. List of row objects that should be represented as selected in the grid.

Rows are compared using object equality. For custom comparisons, use the selectCheck function. Default value: []. Row selection mode.I have been searching for a best datatable with features like sorting, searching, pagination, rows per page etc. I am a big fan of datatables. Datatable which I am using now:. Why I am using ngx-datatable? If you are facing any issue while installing, feel free to check the below posts to resolve those errors.

To install angular-cli in windows:. Getting the entered value, converting to lowercase and filtering with the backup cache store array and assigning it back to store array which we used in the template html file. Hi Gupta, I have already shared the code in the post. Can you tell me what else you are looking for? Can you please tell me how can I do? Thanks for visiting our site.

Hope you got some idea! Thanks for the reply. I hope you understand my problem. Please drop an email with your code snippets and issue details to mirthbees gmail.

Your email address will not be published. Notify me of follow-up comments by email. Notify me of new posts by email. This site uses Akismet to reduce spam. Learn how your comment data is processed. July 8, AngularFrameworks. Table of Contents.

Share this: Click to share on Facebook Opens in new window Click to share on Twitter Opens in new window Click to email this to a friend Opens in new window Click to print Opens in new window.

August 2, at pm. August 3, at pm. December 20, at pm. Amit Degadwala. September 19, at pm. Thanks in advance. Hi Amit, Thanks for visiting our site.When Select is enabled on a table you will inevitably wish to know what rows have been selected so you can perform some action on them edit, delete, highlight, etc. Select augments the selector-modifier object that can be used with the DataTables selector methods rowscolumns and cells methods - as well as their singular counterparts with a selected option.

This example shows a simple use case for this selector option - a button is presented using the Buttons extension which when activated will display a count of the selected rows. In addition to the above code, the following Javascript library files are loaded for use in this example:. This example uses a little bit of additional CSS beyond what is loaded from the library files belowin order to correctly display the table.

The additional CSS used is shown below:. The following CSS library files are loaded for use in this example to provide the styling of the table:. This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP.

ngx datatable get selected row

Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation. DataTables designed and created by SpryMedia Ltd. Privacy policy. SpryMedia Ltd is registered in Scotland, company no. Get selected items When Select is enabled on a table you will inevitably wish to know what rows have been selected so you can perform some action on them edit, delete, highlight, etc.

For example, to get the selected rows, columns and cells lines 1, 2 and 3 respectively : table.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service. The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Learn more. How to get row data onSelect event in ngx datatable Ask Question. Asked 1 year, 8 months ago. Active 11 months ago. Viewed 9k times. I am new to angular and ngx datatable. You should really do more research or attempt to google your questions first. If your question requires something further then you need to add in depth explanation. Active Oldest Votes. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password.

Post as a guest Name. Email Required, but never shown. The Overflow Blog. Featured on Meta. Feedback on Q2 Community Roadmap. Technical site integration observational experiment live on Stack Overflow.

Question Close Updates: Phase 1.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

ngx datatable get selected row

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account. I am facing the same issue. WalkOffEarthosamasaeed Do you have a solution for this issue?

Previously, I've used 9. Before But now, it's gone Anybody found any alternatives to this? This is a crucial, software-breaking bug.

Inlesco rowIndex works on version 9. I just updated to version 9. BearandYoon no, rowIndex does not work on 9. So which version should I use for a rowIndex? BearandYoon version Hi wizarrc rowIndex is working for me.

I have another issue on ngx-datatable inline-editing. When I change first sub-row, second sub row also is changed. I'd like to ask - how to get the index of a row now in the onSelect or any other callback's you provide for ngx-datatable component? Inlesco As far as I know, the maintainers of the project are the employees of the Swimlane company.

Ngx-datatable with Angular 4/5/6 Example

I am working on a forked copy of the project for a personal project of mine, but right now I contribute some code fixes and have been answering some questions on here. I've been arguing the same thing that you suggest with other callbacks. Refer here on a conversation I had about how to change the selected property and the corresponding event to be more useful.

This is an open source project, so feel free to open up issues on here with bugs you find or feature requests you want. Also, if you got value out of the project, consider forking the project and contributing changes for consideration by the project maintainers. That's what I did earlier this year. BearandYoon I have no idea. Do you have a plunker demo? Inlesco The reason there is no deprecation warning is:.

I agree that the correct move for such limiting factors was to make a clean break. I had to work around this issue by creating a hidden column and copying the rowIndex into that column. It's hacky and I'd appreciate having rowIndex in rowDetails back.

Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. What is the current behavior? What is the new behavior? This allows you to get the row index of the selected row when a row is selected. If this PR contains a breaking change, please describe the impact and migration path for existing applications I originally thought it would be good to offer a helper function that one could call to determine the row index, but since that is more of an anti-pattern, I feel that it's better to change selected to be number[] instead.

The user already has access to the rows array so it should be no problem, other than being a breaking change.

ngx datatable get selected row

My suggestion is to instead make the select event and selected input instead be of type number[] where it would return an array of row indexes and not the view index or even sorted index. I spoke about my suggestion here in more detail.

Get selected items

Ya, I have to agree its kind of misleading. I think the best way would be to get the row index yourself. I think I know what you're trying to do, I'd suggest something like this:. Actually what I am doing is making it so when you select the row, output on table of selectthat it will change all the cells in the row to be editable at once, while leaving the other rows in the table alone.

This was a work around to make it so I could do similar. Your this. If a keyboard button such as shift was pressed when activated, it would add multiple selections, yet only report one value and not even accurate one. Yea, I see what you mean on multiple select, that was not something I do in my code so I did not take it into account but it would not work in my change. Instead it's now on the burden of the user to know which index each row is on assuming they don't sort. They would also either have to enable external sorting and update the map themselves every time they want to sort, or disable sorting altogether.

This seems like a anti-pattern as well as the user is having to duplicate code on their end because there is no other way for them to get the internal details the library has. An alternative approach is either to replace selected of the row object type with a RowContext type that includes the rowIndexrow value, and maybe also include the sortedIndex and viewIndex.

At a minimum what is needed is just a collection of selected indexes rowIndexbecause the user has access to the original rows source, they can index into it themselves. In the demo provided in the library they have the Person type. This was bad, so now the Person type is not mutated with internal properties as it was once before. Unfortunately it provided a service-like capability by linking the rowIndex to each object. That link in now done internally in a Map object but does not expose that mapping of any sort to the user.

There does not appear to be any shortcut to either providing a service anti-pattern to bring back that knowledge to the user, forcing the user to recreate everything themselves duplicate codeor change the meaning of Selected Input property breaking change.

That could be achieved by having access the rowIndexes map pass from the body to selection component as an input parameter and doing something like this:. I think this is the quick hack fix you would be looking for, but it feels dirty and needing to be redesigned at some point.