I hereby attached a sample which has 2 webgrids . 1 webgrid showing order header and the child webgrid showing order details.

After Loading, every rowclick in order header grid should populate the order details grid corresponding to the order id.

Actually this order header have only 800 rows and still it is showing a lag time in bringing the order details upon clicking the order header.

In my application, I have 2500 records in header table and for each header item there are around 10 to 20 detail lines in child table and it takes long time to load.

I'n my applciation, the layout setting is like this

 <LayoutSettings AllowExport="Yes" AllowFilter="Yes" GridLineColor="236, 233, 216"
                AutoFilterSuggestion="true" ShowFilterStatus="true" AllowSorting="Yes" RowHeightDefault="-1px"
                PagingExportMode="ExportAllData" AlwaysShowHelpButton="False" ColumnSetHeaders="Default"
                RowChangedAction="OnTheFlyPostback" TreeLines="False" RowHighlightType="EntireRow"
                RowHeaders="Default" DisplayDetailsOnUnhandledError="False"
   PagingMode="VirtualLoad" VirtualLoadMode="Default" PagingLoadMode="Automatic">

Please explain me why this performance issue occurs.

I hereby attached the screenshots of my application search pages.