DotVVM DataPager not working

Question

dothtml table with DataPager:

<bp:GridView DataSource="{value: UserRoleGroupListDTOs}" class="table table-bordered table-hover dataTable">
                <Columns>
                    <%--<dot:GridViewTextColumn ValueBinding="{value: Name}" HeaderText="Název" Events.Click="{command: GoToDetail() }"/>--%>
                    <bp:GridViewTemplateColumn HeaderText="{resource: eCENTRE.Common.Resources.Admin.Common.Name}">
                        <dot:RouteLink Text="{value: Name}" RouteName="UserRoleGroupDetail" Param-Id="{value: Id}" />
                    </bp:GridViewTemplateColumn>
                    <bp:GridViewCheckBoxColumn ValueBinding="{value: IsBlocked}" HeaderText="{resource: eCENTRE.Common.Resources.Admin.Common.Forbidden}" IsEditable="true"/>
                    <bp:GridViewTemplateColumn HeaderText="{resource: eCENTRE.Common.Resources.Admin.Common.Delete}" CssClass="align center">
                        <%--<i class="glyphicon glyphicon-remove remove-from-list" style="color:red;">
                        </i>--%>
                        <dot:Button class="btn btn-default" Click="{command: _parent.DeleteUserRoleGroup(Id)}" Text="{resource: eCENTRE.Common.Resources.Admin.Common.Delete}"/>

                    </bp:GridViewTemplateColumn>
                </Columns>

            </bp:GridView>
            <bp:DataPager DataSet="{value: UserRoleGroupListDTOs}"/>

ViewModel and init in function Prerender:

public GridViewDataSet<UserRoleGroupListDTO> UserRoleGroupListDTOs { get; set; }

    private readonly IUserRoleGroupFacade userRoleGroupDetailFacade;
    private readonly UserRoleGroupCrudFacade crudFacade;

    public UserRoleGroupListViewModel(IUserRoleGroupFacade userRoleGroupDetailFacade, UserRoleGroupCrudFacade crudFacade)
    {
        this.userRoleGroupDetailFacade = userRoleGroupDetailFacade;
        this.crudFacade = crudFacade;
    }

    public override Task Init()
    {
        return base.Init();
    }
    public override Task PreRender()
    {
        UserRoleGroupListDTOs = new GridViewDataSet<UserRoleGroupListDTO>();
        UserRoleGroupListDTOs.PagingOptions.PageSize = 10;
        UserRoleGroupListDTOs.SortingOptions.SortDescending = true;
        UserRoleGroupListDTOs.SortingOptions.SortExpression = nameof(UserRoleGroupListDTO.Name);
        UserRoleGroupListDTOs.OnLoadingData = options => Task.Run(() => userRoleGroupDetailFacade.GetUserRoleGroupGridViewDataSetLoadedData(options)).Result;

        return base.PreRender();
    }

Pager does show, but after click on any button, nothing is happening.

If I add initialization into Init method, pager works, but viewModel has another errors.

Answer 1

As Tomas wrote, you create new instance of dataset, so you lose PagingOptions.

You have to init dataset only in new request, not in postbacks.

public override Task Init()
{
    if (!Context.IsPostBack)
    {
        UserRoleGroupListDTOs = new GridViewDataSet<UserRoleGroupListDTO>
        {
            PagingOptions = { PageSize = 10 },
            SortingOptions =
            {
                SortDescending = true,
                SortExpression = nameof(UserRoleGroupListDTO.Name)
            },
        };
    }
    return base.Init();
}

Then you have to setup delagate OnLoadingData in load or PreRender

public override Task PreRender()
{
    UserRoleGroupListDTOs.OnLoadingData =
        options => Task.Run(() => userRoleGroupDetailFacade.GetUserRoleGroupGridViewDataSetLoadedData(options)).Result;
    return base.PreRender();
}

Answer 2

You need to initialize the pager in the Init phase. The PreRender event occurs after the command from the page is handled. You are basically overwriting the dataset with the initial one.

See the diagram in the ViewModels Documentation.