Datagrid Checkbox Column Header

[pvagnini]

Hi,
Great set of tools thanks.

For a Datagrid with a Checkbox Column being used as row selection is there any way to render a Checkbox in the Header that can be used to then select / deselect all rows please?

Thanks

[stsrki]

We already have multi selection mode by using checkboxes in one of the latest 0.9.3 previews. It is set simply by <DataGrid SelectionMode="DataGridSelectionMode.Multiple">

If you want to try it here is the guide https://github.com/stsrki/Blazorise#try-preview

[pvagnini]

Thanks for you quick response. I have used 0.9.3 and set the multi select mode as you suggested.   I can see that it allows to click multiple lines and select them but it is not quite what I had in mind.   My model contains an IsSelected bool field linked to the checkboxes as per below. What I was looking for is to have a check box in the header row also that I could use to select or de-select all the items?     From: Mladen Macanović <[email protected]> Sent: Tuesday, 26 January 2021 6:30 PM To: stsrki/Blazorise <[email protected]> Cc: Paolo Vagnini <[email protected]>; Author <[email protected]> Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   We already have multi selection mode by using checkboxes in one of the latest 0.9.3 previews. It is set simply by <DataGrid SelectionMode="DataGridSelectionMode.Multiple"> If you want to try it here is the guide https://github.com/stsrki/Blazorise#try-preview — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[stsrki]

You have that option

Also, check 093 demo for reference https://github.com/stsrki/Blazorise/blob/dev093/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor

[pvagnini]

Thanks got it. I see there is a new DataGridMultiSelectColumn   I realise I can bind the SelectedItems to a List, but is there any way to bind the MultiSelectColumn to the bool field in my model? I tried the usual Field="@nameof(Model.IsSelected)" but this does not appear to work.   I have also seen a couple of other thing upon using 9.3 preview.   The OnSelectedRowStyling no longer appears to work and the selection is always blue.   In my Startup.cs the section below now errors with: IServiceProvider' does not contain a definition for 'UseBootstrapProviders' and no accessible extension method 'UseBootstrapProviders' accepting a first argument of type 'IServiceProvider' could be found.               app.ApplicationServices               .UseBootstrapProviders()               .UseFontAwesomeIcons();   I have commented it out and it does not appear to affect anything else.   Thanks for your help. It is most appreciated.   From: Mladen Macanović <[email protected]> Sent: Tuesday, 26 January 2021 7:15 PM To: stsrki/Blazorise <[email protected]> Cc: Paolo Vagnini <[email protected]>; Author <[email protected]> Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   You have that option Also, check 093 demo for reference https://github.com/stsrki/Blazorise/blob/dev093/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[stsrki]

Hi,

1. I checked in code and it seems currently checked state is done with internal IsChecked property. Since @David-Moreira has done a multiselection feature maybe he can also answer how hard would it be to use an item field if it is defined?

2. OnSelectedRowStyling works for me, I just tried it for both single and multi mode

3. Use...() are completely removed in 0.9.3

[pvagnini]

Thanks,   Looks like previously styling.Background changed the background highlight but now it is styling,Color   From: Mladen Macanović <[email protected]> Sent: Tuesday, 26 January 2021 8:16 PM To: stsrki/Blazorise <[email protected]> Cc: Paolo Vagnini <[email protected]>; Author <[email protected]> Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   Hi, 1. I checked in code and it seems currently checked state is done with internal IsChecked property. Since @David-Moreira has done a multiselection feature maybe he can also answer how hard would it be to use an item field if it is defined? 2. OnSelectedRowStyling works for me, I just tried it for both single and multi mode 1. Use...() are completely removed in 0.9.3 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[stsrki]

Yes, previously row color was controlled with bg-primary class(for Boostrap), and it was wrong. So we fixed it to use table-primary class.

[David-Moreira]

Great! Someone else interested in this feature! :)

So... I don't think we expose anything like IsSelected no, not on this feature, neither on the datagrid in general.
@stsrki correct me if I'm wrong.
The only thing that tells you what is selected, is the SelectedRow and the SelectedRows in the case of multi select being active.

From the top of my head, you have two ways.

• You do a boolean check based on if your item is in the SelectedRows list
• Otherwise you implement your own checkbox where you apply your own logic using the provided template. And still tell Datagrid when the selected has changed with the boolean value.
  Should be something like this, I haven't tested it:
  

If you need more help with this just say so, and I can take a more detailed look when I have more time.

[pvagnini]

Hi David,   Thanks for your response. Just to be clear the IsSelected property is part of my model and not something that should be implemented by the data grid.   I have previously used a generic column with a Check in the Display Template that binds to my property and works, but this is missing the ability to check all in the header.   What would be great would be if you could still bind the check value to a property in the model when using the MultiSelectColumn.   I will try your suggestion and see if I can get to work.   Thanks for your help. Paolo.   From: David <[email protected]> Sent: Wednesday, 27 January 2021 12:16 AM To: stsrki/Blazorise <[email protected]> Cc: Paolo Vagnini <[email protected]>; Author <[email protected]> Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   Great! Someone else interested in this feature! :) So... I don't think we expose anything like IsSelected no, not on this feature, neither on the datagrid in general. @stsrki correct me if I'm wrong. The only thing that tells you what is selected, is the SelectedRow and the SelectedRows in the case of multi select being active. From the top of my head, you have two ways. * You do a boolean check based on if your item is in the SelectedItems list * Otherwise you implement your own checkbox where you apply your own logic using the provided template. And still tell Datagrid when the selected has changed with the boolean value. Should be something like this, I haven't tested it: If you need more help with this just say so, and I can take a more detailed look when I have more time. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[David-Moreira]

Hi David,   Thanks for your response. Just to be clear the IsSelected property is part of my model and not something that should be implemented by the data grid.   I have previously used a generic column with a Check in the Display Template that binds to my property and works, but this is missing the ability to check all in the header.   What would be great would be if you could still bind the check value to a property in the model when using the MultiSelectColumn.   I will try your suggestion and see if I can get to work.   Thanks for your help. Paolo.   From: David [email protected] Sent: Wednesday, 27 January 2021 12:16 AM To: stsrki/Blazorise [email protected] Cc: Paolo Vagnini [email protected]; Author [email protected] Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   Great! Someone else interested in this feature! :) So... I don't think we expose anything like IsSelected no, not on this feature, neither on the datagrid in general. @stsrki correct me if I'm wrong. The only thing that tells you what is selected, is the SelectedRow and the SelectedRows in the case of multi select being active. From the top of my head, you have two ways. * You do a boolean check based on if your item is in the SelectedItems list * Otherwise you implement your own checkbox where you apply your own logic using the provided template. And still tell Datagrid when the selected has changed with the boolean value. Should be something like this, I haven't tested it: If you need more help with this just say so, and I can take a more detailed look when I have more time. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

I understand what you'd like to do. It's not what the feature was intended for, but maybe you can customize it enough with the template to get it working just how you'd like. The feature is to "select many" and then do operations based on the records selected. Not to promptly bind model information. For example I am currently using it to allow my user to select various records, based on a one to many relationship, so I can just do a bulk insert of all the selected records onto my storage, instead of having the user inserting one record at a time.

May I ask what is the final purpose of the IsSelected of your record?

Another idea, is that the user selects the records by using the multi select, and then you have a button the user clicks that goes through the selectedRows and sets your selected records to "IsSelected".
Then again, I would like to hear what you are trying to accomplish in concrete so I can give you some better ideas/possibilities. :)

[pvagnini]

Hi David,   I tend to use a generic IsSelected property on most of my models. The purpose of this is so that selected records can then easily have some type of process performed on them based on the same list that populated the view.   I have found this approach works well when working in WPF MVVM.   I can certainly work with what is available but just thought it would be nice to bind directly if possible.   Thanks for your time.   From: David <[email protected]> Sent: Wednesday, 27 January 2021 8:35 AM To: stsrki/Blazorise <[email protected]> Cc: Paolo Vagnini <[email protected]>; Author <[email protected]> Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   Hi David,   Thanks for your response. Just to be clear the IsSelected property is part of my model and not something that should be implemented by the data grid.   I have previously used a generic column with a Check in the Display Template that binds to my property and works, but this is missing the ability to check all in the header.   What would be great would be if you could still bind the check value to a property in the model when using the MultiSelectColumn.   I will try your suggestion and see if I can get to work.   Thanks for your help. Paolo.   From: David [email protected] <mailto:[email protected]> Sent: Wednesday, 27 January 2021 12:16 AM To: stsrki/Blazorise [email protected] <mailto:[email protected]> Cc: Paolo Vagnini [email protected] <mailto:[email protected]> ; Author [email protected] <mailto:[email protected]> Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   Great! Someone else interested in this feature! :) So... I don't think we expose anything like IsSelected no, not on this feature, neither on the datagrid in general. @stsrki correct me if I'm wrong. The only thing that tells you what is selected, is the SelectedRow and the SelectedRows in the case of multi select being active. From the top of my head, you have two ways. * You do a boolean check based on if your item is in the SelectedItems list * Otherwise you implement your own checkbox where you apply your own logic using the provided template. And still tell Datagrid when the selected has changed with the boolean value. Should be something like this, I haven't tested it: If you need more help with this just say so, and I can take a more detailed look when I have more time. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. I understand what you'd like to do. It's not what the feature was intended for, but maybe you can customize it enough with the template to get it working just how you'd like. The feature is to "select many" and then do operations based on the records selected. Not to promptly bind model information. For example I am currently using it to allow my user to select various records, based on a one to many relationship, so I can just do a bulk insert of all the selected records onto my storage, instead of having the user inserting one record at a time. May I ask what is the final purpose of the IsSelected of your record? Another idea, is that the user selects the records by using the multi select, and then you have a button the user clicks that goes through the selectedRows and sets your selected records to "IsSelected". Then again, I would like to hear what you are trying to accomplish in concrete so I can give you some better ideas/possibilities. :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[David-Moreira]

Seems like you can accomplish that with the template.
Just let us know, if you're not able, or need any help. :)

[pvagnini]

Hi David,   One more thing I am hoping you can help with please.   In order to fit more on a screen I have wrapped the Data Grid in a div with font-size set at 75%   This all work well until I allow filters which still show at original font size which then does not look right. I can no see a way to address this. Any ideas please?   Regards Paolo   From: David <[email protected]> Sent: Thursday, 28 January 2021 5:38 AM To: stsrki/Blazorise <[email protected]> Cc: Paolo Vagnini <[email protected]>; Author <[email protected]> Subject: Re: [stsrki/Blazorise] Datagrid Checkbox Column Header (#1749)   Seems like you can accomplish that with the template. Just let us know, if you're not able, or need any help. :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[David-Moreira]

Hello,
I can try to help you, but those more general questions, could be addressed with @stsrki :P

So, I'm guessing your problem is with the inputs the filters row have. You also have to also style them.

The following screenshot is just for demonstration purposes, you should not directly alter such a general class such as form-control, unless you really do want to do so or apply more css specificity, otherwise you should apply your own class to the filters inputs and make the desired changes: