I am trying to create a custom control that consists of a bp:DataPager and other controls. I need the custom control to use the same data source as an associated bp:GridView that shares the same parent. Nothing I have tried or what type of control I start with it never uses the data source correctly.
Ultimately, what I need is something like this:
<div ID="GridviewContainer" DataContext="MyCustomViewModelWithWhatIsNeededForThisGridView">
<bp:GridView DataSource="{value: Customers}" ShowTableWhenNoData="true">
<Columns>
<bp:GridViewTextColumn Value="{value: Id}" HeaderText="Customer ID" />
<bp:GridViewTextColumn Value="{value: Name}" HeaderText="Name" />
<bp:GridViewTextColumn Value="{value: Orders}" HeaderText="Orders" />
</Columns>
</bp:GridView>
<cc:CustomDataPagerWithOtherControls DataSet="{value: Customers}" />
</div>
Note the following:
- There is a bp:GridView followed by a custom control.
- The custom control contains a bp:DataPager and other controls.
- All the elements are contained within a div with a DataContext. That datacontext should house everything needed for these controls.
- Both controls in the GridviewContainer must use the same DataSource/DataSet object so they work together.
- There could be more than one instance of the full div with different data on a page. (In other words, I need the ability to have multiple grids on the page showing different data, each with their own grid, datapager, and other related controls.)
The code above is how I need to use it. Following is a working example using regular controls but that do not share a DataContext or use any custom controls.
The dothtml file:
<div ID="GridviewContainer">
<bp:GridView DataSource="{value: Customers}" ShowTableWhenNoData="true">
<Columns>
<bp:GridViewTextColumn Value="{value: Id}" HeaderText="Customer ID" />
<bp:GridViewTextColumn Value="{value: Name}" HeaderText="Name" />
<bp:GridViewTextColumn Value="{value: Orders}" HeaderText="Orders" />
</Columns>
</bp:GridView>
<bp:DataPager DataSet="{value: Customers}" />
<span>
Page size:
<bp:DropDownList DataSource="{value: PageSizeOptions}"
SelectedValue="{value: PageSizeSelectedValue}"
AllowUnselect="false"
Changed="{command: ChangePageSize()}"
class="SelectPageSize">
<ToggleIcon>
<bp:FAIcon Icon="CaretDownSolid" />
</ToggleIcon>
</bp:DropDownList>
</span>
<span class="GridItemsAndPagesCounts">
<b>{{value: Customers.PagingOptions.TotalItemsCount}}</b>
<span> items in </span>
<b>{{value: Customers.PagingOptions.PagesCount}}</b>
<span> pages</span>
</span>
</div>
The ViewModel:
public BusinessPackDataSet<Customer> Customers { get; set; } = new BusinessPackDataSet<Customer> { PagingOptions = { PageSize = 10 } };
public List<int> PageSizeOptions { get; set; } = new List<int> { 5, 10, 15, 20 };
public int PageSizeSelectedValue { get; set; } = 10;
public override Task PreRender()
{
if (Customers.IsRefreshRequired)
Customers.LoadFromQueryable(GetQueryable(62));
return base.PreRender();
}
public void ChangePageSize()
{
Customers.IsRefreshRequired = true;
Customers.PagingOptions.PageSize = PageSizeSelectedValue;
Customers.PagingOptions.PageIndex = 0;
}
private static IQueryable<Customer> GetQueryable(int size)
{
var numbers = new List<Customer>();
for (var i = 0; i < size; i++)
{
numbers.Add(new Customer { Id = i + 1, Name = $"Customer {i + 1}", Orders = i });
}
return numbers.AsQueryable();
}
public class Customer
{
public int Id { get; set; }
public string Name { get; set; }
public int Orders { get; set; }
}
How do I create a control that contains the DataPager and other controls and will use the specified DataSet correctly?
Hopefully I provided enough detail.