GridPanel creating based on excessively large JSON

  1. #1

    GridPanel creating based on excessively large JSON

    Hi

    I have a several grids on my page, each grid have about 50 rows, as result size of my page with layout about 2 mb

    My GridPanel
    <ext:GridPanel ID="extGrid" ClientIDMode="Predictable" runat="server" Header="false" HideBorders="true"
    	AutoHeight="true" AutoWidth="true" 
    	EnableDragDrop="false" EnableColumnMove="False" 
    	ViewStateMode="Disabled" Cls="grid">
    	<Store>
    		<ext:Store runat="server" SerializationMode="Complex" ClientIDMode="Predictable" 
    			RemoteGroup="false" RemotePaging="false" RemoteSort="false" GroupOnSort="false" IgnoreExtraFields="true">
    			<Listeners>
    				<Load Fn="dataPrepare" Delay="0" />
    			</Listeners>
    		</ext:Store>
    	</Store>
    	<ColumnModel ClientIDMode="Predictable" DefaultSortable="false" DefaultWidth="70" >
    		<Columns>
    			<ext:Column Width="200" Hideable="False" MenuDisabled="True">
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalText" Mode="Value" Value="Total" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-str" />
    				</CustomConfig>
    			</ext:Column>
    			<ext:NumberColumn DataIndex="sls" Header="Total Sales" Align="Right" Format="$0,000"
    				Width="110" Tooltip="Total Sales ($ in Thousands)" Hideable="False" MenuDisabled="True">
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:C0}" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-dgt" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="prt_sp" Header="% Promo" Align="Right"
    				Format="0.00%" Width="80" Tooltip="Promo Sales (%)" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0.00\%}" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="cp_amt" Header="vs Previous (%)" Align="Right"
    				Format="0%" Tooltip="Current ($) vs. Previous Year (%)" Width="90" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0\%}" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="s_bdg" Header="vs. Budget" Align="Right" 
    				Format="0,000" Tooltip="Index vs. Budget" GroupName="group" />
    			<ext:NumberColumn DataIndex="sls_qty" Header="Movement  (Units)" Align="Right" 
    				Format="0,000" Tooltip="Movement (Units)" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0,0}" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-dgt" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="cp_unt" Header="vs Previous (%)" Format="0%"
    				Align="Right" Tooltip="Sales (Units) vs. Year Ago (%)" Width="90" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0\%}" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="g_mrg" Header="Gross Margin" Align="Right"
    				Format="$0,000" Tooltip="Gross Margin ($ in Thousands)" Hideable="False" 
    				MenuDisabled="True" Width="90" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:C0}" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-dgt" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="prt_gm" Header="Margin Rate (%)" Align="Right"
    				Format="0.00%" Tooltip="Margin Rate (%)" Width="90" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0.00\%}" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="m_bdg" Header="vs. Budget" Align="Right" 
    				Format="0,000" Tooltip="Gross Margin vs. Budget" />
    			<ext:NumberColumn DataIndex="ls" Header="Lost OOS Sales" Align="Right"
    				Format="$0,000" Tooltip="Lost OOS Sales ($ in Thousands)" Width="90" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:C0}" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-dgt" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="prt_ls" Header="OOS Sales (%)" Align="Right"
    				Format="0.00%" Tooltip="OOS Sales (%)" Width="90" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0.00\%}" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="prt_oos" Header="OOS Promo (%)" Align="Right"
    				Format="0.00%" Tooltip="OOS Promo (%)" Width="90" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0.00\%}" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="dc_trn" Header="Avg DC Turns" Align="Right"
    				Format="0,000" Tooltip="Average DC Turns" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0,0}" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="s_trn" Header="Est Avg Store Turns" Align="Right"
    				Format="0,000" Width="120" Tooltip="Estimated Average Store Turns" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalFormat" Mode="Value" Value="{0:0,0}" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-dgt" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="GMROII" Header="GMROII" Align="Right"
    				Tooltip="GMROII (%)" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalText" Mode="Value" Value="Future" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-inct" />
    					<ext:ConfigItem Name="IsInactive" Value="true" />
    					<ext:ConfigItem Name="InactiveCellText" Mode="Value" Value="Future" />
    					<ext:ConfigItem Name="InactiveCellCls" Mode="Value" Value="x-grid3-cell-inct" />
    					<ext:ConfigItem Name="ExportProhibited" Mode="Value" Value="true" />
    				</CustomConfig>
    			</ext:NumberColumn>
    			<ext:NumberColumn DataIndex="s_scr" Header="SC Sync Score"
    				Align="Right" Tooltip="Supply Chain Sync Score" >
    				<CustomConfig>
    					<ext:ConfigItem Name="TotalText" Mode="Value" Value="Future" />
    					<ext:ConfigItem Name="TotalCls" Mode="Value" Value="x-tcell-inct" />
    					<ext:ConfigItem Name="IsInactive" Value="true" />
    					<ext:ConfigItem Name="InactiveCellText" Mode="Value" Value="Future" />
    					<ext:ConfigItem Name="InactiveCellCls" Mode="Value" Value="x-grid3-cell-inct" />
    					<ext:ConfigItem Name="ExportProhibited" Mode="Value" Value="true" />
    				</CustomConfig>
    			</ext:NumberColumn>
    		</Columns>
    	</ColumnModel>
    	<SelectionModel>
    		<ext:RowSelectionModel ClientIDMode="Predictable" runat="server" />
    	</SelectionModel>
    	<View>
    		<ext:GridView ForceFit="true" AutoFill="true" ClientIDMode="Predictable" >
    			<HeaderGroupRows>
    				<ext:HeaderGroupRow>
    					<Columns>
    						<ext:HeaderGroupColumn ColSpan="1" Header="" />
    						<ext:HeaderGroupColumn Align="Center" ColSpan="4" Header="Sales ($ in Thousands)" />
    						<ext:HeaderGroupColumn Align="Center" ColSpan="2" Header="Unit Sales" />
    						<ext:HeaderGroupColumn Align="Center" ColSpan="3" Header="Gross Margin ($ in Thousands)" />
    						<ext:HeaderGroupColumn Align="Center" ColSpan="3" Header="Out of Stocks (OOS) ($ in Thousands)" />
    						<ext:HeaderGroupColumn Align="Center" ColSpan="4" Header="Inventory" />
    					</Columns>
    				</ext:HeaderGroupRow>
    			</HeaderGroupRows>
    		</ext:GridView>
    	</View>
    </ext:GridPanel>
    Fragment of JSON generated for one of my grid
    Ext.net.GridPanel({
      store:this.grdDvnByCmt_ctl03=new Ext.ux.data.PagingStore({
        proxyId:"grdDvnByCmt_ctl03",
        autoLoad:true,
        reader:new Ext.data.JsonReader({ 
          fields:[
            {allowBlank:false,name:"division"},
            {allowBlank:false,name:"g_mrg"},
            {allowBlank:false,name:"ls"},
            {allowBlank:false,name:"sls"},
            {allowBlank:false,name:"sls_qty"},
            {allowBlank:false,name:"prt_ls"},
            {allowBlank:false,name:"prt_sp"},
            {allowBlank:false,name:"prt_gm"},
            {allowBlank:false,name:"prt_oos"},
            {allowBlank:false,name:"s_trn"},
            {allowBlank:false,name:"dc_trn"},
            {allowBlank:false,name:"m_bdg"},
            {allowBlank:false,name:"s_bdg"},
            {allowBlank:false,name:"cp_amt"},
            {allowBlank:false,name:"cp_unt"},
            {allowBlank:false,name:"GMROII"},
            {allowBlank:false,name:"s_scr"}
    	  ]
        }),
        directEventConfig:{},
        proxy:new Ext.data.PagingMemoryProxy([
    		{
    		  "RowVersion":"Current",
    		  "Row":{
    			"RowError":"",
    			"RowState":"Added",
    			"Table":[
    			  {"division":"011 - Atlanta","g_mrg":5974.18,"ls":1072.39,"sls":27719.75,"sls_qty":10658.00,"prt_ls":3.72,"prt_sp":45.17,"prt_gm":21.55,"prt_oos":28.17,"s_trn":11.50,"dc_trn":28.03,"m_bdg":124.99,"s_bdg":114.43,"cp_amt":105.60,"cp_unt":103.08,"GMROII":null,"s_scr":null},
    			  /* here all other my tabe rows */
    			  {"division":"708 - Food 4 Less - Midwest","g_mrg":400.13,"ls":119.06,"sls":2469.40,"sls_qty":1122.00,"prt_ls":4.60,"prt_sp":44.22,"prt_gm":16.20,"prt_oos":25.04,"s_trn":17.78,"dc_trn":28.03,"m_bdg":108.75,"s_bdg":113.18,"cp_amt":102.47,"cp_unt":108.06,"GMROII":null,"s_scr":null}
    			],
    			// this is my FIRST grid row
    			"ItemArray":[
    			  "011 - Atlanta",5974.18,1072.39,27719.75,10658.00,3.72,45.17,21.55,28.17,11.50,28.03,124.99,114.43,105.60,103.08,null,null
    			],"HasErrors":false},
    		  "IsNew":false,
    		  "IsEdit":false
    		},
    		{
    		  "RowVersion":"Current",
    		  "Row":{
    			"RowError":"",
    			"RowState":"Added",
    			"Table":[
    			  {"division":"011 - Atlanta","g_mrg":5974.18,"ls":1072.39,"sls":27719.75,"sls_qty":10658.00,"prt_ls":3.72,"prt_sp":45.17,"prt_gm":21.55,"prt_oos":28.17,"s_trn":11.50,"dc_trn":28.03,"m_bdg":124.99,"s_bdg":114.43,"cp_amt":105.60,"cp_unt":103.08,"GMROII":null,"s_scr":null},
    			  
    			  /* here all other my tabe rows, SAME COPY AS ABOVE */
    			  
    			  {"division":"708 - Food 4 Less - Midwest","g_mrg":400.13,"ls":119.06,"sls":2469.40,"sls_qty":1122.00,"prt_ls":4.60,"prt_sp":44.22,"prt_gm":16.20,"prt_oos":25.04,"s_trn":17.78,"dc_trn":28.03,"m_bdg":108.75,"s_bdg":113.18,"cp_amt":102.47,"cp_unt":108.06,"GMROII":null,"s_scr":null}
    			],
    			// this is my SECOND grid row
    			"ItemArray":[
    			  "014 - Cincinnati",4387.41,707.16,20546.45,7840.88,3.33,42.79,21.35,27.28,12.42,28.03,118.76,113.92,105.50,98.71,null,null
    			],"HasErrors":false},
    		  "IsNew":false,
    		  "IsEdit":false
    		},
    		// ...
    		// and next other rows for my grid
    	])
      })
    })
    Here is not clear why and by who generated table json for each row and how this "feature" can be disabled.

    I would appreciate any help.

    Thanks.
  2. #2
    You use SerializationMode="Complex"
    It means that all properties of data will be serialized

    Remove that property
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Quote Originally Posted by Vladimir View Post
    You use SerializationMode="Complex"
    It means that all properties of data will be serialized
    Remove that property
    But I needed Complex there. The question is what sense to generate same copy of a table for each row in that table?
    If my grid have 50 rows then 50 same copy tables will be generated and added to each row, as result size of JSON is unreasonably large.
    Can this behaviour be rewrited or turned off ?
    Last edited by sedgar; Oct 07, 2011 at 8:54 AM.
  4. #4
    But I needed Complex there.
    The question is what sense to generate same copy of a table for each row in that table?
    The data is serialized as is. We don't add anynothing from us. It means that reference to 'Table' exists in each your data item
    You can mark Table property as [Newtonsoft.Json.JsonIgnore] attribute
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    Thanks you a lot, now it clear :)

Similar Threads

  1. GridPanel Sql Paging For large Datasets
    By ismailkocacan in forum Examples and Extras
    Replies: 17
    Last Post: Aug 09, 2015, 10:47 AM
  2. Load large Data in GridPanel
    By huzzy143 in forum 1.x Help
    Replies: 1
    Last Post: Feb 08, 2012, 4:54 AM
  3. [CLOSED] Large amount of text in GridPanel
    By mattwoberts in forum 1.x Premium Help
    Replies: 4
    Last Post: Jan 24, 2012, 6:48 AM
  4. [CLOSED] GridPanel Loading with Large Data Set
    By bethc in forum 1.x Premium Help
    Replies: 3
    Last Post: Oct 28, 2009, 2:20 PM
  5. Replies: 6
    Last Post: Sep 01, 2009, 1:06 PM

Tags for this Thread

Posting Permissions