[CLOSED] GridPanel Loadmask

[webpresence]

Hi,

I've a GridPanel whose data is populated in the following way from Codebehind:

GridPanelDocumentsList.Store[0].LoadData(items);

>> items is a list of custom obects

This data is loaded when SelectionChange Direct event is fired from a TreePanel.

I'm not able to show LoadMask for the gridpanel.

Please let me know how to get it working. I tried to set it on the markup for the gridpanel in different ways:
eg:

<Loader runat="server">
<LoadMask ShowMask="false"/>
<Listeners>
 <BeforeLoad Handler="App.GridPanelDocumentsList.getEl().mask('Loading...','x-mask-loading');" />
 <Load Handler="App.GridPanelDocumentsList.getEl().unmask();" />
</Listeners>
</Loader>

But this shows the load panel right from page load and never stops.

Thanks

[EnZo]

Hi webpresence,

The Loader listeners you are using are for when the GridPanel is loaded into the page.

I would suggest you use the GridPanel's Store's listeners.

<ext:Store runat="server">
    <Listeners>
        <BeforeLoad Handler="App.GridPanelDocumentsList.getEl().mask(' Loading...', 'x-mask-loading');" />
        <Load Handler="App.GridPanelDocumentsList.getEl().unmask();" />
    </Listeners>
</ext:Store>

[webpresence]

Thanks for the reply.

Even doing this is not working. I added a simple alert as below - they are not getting fired when data is loaded on to the GridPanel.
<BeforeLoad Handler="Ext.Msg.alert('TEST', 'My Message');" />
<Load Handler="Ext.Msg.alert('Done', 'Done It');" />

Below is partial markup for the GridPanel:

<ext:GridPanel AutoScroll="false" AllowDeselect="true" 
                            ID="GridPanelDocumentsList" 
                            runat="server" MarginSpec="0 0 0 0">
                            <View>
                                <ext:GridView runat="server" LoadMask="true" />
                            </View>
                             <Loader runat="server">
                                <LoadMask ShowMask="false"  />
                               <%-- <Listeners>
                                    <BeforeLoad Handler="App.GridPanelDocumentsList.getEl().mask('Loading...','x-mask-loading');" />
                                    <Load Handler="App.GridPanelDocumentsList.getEl().unmask();" />
                                </Listeners>--%>
                            </Loader>
                            <Store>
                                <ext:Store runat="server" ID="documentsListStore" PageSize="20">
                                    <Listeners>
                                        <BeforeLoad Handler="Ext.Msg.alert('TEST', 'My Message');" />
                                        <Load Handler="Ext.Msg.alert('Done', 'Done It');" />
                                    </Listeners>
                                    <Sorters>
                                        <ext:DataSorter Direction="ASC" Property="FileName"></ext:DataSorter>
                                    </Sorters>
                                    <Model>
                                        <ext:Model runat="server" IDProperty="FullFileName">
                                            <Fields>
                                                <%--<ext:ModelField Name="FileIcon">
                                                                                         </ext:ModelField>--%>
                                                <ext:ModelField Name="FileName" SortType="AsUCText" SortDir="ASC" />
                                                <ext:ModelField Name="FileSize" />
                                                <ext:ModelField Name="FileType" />
                                                <ext:ModelField Name="LastAccessTime" Type="Date" />
                                                <ext:ModelField Name="LastModifiedTime" Type="Date" />

                                                <ext:ModelField Name="FullFileName" />
                                                <ext:ModelField Name="ViewAsset" AllowNull="true" />
                                            </Fields>

                                        </ext:Model>

                                    </Model>
                                </ext:Store>
                            </Store>

Thanks

[matrixwebtech]

Please read the forums guideline:
http://forums.ext.net/showthread.php?10205

[webpresence]

Hi,

I put part of my GridPanel markup in my previous reply just for people to have a quick look and to let me know if there is any thing wrong with that - sorry, its not a runnable sample.

Do you have any other suggestions to get the loadmask working for the GridPanel.

Any help on this would be much appreciated.

Thanks

[EnZo]

Hi webpresence,

As matrixwebtech indicated, please do wrap your code in [CODE] tags!

Please view the below code sample:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <script>

        var beforeLoad = function (store) {
            App.GridPanelDocumentsList.getEl().mask('Loading...', 'x-mask-loading');
            alert('masked');
        }

        var afterLoad = function (store) {
            new Ext.util.DelayedTask().delay(1000, function () { App.GridPanelDocumentsList.getEl().unmask(); })
        }
    </script>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> objectList = new List<object>();
            objectList.Add(new { FileName = "File1", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File2", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File3", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File4", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File5", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File6", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File7", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File7", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File8", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File9", FileSize = "500 MB" });
            objectList.Add(new { FileName = "File10", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File11", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File12", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File13", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File14", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File14", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File15", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File16", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File17", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File18", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File19", FileSize = "250 MB" });
            objectList.Add(new { FileName = "File20", FileSize = "250 MB" });

            GridPanelDocumentsList.GetStore().DataSource = objectList;
            GridPanelDocumentsList.GetStore().DataBind();
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel AutoScroll="false" AllowDeselect="true"
            ID="GridPanelDocumentsList"
            runat="server" MarginSpec="0 0 0 0">
            <Store>
                <ext:Store runat="server" ID="documentsListStore" PageSize="20">
                    <Listeners>
                        <BeforeLoad Fn="beforeLoad" />
                        <Load Fn="afterLoad" Delay="2" />
                    </Listeners>
                    <Sorters>
                        <ext:DataSorter Direction="ASC" Property="FileName"></ext:DataSorter>
                    </Sorters>
                    <Model>
                        <ext:Model runat="server" IDProperty="FullFileName">
                            <Fields>
                                <ext:ModelField Name="FileName" Type="String" />
                                <ext:ModelField Name="FileSize" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" DataIndex="FileName" Text="Name" />
                    <ext:Column runat="server" DataIndex="FileSize" Text="Size" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>

This sample is working, with the mask being shown and then unmasked. However, there is a setback. Since the store is being loaded too quickly, the mask is barely visible. Even setting up Delay="2" on the Store's Load event did not work.

Therefore, I added a manual delay using Ext.util.DelayedTask, set to 1000 milliseconds (1 second). You can increase or decrease to your liking.

[webpresence]

Thanks EnZo - I made changes to my code based on your sample and it worked.

I think the problem was with the method I was using to load data:

GridPanelDocumentsList.Store[0].LoadData(items);

I changed this to use:

GridPanelDocumentsList.GetStore().DataSource = items;
GridPanelDocumentsList.GetStore().DataBind();

and its working now.

Thanks once again - please close this ticket.

[Daniil]

Hello @webpresence,

It is nice to see that the Ext.NET community helped you.

Could you, please, spend a few minutes to read our forum guidelines? We would appreciate. There is also a couple of words that encourages forum members to use [CODE] tags. Thank you!
Forum Guidelines For Posting New Topics