I have a page with 5 tabs, each tab contains a grid with data, I want to load the data in the grid when the corresponding tab is clicked instead of loading all the gridviews on the page load.

this is my aspx code:

<ig:WebTab runat="server" Width="99.7%" Height="500px" OnSelectedIndexChanged="OnSelectedIndexChanged" SelectedIndex="0" ID="webTabHistoricalSnapshot">
<Tabs>
<ig:ContentTabItem runat="server" Text="Claims" EnableRelativeLayout="True">
<Template>
<ig:WebHierarchicalDataGrid
ID="WebHierarchicalDataGrid1"
runat="server"
Width="100%"
AutoGenerateColumns="false"
DataKeyFields="MonthOfService"
EnableAjax="false"
EnableDataViewState="true"
EnableViewState="True"
InitialDataBindDepth="-1">
<Columns>
<ig:BoundDataField Width="100%" DataFieldName="MonthOfService" Key="MonthOfService" Header-Text="Service Month"></ig:BoundDataField>
</Columns>
<Bands>
<ig:Band DataMember="SectionDataDetails" Key="ClaimID" AutoGenerateColumns="false" DataKeyFields="ClaimID" Width="98%">
<Columns>
<ig:BoundDataField DataFieldName="Place" Key="Place" Header-Text="Place"></ig:BoundDataField>
<ig:BoundDataField DataFieldName="DOSFrom" Key="DOSFrom" Header-Text="DOS (From)"></ig:BoundDataField>
<ig:BoundDataField DataFieldName="DOSTo" Key="DOSTo" Header-Text="DOS (To)"></ig:BoundDataField>

</Columns>
</ig:Band>
</Bands>
<Behaviors>
<ig:Activation Enabled="true" />
<ig:Selection Enabled="true" CellClickAction="Row" CellSelectType="None" RowSelectType="None" />
</Behaviors>
<EmptyRowsTemplate>
<uc1 id="NoDataCl" runat="server" strtext="No Data to Display." />
</EmptyRowsTemplate>
</ig:WebHierarchicalDataGrid>
<uc1:NoData ID="NoData_ClCustom" runat="server" strText="No Data to Display." />
<br />
<br />
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Pharmacy" EnableRelativeLayout="True">
<Template>
<ig:WebHierarchicalDataGrid
ID="WebHierarchicalDataGrid2"
runat="server"
Width="100%"
AutoGenerateColumns="false"
DataKeyFields="MonthOfService"
EnableAjax="false"
EnableDataViewState="true"
EnableViewState="True"
InitialDataBindDepth="-1">
<Columns>
<ig:BoundDataField Width="100%" DataFieldName="MonthOfService" Key="MonthOfService" Header-Text="Service Month"></ig:BoundDataField>
</Columns>
<Bands>
<ig:Band DataMember="SectionDataDetails" Key="RxID" AutoGenerateColumns="false" DataKeyFields="RxID" Width="98%">
<Columns>
<ig:BoundDataField Width="20%" DataFieldName="LabelName" Key="LabelName" Header-Text="Label Name"></ig:BoundDataField>

</Columns>
</ig:Band>
</Bands>
<Behaviors>
<ig:Activation Enabled="true" />
<ig:Selection Enabled="true" CellClickAction="Row" CellSelectType="None" RowSelectType="None" />
</Behaviors>
<EmptyRowsTemplate>
<uc1 id="NoDataRx" runat="server" strtext="No Data to Display." />
</EmptyRowsTemplate>
</ig:WebHierarchicalDataGrid>
<uc1:NoData ID="NoData_RxCustom" runat="server" strText="No Data to Display." />
<br />
<br />
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Laboratory" EnableRelativeLayout="True">
<Template>
<ig:WebHierarchicalDataGrid
ID="WebHierarchicalDataGrid3"
runat="server"
Width="100%"
AutoGenerateColumns="false"
DataKeyFields="MonthOfService"
EnableAjax="false"
EnableDataViewState="true"
EnableViewState="True"
InitialDataBindDepth="-1">
<Columns>
<ig:BoundDataField Width="100%" DataFieldName="MonthOfService" Key="MonthOfService" Header-Text="Service Month"></ig:BoundDataField>
</Columns>
<Bands>
<ig:Band DataMember="SectionDataDetails" Key="LabID" AutoGenerateColumns="false" DataKeyFields="LabID" Width="98%">
<Columns>
<ig:BoundDataField Width="20%" DataFieldName="DateOfService" Key="DateOfService" Header-Text="Date of Service"></ig:BoundDataField>
<ig:BoundDataField Width="80%" DataFieldName="RName" Key="RName" Header-Text="Name"></ig:BoundDataField>
</Columns>
</ig:Band>
</Bands>
<Behaviors>
<ig:Activation Enabled="true" />
<ig:Selection Enabled="true" CellClickAction="Row" CellSelectType="None" RowSelectType="None" />
</Behaviors>
<EmptyRowsTemplate>
<uc1:NoData ID="NoLaboratoryData" runat="server" strText="No Data to Display." />
</EmptyRowsTemplate>
</ig:WebHierarchicalDataGrid>
<uc1:NoData ID="NoData_LabCustom" runat="server" strText="No Data to Display." />
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Prior Prescription Authorizations" EnableRelativeLayout="True">
<Template>
<ig:WebHierarchicalDataGrid
ID="WebHierarchicalDataGrid4"
runat="server"
Width="100%"
AutoGenerateColumns="false"
DataKeyFields="MonthOfService"
EnableAjax="false"
EnableDataViewState="true"
EnableViewState="True"
InitialDataBindDepth="-1">
<Columns>
<ig:BoundDataField Width="100%" DataFieldName="MonthOfService" Key="MonthOfService" Header-Text="Service Month"></ig:BoundDataField>
</Columns>
<Bands>
<ig:Band DataMember="SectionDataDetails" Key="PAID" AutoGenerateColumns="false" DataKeyFields="PAID" Width="99.5%">
<Columns>

<ig:BoundDataField Width="10%" DataFieldName="BeginDate" Key="BeginDate" Header-Text="Begin Date"></ig:BoundDataField>
<ig:BoundDataField Width="10%" DataFieldName="EndDate" Key="EndDate" Header-Text="End Date"></ig:BoundDataField>

</Columns>
</ig:Band>
</Bands>
<Behaviors>
<ig:Activation Enabled="true" />
<ig:Selection Enabled="true" CellClickAction="Row" CellSelectType="None" RowSelectType="None" />
</Behaviors>
<EmptyRowsTemplate>
<uc1:NoData ID="NoRxAuthData" runat="server" strText="No Data to Display." />
</EmptyRowsTemplate>
</ig:WebHierarchicalDataGrid>
<uc1:NoData ID="NoData_AuthRxCustom" runat="server" strText="No Data to Display." />
<br />
<br />
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Prior Medical Authorizations" EnableRelativeLayout="True">
<Template>
<ig:WebHierarchicalDataGrid
ID="WebHierarchicalDataGrid5"
runat="server"
Width="100%"
AutoGenerateColumns="false"
DataKeyFields="MonthOfService"
EnableAjax="false"
EnableDataViewState="true"
EnableViewState="True"
InitialDataBindDepth="-1">
<Columns>
<ig:BoundDataField Width="100%" DataFieldName="MonthOfService" Key="MonthOfService" Header-Text="Service Month"></ig:BoundDataField>
</Columns>
<Bands>
<ig:Band DataMember="SectionDataDetails" Key="PAID" AutoGenerateColumns="false" DataKeyFields="PAID" Width="100%">
<Columns>
<ig:BoundDataField Width="10%" DataFieldName="ServiceType" Key="ServiceType" Header-Text="Service Type"></ig:BoundDataField>
<ig:BoundDataField Width="21%" DataFieldName="ServiceCode" Key="ServiceCode" Header-Text="Description"></ig:BoundDataField>

</Columns>
</ig:Band>
</Bands>
<Behaviors>
<ig:Activation Enabled="true" />
<ig:Selection Enabled="true" CellClickAction="Row" CellSelectType="None" RowSelectType="None" />
</Behaviors>
<EmptyRowsTemplate>
<uc1:NoData ID="NoAuthData" runat="server" strText="No Data to Display." />
</EmptyRowsTemplate>
</ig:WebHierarchicalDataGrid>
<uc1:NoData ID="NoData_PrAuthCustom" runat="server" strText="No Data to Display." />

<br />
<br />
</Template>
</ig:ContentTabItem>
</Tabs>
<AutoPostBackFlags SelectedIndexChanged="Off" />
<PostBackOptions EnableReloadingUnselectedTab="true" EnableAjax="true" EnableLoadOnDemand="False" />
</ig:WebTab>

and here is what I am doing in the code behind:

protected void OnSelectedIndexChanged(object sender, TabSelectedIndexChangedEventArgs e)
{
switch (e.NewIndex)
{
case 1://claims
LoadClaims();
break;
case 2://pharmacy
LoadRx();
break;
case 3://laboratory
LoadLab();
break;
case 4: //prior prescription authorizations
LoadPriorRXAuth();
break;
case 5:// prior medical authorizations
LoadPriorMedicalAuth();
break;
}
}

the first time I click in each tab nothing happens, until I go back and click again.

Any Help how to load this grids on demand?