How to bind model value to grid column if column type is check box

Question

Hi,I am using blazor grid component.So In my project I want search and select all functionality .so select all rows I am using Selection functionality and to achieve this I am including and In grid column I am including thisso I want to achieve following functionality:1.On Select all I want select all rows and get this rows in particular list2.I want to bind object value to to this whether I am using "Field" property but when I click On save button I am not getting this NewProduct=true in list. 3.If user search particular record then this search result is displayed in grid and that time if user click select All checkbox from header then if user click on save button then I want only this search result in save method.I will provide tried code below.It will be helpful if I will get solution for this.ThanksAttachment: Index_729bb6ac.rar

Sarveswaran Palani · Accepted Answer

Hi Pierre,

Based on your query, we have prepared a sample that selects the records in the initial loading using the index of the row obtained from the GetRowIndexByPrimaryKey method in the DataBound event. Additionally, when the user deselects a record, we remove the specific index from the list using the Remove method in the RowDeselectHandler event. We have attached the sample code for your reference.

List<int> index = new List<int> { 1001, 1002, 1012, 1006, 1024 };

public async Task Data(object args)

{

foreach(int num in index)

{

var val = Grid.GetRowIndexByPrimaryKeyAsync(num);

int value1 = Convert.ToInt32(val.Result);

await Grid.SelectRowAsync(value1);

}

public void RowDeselectHandler(RowDeselectEventArgs<Order> args)

{

var data = args.Data.OrderID;

index.Remove(data);

}

Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_
https://blazor.syncfusion.com/documentation/datagrid/events#databound

https://blazor.syncfusion.com/documentation/datagrid/events#rowdeselected

Please get back to us if you have any further queries.

Regards,
Sarvesh

Attachment: SfGridFilteringModified_49b43d9a.zip

Rahul Narayanasamy · Answer

Hi Ashwini, Greetings from Syncfusion. Query: On Select all I want select all rows and get this rows in particular list Query: I want to bind object value to to this whether I am using "Field" property but when I click On save button I am not getting this NewProduct=true in list. We have validated your query and we suspect that you want to get all the selected records of the Grid. You can get all the selected rows by using GetSelectedRecords method of the Grid. Find the below code snippets for your reference. . . . @code{ SfGrid DefaultGrid; . . . public async void Show() { // get all the selected records var selectedRec = await DefaultGrid.GetSelectedRecords(); } . . . } If you are still facing the problem, could you please share the below details. It will be helpful to validate and provide a better solution. Share your exact requirement. Video demonstration of the problem. Share a simple reproduceable sample. Query: If user search particular record then this search result is displayed in grid and that time if user click select All checkbox from header then if user click on save button then I want only this search result in save method. We have validated your query and we suspect that you want to get the search result. We may suspect that for this query, you have already created another thread for this. Could you please follow this thread for further follow-ups. Link: https://www.syncfusion.com/forums/154739/how-to-get-search-result If this is not your actual requirement or if we misunderstood your requirement, then could you please share the below details about this requirement. It will be helpful to validate and provide a better solution. Regards, Rahul

Andy Camacho Centella · Answer

Hi, I'm facing an issue that is similar to this, I want to pass the value from my model data directly to the checkbox column to show as checked if the field is true, so if I have a record with a bool field that is true the checkbox should be already marked as checked

Rahul Narayanasamy · Answer

Hi Andy, Greetings from Syncfusion. Query: I want to pass the value from my model data directly to the checkbox column to show as checked if the field is true, so if I have a record with a bool field that is true the checkbox should be already marked as checked We have validated your query and we might suspect that you want to render Boolean values(which is present in record) as checkbox in Grid column. We suggest you to achieve your requirement by using DisplayAsCheckBox property. Find the below code snippets and documentation for your reference. @code{ . . . } Reference: https://blazor.syncfusion.com/documentation/datagrid/columns/#render-boolean-values-as-checkbox Please let us know if you have any concerns. Regards, Rahul

Coda Error Analysis · Answer

Sometimes it just takes asking the question in the right way.  Thanks, Rahul!  Another customer benefitted from your answer.

Coda Error Analysis · Answer

Next question - how do we make that checkbox column we show interactive, so that clicking it will trigger either the RowSelected or RowDeselected events?  Or even trigger a custom event?

Sarveswaran Palani · Answer

Hi Team,

Based on your query, we understand that you would like to improve the
responsiveness of the checkbox for selection operations.We are happy to inform
you that you can achieve this by utilizing the checkbox click to trigger both
the RowSelected and RowDeselected events. We have provided a sample for your
reference, which you can find attached to this response.

If you have any further queries, please get back to us.

Regards,
SarveshAttachment: SfGridSelection_dfd4aa84.zip

Pierre Visser · Answer

Hi Sarveswaran,I had a look at your sample project in

SfGridSelection_dfd4aa84.zip above, and have 2 questions relating to it:There are 50 records in your Orders list. When the checkbox in the header of the first column on the grid is clicked, all 50 checkboxes across all pages are checked (correct behavior as PersistSelection property on grid is true), but this.Grid.GetSelectedRowIndexes() (this code is found in RowSelectHandler procedure) only returns 12 orders, so seems to ignore the PersistSelection property (expecting all 50 orders to have been returned as that is the number of checked orders). How do I get the complete list of checked orders?﻿﻿When the project is run, all orders are unchecked by default. How would I, for example, check the fist 5 orders on startup? I have looked at multiple axamples on this, but could not find one that worked 100% for what I need.I need to be able to do all of the following:

On startup, specify which orders are checkedAbility to check/uncheck an order using a single click (not double clicking the order to edit it first)Ability to check all/uncheck all orders in the gridGet all checked order across all pages (this will be done via a button located below the grid in my project)I think if you added the ability to bind a GridColumn of Type="Column.CheckBox"﻿﻿ to a property on the model, it would be the solution for both my questions, something like:Field=@nameof(Order.IsChecked) Type="ColumnType.CheckBox" Width="30">Thank you for your assistance

Sarveswaran Palani · Answer

Hi Pierre,Greetings from Syncfusion support. Query - How do I get the complete list of checked orders? We suggest you to use our inbuilt GetSelectedRecords method to get the collection of the selected records from the grid. Refer the attached API link for your reference. Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync Query: How would I, for example, check the first 5 orders on startup?We have validated your and you want to preselect the rows at initial rendering of the Grid. You can achieve your requirement by using DataBound event and SelectRows method of the Grid. Here, we have selected row index’s(0,1,2,3,4) at initial rendering of the Grid. Find the below code snippets and sample for your reference. . . @code { SfGrid Grid; public List Orders { get; set; } int[] index = { 0, 1, 2, 3, 4 }; public async Task RowSelectHandler(RowSelectEventArgs args) { SelectedRowIndexes = await this.Grid.GetSelectedRowIndexes(); selected = await this.Grid.GetSelectedRecordsAsync(); txtSelectedRecordCount = selected.Count() + " rows selected"; StateHasChanged(); } public async Task Data(object args) { await Grid.SelectRows(index); } } Kindly refer the modified sample for your reference. Please get back to us, if you have any further queries. Regards, SarveshAttachment: SfGridFilteringModified_ad767565.zip

Pierre Visser · Answer

Hi Sarvesh,I apologise for my delayed response. Thank you for your solutions to my queries. Your solution to my second query does indeed check the first 5 items on startup. The problem is that when you page to any page, the first 5 items on that page always stays checked, regardless of any items that you checked/unchecked (changes are therefore ignored and first 5 items on the page are always checked). Looking back, I don't think I worded my query correctly, so here is what I need to do (in your example):On startup, I need to be able to specify which items are checked. The checked items could be spread across all the pages. So, say the following orderIDs need to be checked: 1001, 1002, 1003, 1020,1024 and 1029. On startup the first page is shown (containing orders 1001 to 1012) so therfore orders 1001, 1002 and 1003 need to be checked. If the user pages to page 2 (containing orders 1013 to 1024), orders 1020 and 1024 must be checked. If the user pages to page 3 (containing orders 1025 to 1036), orders 1029 must be checked. Any changes the user make must then be preserved. For example, if the user is on page 1 and decides to uncheck order 1003 and check order 1006, when he goes to page 2, 1020 and 1024 will be checked. If he now goes back to page 1 again, orders 1001, 1002 and 1006 will be checked.As mentioned originally, i think the easiest solution would be to add the ability to bind the checkbox column to a property on the model, something like this (I have added Checked property): public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } public bool Checked { get; set; } } I'm not sure how easy that would be to implement on your side

Pierre Visser · Answer

Hi Sarvesh,The example you provided works, thank you so much. I will implement it in my project and let you know if there are any further issues.Keep up the great service.RegardsPierre

Sarveswaran Palani · Answer

Thanks for an update.We'll currently close this ticket. Please get back to us, if you have any further queries.Regards,Sarvesh