React Ag-Grid Tutorial: Beyond Checkbox Selection | Codenemy Tutorial
HTML-код
- Опубликовано: 5 окт 2020
- Hey Guys,
In this video I am going to show How to select a row and display data for selected row. we will have a look on checkbox selection too and allow row selection based on conditions and many more.
React Ag-Grid Tutorial: Beyond Checkbox Selection | Codenemy Tutorial
Populate grid data from External API:
• React Ag-Grid Tutorial...
GitHub URL of program :
github.com/vikas62081/YT/tree...
#react #grid #selection #checkbox
Appreciate for this helpful tutorial🙏🏻
You saved my day!... Thank you so much
Thank you sir, just what I needed. I appreciate you sharing your skill.
It's my pleasure, Thanks for watching :)
Thank you so much bro. You made my day. Was struggling with my task. Your video helped me a alot. Expecting more videos from you. Once again thank you so much
Glad to hear that it was helpful, i will upload more videos and thanks for watching.
great! Thanks!!
I learned a lot! But I have problems with the aggregated data. I want to choose the top node, then only save the rows of selected few top nodes to the database. Is there anyway to do it???
Awesome video. Is there a way to render some text or icon when the row is not selectable (when there isn’t a checkbox)?
very good tutorials
This comment for grow your channel. Many Greetings From Turkey. ♥
no one is giving information about aggrid, very rare and great explaination thanks!
If possible can you make video on SSRM?
Thanks, Here you go ruclips.net/video/qOTeoNheCEc/видео.html
if you want more pls checkout aggrid playlist
@@Codenemy oh Thanks! :)
So useful video! Thanks a lot!
Glad to hear that, Thanks for watching :)
how to pre select and disable some checkboxes on load. I am having trouble at this
Could you please made video on default row checkbox selection
Nice
Thanks
thank you very much
Thanks for watching :)
Good explanation.. Can you please add vids about how to show hide a column i.e. customising columns and related topics.
Thanks for your suggestion, i will thanks for watching :)
Hey Mayank,
have a look ruclips.net/video/fq7JaTPCotw/видео.html
thankyou
good
Thanks
Hi! great video!.... how i can get the index of the select rows?, i want to redraw with background color only the select rows
You can do this by overriding css clsss style of ag-row-selected.
write this in css file and import it.
.ag-theme-alpine .ag-row-selected{
background-color: #59879c ;
}
if stuck plz let me know :)
how to do select max three checkbox .
Thanks this really helped me! Just one question-- getSelectedRows array stores all the rows that were selected. Even if I have deselected it later. I just want to know currently selected rows. Is there a function for that ?
Yes you can, getSelectedRows is gonna to return current selected data only in array.
@@Codenemy Thank you!
@@Codenemy Can you also do a video about refreshing the grid with updated data ? :)
@@salonidesai8055 sure, i will, thanks for suggestion :)
This was very helpful
I need a help in checking the checking based on the boolean values I am getting from the API.
Can you please help me?
You can directly assign to row selection, hope it will take care
I have one doubt ,it possible to apply the CSS properties in the checkbox selection???
Of course you can do this, Go to inspect & select checkbox grab those classes and override.
Hello sir,
I need to select/deselect only current page rows using checkbox header selection.
currently with header selection it selects my all data..
please help
Thanks
Have a look here on this angularjs example codesandbox.io/s/ag-gridpaginationselection59298385-vub53?fontsize=14&hidenavigation=1&theme=dark
headerCheckboxSelection is only supported in Client side model? Is that correct? I want it in Server side as well. What can be done for that? any suggestion.
It's completely depend on your required.
Have a look here for server side selection: www.ag-grid.com/documentation/react/server-side-model-selection/
Have a look here for server-side pagination, filtering & sorting ruclips.net/video/qOTeoNheCEc/видео.html
Can we implement editing on rows which were selected? Thanks
Of course you can, But you have to write custom functionality.
I want to select only 10 rows , after that all check box has to be disabled, any 10 rows and post that check box have to be disabled.
How to do that?
This feature doesn't exist, i tried to customize too but haven't worked.
Hi can you make series for unit testing in jest enzyme with ag grid
sure, will update you, Thanks for watching :)
In case I want to select a row by clicking on the row but the checkbox should not be checked, how to do that?
You can try these two methods
onRowClicked - Row is clicked.
onRowDoubleClicked - Row is double clicked.
on trigger of event you can call your method and implement your business.
I have an issue with checkbox row selection. The row is selected on click of anywhere in the row, which I don't want. I want to select the row only on click of the checkbox. Can you please help with this issue. Thanks
Hey Add this property to aggrid :
suppressRowClickSelection={true}
please let me know if issue remain, thanks for watching
@@Codenemy It worked. Thanks alot. I have been struggling with React ag grid alot since I have started using it but your videos are very helpful. Are you planning a Project video with Ag grid, that would be really awesome. Also unique since I don't find any such projects on RUclips.
glad to hear that it worked, which kind of project would you like to see with ag Grid.
@@Codenemy so basically take data from an external API and also add it via form(can use formik or react-final-form)
Then have copy, edit, delete buttons on the last column, which work accordingly. And best thing would be drag&drop functionality of rows. This is some rough idea I am thinking of.
@@ApurvKhareI will, thanks for info :)
please make video on row editing with popup
I will Thanks for watching :)
RowSelection function called when I unchcek the checkbox as well,
function onSelectionChanged will get called while uncheck as well
how to do select all checkox for serverside
get a field in api and use function
const onFirstDataRendered = useCallback((params) => {
gridRef.current.api.forEachNode((node) =>
node.setSelected(field)
);
}, []);
nice
🦏
On checkbox selection only that particular row cell should show else hidden.. how can I achieve this
You have to modify isRowSelectable function Have a look here www.ag-grid.com/react-data-grid/row-selection/#example-specify-selectable-rows
@@Codenemy I need checkbox on all rows, its just that if I check any one checkbox (in that particular row ) I want the action items to be editable otherwise it should be non editable
@@poornimanaidu3815 on selection change you can enable editable for row only, Have a look here ag-grid.com/javascript-data-grid/cell-editing/#example-full-row-editing
@@Codenemy this is done on button click event, but in my project I have added "checkboxSelection: true" in "columnDefs
" and every checkbox selection I want a cell editable and vice versa
@@poornimanaidu3815 you have to implement single select and enable edit once user selected row