Allrows get selected after filling datasource

[Jordi Stevens]

Hello,

For some reason all my rows get selected after loading my data in my datasource. Here is my code:

@page "/Factuur/FactuurList"

@inject HttpClient Http

@inject IJSRuntime jsRuntime

@inject NavigationManager UriHelper

<h3>Factuur</h3>

<div class="container-fluid">

  <div class="row control_wrapper">

    <div class="col-md-2">

      <SfDropDownList TItem="Select" TValue="Select" @bind-Value="@Jaar" DataSource="@Jaren">

        <DropDownListEvents TItem="Select" TValue="Select" Closed="JaarChange"></DropDownListEvents>

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

      </SfDropDownList>

    </div>

    <div class="col-md-2">

      <SfDropDownList @ref="MaandDDL"  TItem="Select" TValue="Select" @bind-Value="@Maand" DataSource="@Maanden">

        <DropDownListEvents TItem="Select" TValue="Select" Closed="MaandChange"></DropDownListEvents>

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

      </SfDropDownList>

    </div>

    <div class="col-md-8 text-right">

      <SfButton @onclick="Create" IsPrimary="true" IconCss="fas fa-plus">Factuur toevoegen</SfButton>

    </div>

  </div>

</div>

<SfGrid @ref="FacturenTabel" DataSource="Facturen">

  <GridEditSettings AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

  <GridColumns>

    <GridColumn Visible="false" IsPrimaryKey="true" Field="FactuurId" TextAlign="TextAlign.Left" Width="70"></GridColumn>

    <GridColumn Field="Naam" TextAlign="TextAlign.Left" Width="70"></GridColumn>

    <GridColumn Field="Datum" TextAlign="TextAlign.Left" Width="40" Format="dd/MM/yyyy"></GridColumn>

    <GridColumn HeaderText="School" TextAlign="TextAlign.Left" Width="100">

      <Template>

        @{

          var factuur = (context as AankoopBlazor.Shared.Models.Factuur);

          <SfChip @key="factuur.FactuurId">

            <ChipItems>

              @foreach (var school in factuur.ScholenHelper)

              {

                <ChipItem CssClass=@("color"+school.LookupValue) @key="school.LookupId" Text="@school.LookupValue"></ChipItem>

              }

            </ChipItems>

          </SfChip>

        }

      </Template>

    </GridColumn>

    <GridColumn HeaderText="Acties" TextAlign="TextAlign.Left" Width="30">

      <Template>

        @{

          var factuur = (context as AankoopBlazor.Shared.Models.Factuur);

          <SfButton CssClass="e-round" IconCss="fas fa-file-download" IsPrimary="true" @onclick="() => NavigateToNewTab(factuur.Download)"></SfButton>

          <SfButton CssClass="e-round" IconCss="fas fa-edit" IsPrimary="true"></SfButton>

          <SfButton CssClass="e-round e-danger" IconCss="fas fa-trash" @onclick="() => DeleteFactuur(factuur.FactuurId)"></SfButton>

        }

      </Template>

    </GridColumn>

  </GridColumns>

</SfGrid>

@code {

  private List<Factuur> Facturen { get; set; }

  private List<Select> Jaren { get; set; }

  private List<Select> Maanden { get; set; }

  private Select Jaar { get; set; }

  private Select Maand { get; set; }

  SfDropDownList<Select,Select> MaandDDL { get; set; }

  SfGrid<Factuur> FacturenTabel { get; set; }

  SfChip ScholenChip { get; set; }

  protected override async Task OnInitializedAsync()

  {

    Jaren = await Http.GetFromJsonAsync<List<Select>>("api/Factuur/JaarGet");

    Jaar = Jaren.FirstOrDefault();

    await MaandGet(Jaar.ID);

  }

  private async Task MaandGet(string jaarID)

  {

    Maanden = await Http.GetFromJsonAsync<List<Select>>("api/Factuur/MaandGet?jaarId=" + jaarID);

    Maand = Maanden.FirstOrDefault();

    await FacturenGet(Maand.ID);

  }

  private async Task JaarChange(ClosedEventArgs args)

  {

    await MaandDDL.ShowSpinner();

    await FacturenTabel.ShowSpinner();

    await MaandGet(Jaar.ID);

  }

  private async Task MaandChange(ClosedEventArgs args)

  {

    await FacturenTabel.ShowSpinner();

    await FacturenGet(Maand.ID);

  }

  private async Task FacturenGet(string maandID)

  {

    Facturen = await Http.GetFromJsonAsync<List<Factuur>>("api/Factuur/FactuurGet?maandId=" + maandID);

  }

  private async Task NavigateToNewTab(string url)

  {

    await jsRuntime.InvokeAsync<object>("open", url, "_blank");

  }

  private void Create()

  {

    UriHelper.NavigateTo("/Factuur/FactuurForm");

  }

  private async Task DeleteFactuur(string id)

  {

    //await Http.DeleteAsync("api/Factuur/FactuurDelete?Id=" + id);

    List<Factuur> facturen = await FacturenTabel!.GetCurrentViewRecords();

    Factuur factuur = facturen.FirstOrDefault(t => t.FactuurId.Equals(id));

    if (factuur != null)

    {

      await FacturenTabel.DeleteRecord("FactuurId", factuur);

    }

  }

}

I already tried putting     await FacturenTabel.ClearRowSelection(); and     await FacturenTabel.ClearSelection(); after Facturen = await Http.GetFromJsonAsync<List<Factuur>>("api/Factuur/FactuurGet?maandId=" + maandID);. But thats not working

[Vignesh Natarajan]

Hi Jordi,  

 

Thanks for contacting Syncfusion support.  

 

Query: “For some reason all my rows get selected after loading my data in my datasource. Here is my code:” 

 

We have analyzed the reported query and we understand that by default all rows in grid are selected during initial rendering. Since it is a known issue, we have resolved the reported issue and included the fix for the issue in our 18.4.0.48 patch release. So we request you to upgrade to our latest version to resolve the reported issue.  

 

Please find the release notes regarding the same from below  

 

https://blazor.syncfusion.com/documentation/release-notes/18.4.48/?type=all#grid  

 

Please get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan