Auto Update GridPanel by TaskManager

  1. #1

    Auto Update GridPanel by TaskManager

    If you need a page that monitor your devices, such as devices status, update time....
    data should be updated in every second,Attachment 5101

    maybe this example could be one of your solutions to this problem.
    It's a really simple example that you just need two main steps to achieve.
    GOOD LUCK!

    1. First, build a GridPanel and its datasource.
    <ext:GridPanel ID="gdp_MonitorReport" runat="server" StoreID="sto_Monitor"
                        Icon="Error"
                        Cls="x-grid-custom"
                        AutoHeight="true"
                        Collapsible="true">
                <ColumnModel>
                <Columns>
                <ext:Column DataIndex="monitor_id" Header="monitor_id"/>
                <ext:Column DataIndex="monitor_status" Header="monitor_status"/>
                <ext:DateColumn DataIndex="monitor_update_time" Header="monitor_update_time" Format="yyyy/MM/dd HH:mm:ss" Width="150"/>   
                </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" EnableRowBody="true">
                    </ext:GridView>
    	        </View>
                <Plugins>
                    <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
                        <Filters>
                        <ext:DateFilter DataIndex="OCCUR_TIME" />
                        </Filters>
                    </ext:GridFilters>
                </Plugins>
                <BottomBar>
                <ext:PagingToolbar ID="PagingToolbarSysLog" runat="server" PageSize="20"/>
    	        </BottomBar>
                </ext:GridPanel>
    <ext:Store ID="sto_Monitor" runat="server">
    <Reader>
        <ext:JsonReader IDProperty="monitor_id">
        <Fields>
        <ext:RecordField Name="ID"/>
            <ext:RecordField Name="monitor_id" Type="String"/>
            <ext:RecordField Name="monitor_status" Type="String"/>
            <ext:RecordField Name="monitor_update_time" Type="Date"/>
            </Fields>
        </ext:JsonReader>
    </Reader>
    </ext:Store>
    ************************************************** *******************
    2. you need a timer to refresh data resource (Interval unit is ms: so ...5000 means 5 seconds),
    after that, rebind your data resource to your GridPanel.
    Update OnEvent="RefreshProgress" , like a trigger calling your predefined function when time's up
    <ext:TaskManager ID="TaskManager1" runat="server">  
           <Tasks>  
               <ext:Task   
                   TaskID="Task1"  
                   Interval="5000"   
                   AutoRun="true">  
                   <DirectEvents>  
                       <Update OnEvent="RefreshProgress" />  
                  </DirectEvents>                      
               </ext:Task>  
           </Tasks>
    </ext:TaskManager>
    You have to reload the GridPanel by YourGridPanelId.Reload()
    //code behind
    protected void RefreshProgress(object sender, DirectEventArgs e)
    {
            gdp_ChrgrDailyReport.Reload();
    }
    The GridPanel will be automatically updated every Time Interval once.
    That's ALL!!
  2. #2
    Hi @mibhpwosiay,

    Thank you for sharing! Looks good.

    You can even avoid one round trip to a server replacing
    <DirectEvents>      <Update OnEvent="RefreshProgress" />  
    
    </DirectEvents>
    with
    <Listeners>      <Update Handler="sto_Monitor.reload();" />  
    
    </Listeners>

Similar Threads

  1. Replies: 0
    Last Post: May 09, 2012, 8:27 AM
  2. Auto update grid panel every x seconds.
    By Kamyar in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2011, 6:31 AM
  3. [CLOSED] Task Update DirectEvent in TaskManager
    By pil0t in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 21, 2010, 8:30 PM
  4. Replies: 0
    Last Post: Sep 01, 2009, 2:52 PM
  5. [CLOSED] TaskManager Update not firing AJAX function anymore...
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 12, 2009, 12:16 PM

Posting Permissions