1. Home
  2. Forum
  3. Blazor
  4. Support for default values in checkbox colums

Support for default values in checkbox colums

Hello, I'm using the grid with the selection feature, but I want to have the checkbox with a predefined values
                    <SprbrkGridColumn Type="ColumnType.Checkbox" Width="40" />
156

5 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team November 19, 2020 12:49 PM UTC

Hi Andy, 

Greetings from Syncfusion support. 

We are not clear about the exact requirement. We suspect that you would like to render the checkboxes with corresponding states in the Grid column based on a Boolean column value data. If so, then we suggest you to define the Field property for the corresponding checkbox column and enable DisplayAsCheckBox property. Please refer the documentation and codes below, 

 
<GridColumn Field=@nameof(Order.Verified) DisplayAsCheckBox="true" Width="50"></GridColumn> 

public class Order{    ...    public bool Verified { get; set; }    }

Or you can also use our column template feature in Grid. You can use this feature to render an SfCheckBox in a Grid column based on a Boolean column value. Please refer the below documentation and codes for more details. 

<GridColumn Field=@nameof(Order.Verified) Width="50">    <Template>        @{            var a = context as Order;        }        <SfCheckBox Checked="a.Verified"></SfCheckBox>    </Template></GridColumn>

If we have misunderstood your query or if you are still facing difficulties then the following details would be helpful for us to proceed further. 
  1. Share a detailed description of your complete requirement.
  2. Share a pictorial representation(video demo) explaining your complete requirement.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran 


AC Andy Camacho Centella November 19, 2020 02:51 PM UTC

Yeah I think is not the problem that I wan to solve, I'm using this configuration for my grid
<SfGrid DataSource="@Orders" AllowSelection="true" AllowPaging="true">
    <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings>
    <GridColumns>
        <GridColumn Type="ColumnType.CheckBox" Width="50" @bind-Value="Order.Selected"></GridColumn> //suggestion
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>
but for the checkbox column I want to bind the value of the row and should be marked as true if the row is true in that value
for example if the list is [{name: 'a', selected: true}, {name: 'b', selected: false}] I want to bind the selected field into the checkbox column and also be able to use the selection feature

RS Renjith Singh Rajendran Syncfusion Team November 20, 2020 01:26 PM UTC

Hi Andy, 

Thanks for your update.  
 
Based on your requirement, we suggest you to use the SelectRows method in DataBound event handler of Grid. Fetch the row indexes you need to select in RowDataBound event handler and pass it as argument of SelectRows method. We are attaching a sample for your convenience, please download the sample from the link below, 

Please refer the code below, 

 
<GridEvents DataBound="DataBound" RowDataBound="RowDataBound" TValue="Order"></GridEvents> 

<GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>
public List<double> RowIndexes = new List<double>();public void DataBound(){    Grid.SelectRows(RowIndexes);    RowIndexes = new List<double>();}public async Task RowDataBound(RowDataBoundEventArgs<Order> args){    if (args.Data.Verified)    {        var RowIndexValue = await Grid.GetRowIndexByPrimaryKey(args.Data.OrderID);        RowIndexes.Add(RowIndexValue);    }}

References : 
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKey_System_Object_                                                                                                                                         

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AS Adriana Selena Tito Ilasaca February 5, 2021 10:12 PM UTC

Trying with the approach you suggest and have all the records selected (by selecting all records with header checkbox) and pagination, it takes too long to load the page data because the DataBound event is triggered. Do you have any suggestions to improve the performance? So each time the page changes the data loads fast.

I add a gif in a rar file.

Attachment: SelectAllGridPaginationq_1fc694ff.rar

RS Renjith Singh Rajendran Syncfusion Team February 8, 2021 12:48 PM UTC

Hi Adriana, 

Greetings from Syncfusion support. 

We have analyzed the shared video, we suspect that you are facing delay in fetching the data from your remote service, this is why the spinner is shown to indicate the delay in fetching data from source. By default, grid’s spinner will be shown whenever there is delay in fetching data from a source(local or remote data) to Grid. And when enabling pagination, Grid will fetch data based on load on demand concept for performance. So only when navigating to the page, the grid contents of the page will be generated. 

And the Grid DataBound events will be triggered each time data binding action is performed in Grid. This is the default behavior of these events. 

We have prepared a sample based on this scenario with local list data, at this case, as there is no delay in fetching the list, we could not face the reported behavior from our side. We are attaching the sample for your convenience, please download the sample from the link below, 
 
 
If we have misunderstood your requirement or if you need further assistance regarding this scenario. Then kindly share with us the following details for better assistance. 

  1. Share the complete Grid rendering codes.
  2. Share the details regarding the data(local or remote) you are binding to Grid.
  3. Share with us the exact scenario you are facing this problem.

Please get back to us if you need further assistance. 

Regards, 
Renjith R

Marked as answer
Loader.
Up arrow icon