[CLOSED] update a single column in a GridPanel

  1. #1

    [CLOSED] update a single column in a GridPanel

    Hello at all!

    In my code i have a gridPanel and I would only update the rows of a column (look at the pictures).

    Click image for larger version. 

Name:	rowupdate.png 
Views:	7 
Size:	19.3 KB 
ID:	24059

    I would like to do this through the task manager.

    <ext:TaskManager ID="TaskManager1" runat="server">
        <Tasks>
            <ext:Task
                TaskID="Task1"
                Interval="5000"
                AutoRun="true">
                <Listeners>
                    <Update Handler="App.BNModelloWorker_Store2.reload();" />
                </Listeners>
            </ext:Task>
        </Tasks>
    </ext:TaskManager>
    right now with instructions
    <Update Handler="App.BNModelloWorker_Store2.reload();" />
    I update the store and then all columns.
    instead I want to update only the rows of "Column171". I enclose below code gridpanel. can you help me?

            <ext:GridPanel
                ID="GridPanel2"
                runat="server">
                <Store>
                    <ext:Store ID="Store2" runat="server" AutoLoad="false" OnReadData="Store2_Refresh" PageSize="20">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="WorkerId" />
                                    <ext:ModelField Name="ComputerName" />
                                    <ext:ModelField Name="Queue" />
                                    <ext:ModelField Name="State" Type="Boolean" />
                                    <ext:ModelField Name="StateText" />
                                <%--<ext:ModelField Name="Comando" Type="Boolean" />
                                    <ext:ModelField Name="PrecState" Type="Boolean" />--%>
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Reader>
                            <ext:JsonReader IDProperty="WorkerID" />
                        </Reader>
                        <Parameters>
                            <ext:StoreParameter
                                Name="WorkerIDGroups"
                                Value="#{GridPanel1}.getSelectionModel().hasSelection() ? #{GridPanel1}.getSelectionModel().getSelection()[0].data.WorkerGroupId : -1"
                                Mode="Raw" />
                        </Parameters>
                        <Listeners>
                            <Exception Handler="Ext.Msg.alert('Load failed', operation.getError());" />
                        </Listeners>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel2" runat="server">
                    <Columns>
                        <ext:Column ID="Column11" runat="server" DataIndex="WorkerId" Text="Worker ID" Flex="3" />
                        <ext:Column ID="Column12" runat="server" DataIndex="ComputerName" Text="Computer Name" Flex="3" />
                        <ext:Column ID="Column13" runat="server" DataIndex="Queue" Text="Queue" Flex="2" />                                     
                        <ext:ImageCommandColumn ID="Column171" runat="server" DataIndex="StateText" Text="Worker state" Flex="1">
                            <Renderer Fn="myRendererStateWork" />                        
                        </ext:ImageCommandColumn>
                        <ext:Column ID="Column4" runat="server" Align="Center" DataIndex="State" Text="Stato" Flex="1" Hidden="true" />
                        <ext:Column ID="Column5" runat="server" DataIndex="Comando"  Hidden="true" />
                        <ext:Column ID="Column6" runat="server" DataIndex="PrecState"  Hidden="true" />
                        <ext:CommandColumn ID="CommandColumn3" Disabled="false" runat="server" Width="35" Draggable="false" Hideable="false" Resizable="false" Fixed="true" Locked="true" ButtonAlign="Center">
                            <Commands>
                                <ext:GridCommand CommandName="Stop" Icon="StopRed">
                                    <ToolTip Text="Stop Worker" />
                                </ext:GridCommand>
                            </Commands>
                            <PrepareToolbar Fn ="DisableButton" />
                            <Listeners>
                                <%--<Command Fn="stopSingleWorker" />--%>
                                <Command Handler="startStopSingleWorker('stopWorker',record.data);" />
                            </Listeners>
                        </ext:CommandColumn>
                        <ext:CommandColumn ID="CommandColumn4" Disabled="false" runat="server" Width="35" Draggable="false" Hideable="false" Resizable="false" Fixed="true" Locked="true" ButtonAlign="center">
                            <Commands>
                                <ext:GridCommand CommandName="Start" Icon="PlayGreen" Disabled="false">                               
                                    <ToolTip Text="Start Worker" />
                                </ext:GridCommand>
                            </Commands>
                            <PrepareToolbar Fn ="DisableButton" />
                            <Listeners>
                                <Command Handler="startStopSingleWorker('startWorker',record.data);" />
                            </Listeners>
                        </ext:CommandColumn>
                        <%--<ext:CheckColumn ID="CheckColumn1" runat="server" Text="Seleziona" Flex="1" Editable="true" DataIndex="???" />--%>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <%--<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" Mode="Single" />--%>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Simple" Width="50" />
                </SelectionModel>
                <BottomBar>                
                    <ext:PagingToolbar ID="PagingToolbar2" runat="server" HideRefresh="true">
                        <Items>
                            <ext:Button ID="totalStop" runat="server" Icon="StopRed" IconAlign="Bottom" ToolTip="Stop Workers" Handler="startStopMultiWorker('stopWorker');"></ext:Button>
                            <ext:Button ID="totalStart" runat="server" Icon="PlayGreen" IconAlign="Bottom" ToolTip="Start Workers" Handler="startStopMultiWorker('startWorker');"></ext:Button>
                            <ext:Button ID="Button1" runat="server" Icon="ArrowRefresh" IconAlign="Bottom" ToolTip="Refresh Workers" Handler="App.BNModelloWorker_Store2.reload();"></ext:Button>
                        </Items>
                    </ext:PagingToolbar>
                </BottomBar>
            </ext:GridPanel>
    Last edited by Dimitris; Jul 08, 2015 at 2:52 PM. Reason: [CLOSED]
  2. #2
    Hello,

    If you update the value of the store model field (StateText, in your case) the grid will be automatically updated accordingly. The following example demonstrates:

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <script runat="server">
        public object[] Data
        {
            get
            {
                return new object[] {
                   new object[] { 1, "Computer 1", "Working" },
                   new object[] { 2, "Computer 2", "Stopped" },
                   new object[] { 3, "Computer 3", "Working" }
                };
            }    
        }
        
        public void Store2_Refresh(object sender, StoreReadDataEventArgs e)
        {
            Store2.DataSource = Data;
            Store2.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
        <script>
            var update = function () {
                var store = App.GridPanel2.getStore();
    
                store.each(function (record, index) {
                    record.set('StateText', (record.get('StateText') == 'Working') ? "Stopped" : "Working");
                });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager 
            runat="server" />
        
        <ext:GridPanel
            ID="GridPanel2"
            runat="server">
            <Store>
                <ext:Store ID="Store2" runat="server" AutoLoad="true" OnReadData="Store2_Refresh">
                    <Model>
                        <ext:Model ID="Model2" runat="server">
                            <Fields>
                                <ext:ModelField Name="WorkerId" />
                                <ext:ModelField Name="ComputerName" />
                                <ext:ModelField Name="StateText" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel2" runat="server">
                <Columns>
                    <ext:Column ID="Column11" runat="server" DataIndex="WorkerId" Text="Worker ID" Flex="3" />
                    <ext:Column ID="Column12" runat="server" DataIndex="ComputerName" Text="Computer Name" Flex="3" />
                    <ext:Column ID="Column171" runat="server" DataIndex="StateText" Text="Worker state" Flex="1"/>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Simple" Width="50" />
            </SelectionModel>
        </ext:GridPanel>
    
        <ext:TaskManager ID="TaskManager1" runat="server">
            <Tasks>
                <ext:Task
                    TaskID="Task1"
                    Interval="5000"
                    AutoRun="true">
                    <Listeners>
                        <Update Fn="update" />
                    </Listeners>
                </ext:Task>
            </Tasks>
        </ext:TaskManager>
    </body>
    </html>
    Hope it helps.
  3. #3
    Many thanks @Dimitris!!! i have a question:

    I have replaced your update method with this:

    var update = function () {
        var store = App.BNModelloWorker_GridPanel2.getStore();
    
        store.each(function (record, index)
        {
             //YOUR CODE
            //record.set('StateText', (record.get('StateText') == 'Working') ? "Stopped" : "Working");
            var stateWork = record.get('StateText');
            if (stateWork == 'stop') {
                return String.format(tpl, "Icone/cerchioRosso.png");
            }
            else if (stateWork == 'start') {
                return String.format(tpl, "Icone/cerchioVerde.png");
            }
            else {
                return String.format(tpl, "Icone/cerchioGiallo.png");
            }
        });
    };
    but don't work!!! can you tell me why?
    Many thanks!!!
    Last edited by bluenext; Jul 06, 2015 at 2:04 PM.
  4. #4
    Hi,

    You need to update the value of the record field (using record.set()) instead of returning a value from inside the iteration.

    var update = function () {
        var store = App.BNModelloWorker_GridPanel2.getStore();
    
        store.each(function (record, index)
        {
            var stateWork = record.get('StateText');
            if (stateWork == 'stop') {
                record.set('StateText', String.format(tpl, "Icone/cerchioRosso.png"));
            }
            else if (stateWork == 'start') {
                record.set('StateText', String.format(tpl, "Icone/cerchioVerde.png"));
            }
            else {
                record.set('StateText', String.format(tpl, "Icone/cerchioGiallo.png"));
            }
        });
    };
    Hope it helps.
  5. #5
    Work!!!

    Thank you very much @Dimitris!!!

Similar Threads

  1. [CLOSED] GridPanel - Multiple controls in a single column
    By RajivDutt in forum 2.x Premium Help
    Replies: 1
    Last Post: Jun 25, 2014, 4:06 PM
  2. Replies: 0
    Last Post: May 21, 2012, 6:16 AM
  3. Replies: 6
    Last Post: Jan 28, 2012, 2:14 AM
  4. Replies: 2
    Last Post: Oct 12, 2010, 2:16 PM
  5. [CLOSED] Gridpanel single header for two column or more
    By speedstepmem2 in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 16, 2009, 8:22 AM

Posting Permissions