how can i solve 'Object reference not set to an instance of an object.' in blazor?

Question

I giv up to solve this. i dont't know what is wrong with my code, if the problem is instance of object, i tried to give my pagging class an instance but still no clue.

This is my index class;

 <DataGridComponent TItem="Employee"
               DataItems="listEmployee"
               Columns="columnDefinitions"
               Paging="@(new PagingConfig {
                             Enabled = true,
                             CustomPager = true,
                             PageSize = 3
                         })">

     <CustomPager>
      <button class="btn btn-primary" @onclick="PrevPage"> Prev </button>
         <span>&nbsp; &nbsp; Page 
         <input type="number"  min="1"@bind-value="@DataGrid.currentPageNumber"/> 
         of @DataGrid.MaxPageNumber &nbsp; &nbsp;</span>
        <button class="btn btn-primary" @onclick="NextPage"> Next </button>
  </CustomPager>
 </DataGridComponent>

@code{

private DataGridComponent<Employee> DataGrid;
private List<Employee> listEmployee;
private List<ColumnDefinition> columnDefinitions;

protected override void OnInitialized()
{
    base.OnInitialized();
    Initialize();
}


private void PrevPage()
{
    DataGrid.GoToPrevPage();
}

private void NextPage()
{
    DataGrid.GoToNextPage();
}

this is my DataGrid class

 <div class="level">
     <div class="level-left"></div>
     <div class="level-right">
      <div class="level-item">
        @if (Paging != null && Paging.Enabled)
        {
            @if (Paging.CustomPager)
            {
                @CustomPager
            }
            else
            {
                <span @onclick="GoToPrevPage"><b>&lt;</b>Prev</span>
                <span>&nbsp; &nbsp; @currentPageNumber of @Paging.MaxPageNumber(DataItems.Count) 
               &nbsp; &nbsp;</span>
                <span @onclick="GoToNextPage"><b>Next&gt;</b></span>
            }
        }
    </div>
   </div>
 </div>

 @code {

[Parameter]
public int currentPageNumber { get; set; } = 1;

[Parameter]
public List<TItem> DataItems { get; set; }

[Parameter]
public List<ColumnDefinition> Columns { get; set; }

[Parameter]
public PagingConfig Paging { get; set; } = new PagingConfig();

[Parameter]
public RenderFragment CustomPager { get; set; }

public void GoToPrevPage()
{
    currentPageNumber = Paging.PrevPageNumber(currentPageNumber);
}
public void GoToNextPage()
{
    currentPageNumber = Paging.NextPageNumber(currentPageNumber, DataItems.Count);
}

public int MaxPageNumber { get => Paging.MaxPageNumber(DataItems.Count); }
}

and this is my my pagingconfig

public class PagingConfig
{
    public bool Enabled { get; set; }
    public int PageSize { get; set; }

    public bool CustomPager { get; set; }

    public int NumOfItemsToSkip(int pageNumber)
    {
        if (Enabled)
        {
            return (pageNumber - 1) * PageSize;
        }
        else
            return 0;
    }

    public int NumOfItemsToTake(int totalItemCount)
    {
        if (Enabled)
        {
            return PageSize;
        }
        return totalItemCount;
    }
    public int PrevPageNumber(int currentPageNumber)
    {
        if (currentPageNumber > 1)
            return currentPageNumber - 1;
        else
            return 1;
    }

    public int NextPageNumber(int currentPageNumber, int totalItemsCount)
    {
        if (currentPageNumber < MaxPageNumber(totalItemsCount))
        {
            return currentPageNumber + 1;
        }
        else
        {
            return currentPageNumber;
        }
    }

    public int MaxPageNumber(int totalItemcount)
    {
        int maxPageNumber;
        double numberOfPage = (double)totalItemcount / (double)PageSize;
        if (numberOfPage == Math.Floor(numberOfPage))
        {
            maxPageNumber = (int)numberOfPage;
        }
        else
        {
            maxPageNumber = (int)numberOfPage + 1;
        }
        return maxPageNumber;
    }
   }
  }

the problem is, when i tried to set enabled into true, the pagging config should get the value of true from index. But it's said not set the instance object yet. i tried to put in, the new Pagging instance into grid component but still no clue :(

Answer 1

In Index.razor you set up a DataGridComponent instance in Razor and then declare another one in the code section private DataGridComponent<Employee> DataGrid. These are two unlinked instances of DataGridComponent. To reference DataGrid to your razor declared version you need to use @ref as below.

<DataGridComponent TItem="Employee"
               DataItems="listEmployee"
               Columns="columnDefinitions"
               @ref = "this.DataGrid"   
               Paging="@(new PagingConfig {
                             Enabled = true,
                             CustomPager = true,
                             PageSize = 3
                         })">

Answer 2

It's just the @ref="DataGrid" missing in the markup of your DataGridComponent. Therefore, your private DataGrid variable is null.

Answer 3

DataGrid needs to be assigned. I think you want this:

<DataGridComponent @ref="DataGrid" TItem="Employee" ...>
   ...
</DataGridComponent>

the reference is to the variable in this line:

private DataGridComponent<Employee> DataGrid;