View Full Version : [CLOSED] Default loding mask not displaying while populating the Grid?

Jul 08, 2014, 5:47 AM

We have a grid and data get bind to the grid at page load.
Here is the sample piece of code that demonstrates the above mentioned loading mask issue.
Please go through the sample and do the needful!

.aspx file

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MovePosition.aspx.cs" Inherits="Samples_MovePosition" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<form id="form1" runat="server">
<ext:ResourceManager ID="ScriptManager1" runat="server" Namespace="App">
<ext:Store ID="store_containersize" runat="server" IgnoreExtraFields="true">
<ext:Model ID="Model2" runat="server" IDProperty="ContainerSizeNo">
<ext:ModelField Name="ContainerSizeNo" />
<ext:ModelField Name="ContainerDesc" />
<ext:ModelField Name="ContainerMaxVolume" />
<ext:ModelField Name="DisplayMaxVolume" />
<ext:Viewport ID="vportSupplier" runat="server" Layout="FitLayout">
<ext:Container Layout="BorderLayout" ID="BorderLayout1" runat="server">
<ext:GridPanel runat="server" ID="gridAvailContainer" Border="false" EnableColumnHide="false"
EnableColumnMove="false" ForceFit="true" Region="Center">
<ext:Store runat="server" ID="storeAvailContainer">
<ext:Model ID="Model3" runat="server">
<ext:ModelField Name="ContainerNo" />
<ext:ModelField Name="ContainerSize" />
<ColumnModel runat="server" ID="cmAvailContainer">
<ext:Column runat="server" DataIndex="ContainerNo" Text="B-0286" ColumnID="ContainerNo" Sortable="true"
<ext:Column runat="server" DataIndex="ContainerSize" Text="B-0219" ColumnID="ContainerSize" Sortable="true"
<cb:Include ID="siteJsCtrl" runat="server" SetName="siteJs" />
<script type="text/javascript">

.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using Transformer.NET;

public partial class Samples_MovePosition : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
if (!X.IsAjaxRequest)

private void BindGrid()
var movepositionslist = new List<MovePositions>();

int count = 1;
var rn = new Random();
for (int i = 0; i < 100; i++)

var ranvalue = rn.Next(1, 101);
var movePositions = new MovePositions();
movePositions.ContainerSizeNo = ranvalue;
byte[] bm = System.Text.Encoding.Unicode.GetBytes(ranvalue.ToS tring());
movePositions.ContainerDesc = Convert.ToBase64String(bm);
movePositions.ContainerMaxVolume = Convert.ToInt32(ranvalue + 5);
movePositions.DisplayMaxVolume = Convert.ToInt32(ranvalue * 10);
count = count + 1;
Store st = store_containersize;
st.DataSource = movepositionslist;

count = 0;
List<Movecontiner> omoMovecontiners = new List<Movecontiner>();
for (int i = 0; i < 1000; i++)
var ranvalue = rn.Next(1, 101);
var movecontiner = new Movecontiner();
movecontiner.ContainerNo = ranvalue * 11;
movecontiner.ContainerSize = ranvalue;
count = count + 1;
foreach (Movecontiner items in omoMovecontiners)
var getresult = movepositionslist.Where(x => x.ContainerSizeNo == items.ContainerSize).ToList();

foreach (var item1 in getresult)
var resul = item1.ContainerDesc;

storeAvailContainer.DataSource = omoMovecontiners.OrderBy(x => x.AutoKey);

public class MovePositions
public int ContainerSizeNo { get; set; }
public string ContainerDesc { get; set; }
public int ContainerMaxVolume { get; set; }
public int DisplayMaxVolume { get; set; }


public class Movecontiner
public int ContainerNo { get; set; }
public int ContainerSize { get; set; }
public int StockLocationNo { get; set; }
public int Sub2 { get; set; }
public int AutoKey { get; set; }

Issue: The default grid loading mask is not displayed!!!!

Jul 08, 2014, 8:38 AM
Loading mask is used for async operations only (for example, during loading data via ajax request)
It doesn't have a sense for long client side operations because DOM tree cannot be updated while javascript execution, so you will not see any changes

If you want to reduce data binding time then use paging (client side paging or buffered renderer plugin)

Jul 08, 2014, 12:12 PM
Actually we have the editable grid (where data comes from database) in our application, User will edit the data and click on save button. During this time application needs to show loading/saving mask then only user will know data has been saved and refreshed in the grid. Right now there is no loading mask display while save click and specifically this loading mask is useful for the users those who use less internet speed connection

In the earlier EXT.NET 1.2 version we use the following code to display mask

gridPanel.LoadMask.ShowMask = true;
gridPanel.LoadMask.Msg = "Loading...";

gridPanel.SaveMask.ShowMask = true;
gridPanel.SaveMask.Msg = "Processing...";

So, please provide the solution in EXT.NET 2.1 for providing those mask

Jul 08, 2014, 4:44 PM
You can manually show a mask

Ext.net.Mask.show({ el: App.GridPanel1.view });
and hide

when needed.