[CLOSED] Default loding mask not displaying while populating the Grid?

  1. #1

    [CLOSED] Default loding mask not displaying while populating the Grid?


    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.ToString());
                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!!!!
    Last edited by Daniil; Jul 15, 2014 at 1:04 PM. Reason: [CLOSED]
  2. #2
    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)
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    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
  4. #4
    You can manually show a mask
    Ext.net.Mask.show({ el: App.GridPanel1.view });
    and hide
    when needed.

Similar Threads

  1. [CLOSED] Attached default grid view load mask to different el
    By CanopiusApplications in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 04, 2016, 5:39 PM
  2. [CLOSED] Load Mask Not displaying on Grid Panel data load
    By WHISHWORKS in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 17, 2013, 3:44 PM
  3. [CLOSED] Displaying mask on load on specific target in client side
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 19, 2012, 2:16 PM
  4. Replies: 2
    Last Post: Mar 13, 2012, 10:23 AM
  5. Populating a grid on formpanel navigation
    By Kamal in forum 1.x Help
    Replies: 0
    Last Post: Jan 10, 2010, 11:25 AM

Posting Permissions