[CLOSED] update a single column in a GridPanel

[bluenext]

Hello at all!

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



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>

[Dimitris]

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.

[bluenext]

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!!!

[Dimitris]

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.

[bluenext]

Work!!!

Thank you very much @Dimitris!!!