<script type="text/javascript">
var remoteLoad = function (grid) {
grid.body.mask("Loading...", "x-mask-loading");
grid.store.load({
callback: function () {
grid.body.unmask();
}
});
};
</script>
<ext:Panel ID="Panel1" runat="server">
<Content>
<ext:ComboBox ID="cbFacility" runat="server"
DisplayField="Display" ValueField="Data"
FieldLabel="Facility"
ForceSelection="true"
AllowBlank="true"
Width="400">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="Data" Mapping="Data"/>
<ext:RecordField Name="Display" Mapping="Display"/>
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<Triggers>
<ext:FieldTrigger Icon="Clear" Qtip="Remove selected" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue();" />
</Listeners>
<DirectEvents>
<Select OnEvent="cbFacility_Change">
<EventMask ShowMask="true" />
</Select>
<TriggerClick OnEvent="cbFacility_Change">
<EventMask ShowMask="true" />
</TriggerClick>
</DirectEvents>
</ext:ComboBox>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Collapsible="false"
AutoWidth="true"
Height="425"
Frame="true">
<Store>
<ext:Store runat="server" OnRefreshData="Store_Refresh" RemotePaging="false">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Person" Mapping="PERSON" />
<ext:RecordField Name="Dept" Mapping="TITLE" />
</Fields>
</ext:JsonReader>
</Reader>
<Proxy>
<ext:PageProxy />
</Proxy>
<BaseParams>
<ext:Parameter Name="startRemote" Value="#{PagingSlider}.getValue()" Mode="Raw" />
<ext:Parameter Name="limitRemote" Value="#{PagingSlider}.increment" Mode="Raw" />
</BaseParams>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="5" Mode="Raw" />
</AutoLoadParams>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column DataIndex="Person" Header="Person" />
<ext:Column DataIndex="Dept" Header="Department" />
</Columns>
</ColumnModel>
<View>
<ext:GroupingView
ID="GroupingView1"
runat="server" EnableGrouping="false"
ForceFit="true"
StartCollapsed="true"
GroupTextTpl='<span id="ColorCode-{[values.rs[0].data.ColorCode]}"></span>{text} (Count: {[values.rs.length]})'
EnableRowBody="true">
</ext:GroupingView>
</View>
<LoadMask ShowMask="true" />
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Slider ID="PagingSlider" runat="server" FieldLabel="# Records"
MinValue="0"
Width="400">
<Plugins>
<ext:SliderTip ID="SliderTip1" runat="server" />
</Plugins>
<Listeners>
<Change Handler="#{RangeText}.setText((newValue+1) + '-' + (newValue + #{PagingSlider}.increment) + ' of ' + #{PagingSlider}.maxValue)" />
<ChangeComplete Handler="remoteLoad(#{GridPanel1});" />
</Listeners>
</ext:Slider>
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ToolbarTextItem ID="RangeText" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="5" />
</BottomBar>
</ext:GridPanel>
</Content>
</ext:Panel>
Code behind:
#region Page_Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack && !X.IsAjaxRequest)
{
cbFacility.Clear();
cbFacility.GetStore().DataSource = new CommonBLL().GetFacilityList();
cbFacility.GetStore().DataBind();
PagingSlider.Increment = 1000;
LoadGrid();
}
}
#endregion
#region cbFacility_Change
protected void cbFacility_Change(object sender, DirectEventArgs e)
{
LoadGrid();
}
#endregion
#region Grid Methods
#region LoadGrid
private void LoadGrid()
{
DataTable dt = LoadData();
BindData(0, PagingSlider.Increment, dt);
}
private void LoadGrid(int start, int limit)
{
DataTable dt = LoadData();
BindData(start, limit, dt);
}
#endregion
#region LoadData
private DataTable LoadData()
{
string selectedFacility = cbFacility.SelectedItem.Value;
ReportDAO rDAO = new ReportDAO(GetDBAlias());
// This is where it returns the 200K records as DataTable if the filter is not set.
return rDAO.SelectPastDueForTracker(selectedFacility, string.Empty, string.Empty, string.Empty);
}
#endregion
#region BindData
private void BindData(int start, int limit, DataTable dTable)
{
DataTable dt = dTable.Clone();
if (limit > dTable.Rows.Count)
{
limit = dTable.Rows.Count;
RangeText.Hidden = PagingSlider.Hidden = true;
}
else
{
RangeText.Hidden = PagingSlider.Hidden = false;
PagingSlider.MaxValue = dTable.Rows.Count - PagingSlider.Increment;
if (!IsPostBack)
RangeText.Text = "1 - " + PagingSlider.Increment + " of " + dTable.Rows.Count;
}
for (int i = start; i < start + limit; i++)
dt.ImportRow(dTable.Rows[i]);
if (dt.Rows.Count == 0)
{
GridPanel1.GetStore().ClearMeta();
GridPanel1.Reload();
}
else
{
GridPanel1.GetStore().DataSource = dt;
GridPanel1.GetStore().DataBind();
}
}
#endregion
#region Store_Refresh
protected void Store_Refresh(object sender, StoreRefreshDataEventArgs e)
{
int start = int.Parse(e.Parameters["startRemote"]);
int limit = int.Parse(e.Parameters["limitRemote"]);
DataTable dt = LoadData();
e.Total = dt.Rows.Count;
BindData(start, limit, dt);
}
#endregion
#endregion
Above is the full sample to reproduce.
For eg., As soon as the grid loads 200K records. If you apply the filter, filter has 4 alues, first value will filter the grid to 199K records, 2nd will filter to 1K records, 3rd and 4th will return 0 records.
And for the slider Max Value, I need to implement it dynamically. I cannot hard code the value, since the records will be loaded dynamically according to the filter (Please see the code [PagingSlider.MaxValue = dTable.Rows.Count - PagingSlider.Increment;]).
Thanks in Advance.
Regards,
Dan.
Originally Posted by dnguyen
