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:WebHierarchicalDataGridID="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:WebHierarchicalDataGridID="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:WebHierarchicalDataGridID="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:WebHierarchicalDataGridID="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:WebHierarchicalDataGridID="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://claimsLoadClaims();break;case 2://pharmacyLoadRx();break;case 3://laboratoryLoadLab();break;case 4: //prior prescription authorizationsLoadPriorRXAuth();break;case 5:// prior medical authorizationsLoadPriorMedicalAuth();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?
Hello ddieppa,
You should be able to achieve your requirement using the WebTab Load on Demand functionality.
Best regards,Martin PavlovInfragistics, Inc.
I tried that at first, but the problem I have is that I load 5 grids in the page load, how this load on demand can help me if I am calling my services 5 times? I just wanna call the corresponding service when the user click on the corresponding tab.
Thanks