What's New?

[CLOSED] toggle / untoggle all commandcolumns in a grid

  1. #1
    Jun 14, 2013, 9:07 AM

    [CLOSED] toggle / untoggle all commandcolumns in a grid

    Sorry i have posted this thread in 2.x Help, please delete it: http://forums.ext.net/showthread.php...umns-in-a-grid


    Hi, I have a code example with a grid that contains a commandcolumn (togglebutton)
    I have a topbar with a button that should toogle / untoggle all these commandcolumns, of course with firing their command handler.
    Is there any way to do that? If not by toggle buttons, how could I do that with a checkbox-column?

    
<%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    Protected Sub Page_Load(sender As Object, e As EventArgs)
        If Not ExtNet.IsAjaxRequest Then
            Me.Store1.DataSource = Me.Data
            Me.Store1.DataBind()
        End If
    End Sub

    Private ReadOnly Property Data() As Object()
        Get
            Return New Object() {New Object() {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"}, New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"}, New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"}, New Object() {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"}, New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"}, New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"}, _
                New Object() {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"}, New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"}, New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"}, New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"}, New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"}, New Object() {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"}, _
                New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"}, New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"}, New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"}, New Object() {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"}, New Object() {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"}, New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"}, _
                New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"}, New Object() {"McDonald""s Corporation", 36.76, 0.86, 2.4, "9/1 12:00am"}, New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"}, New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"}, New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"}, New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"}, _
                New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"}, New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"}, New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"}, New Object() {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"}, New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}}
        End Get
    End Property
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />


    <ext:GridPanel
        ID="GridPanel1"
        runat="server"
        Title="Array Grid"
        Width="600"
        Height="350">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Toggle/Untoogle all">
                        <Listeners>
                            <Click Handler="" /> <%-- Please toogle or untoggle them all--%>
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="company" />
                            <ext:ModelField Name="price" Type="Float" />
                            <ext:ModelField Name="change" Type="Float" />
                            <ext:ModelField Name="pctChange" Type="Float" />
                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                <ext:CommandColumn ID="CommandColumn9" runat="server" Width="30">
                    <Commands>
                        <ext:GridCommand Icon="World" CommandName="TestCommand" StandOut="false">
                            <ToolTip Text="Toogle me" />
                            <CustomConfig>
                                <ext:ConfigItem Name="enableToggle" Value="true" />
                                <ext:ConfigItem Name="pressed" Value="false" />
                            </CustomConfig>
                        </ext:GridCommand>
                    </Commands>
                    <Listeners>
                        <Command Handler="console.log(record.data.company);" />
                    </Listeners>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
</body>
</html>
    Last edited by Daniil; Jun 17, 2013 at 7:43 AM. Reason: [CLOSED]
  2. #2
    Jun 14, 2013, 1:28 PM
    Hi @blueworld,

    It can be achieved running this script:
    var i,
    toolbars = App.CommandColumn9.cache,
    tb;

for (i = 0; i < toolbars.length; i++) {
    tb = toolbars[i];    
    tb.items.get(0).toggle();    
    tb.column.fireEvent("command", tb.column, tb.command, tb.record, tb.rowIndex);
}
    But please note that the command toggle status won't persist after refreshing of the GridPanel (for example, sorting causes refreshing).

    Also the above script is quite expensive in the performance aspect. It might be better to iterate all the Store's records and run the required actions for them without toggling the commands and using the fireEvent method.
  3. #3
    Jun 14, 2013, 2:40 PM
    Hi Daniil,
    thank you very much this helped me a lot! Performance is good enough.
    What was happening here was just a flip of the current toggles, so I have extended the script a bit with a global bool variable that determines if all rows have to be pressed or unpressed

    
        function toggleTasks(){

            var i,
    toolbars = App.TaskTasksCommand.cache,
    tb;
 
            for (i = 0; i < toolbars.length; i++) {
                tb = toolbars[i];    
                if(tasksPressed == true){
                    if(tb.items.get(0).pressed == true){
                        tb.items.get(0).toggle();    
                        tb.column.fireEvent("command", tb.column, tb.command, tb.record, tb.rowIndex);
                    }

                }else if(tasksPressed == false){
                    if(tb.items.get(0).pressed == false){
                        tb.items.get(0).toggle();    
                        tb.column.fireEvent("command", tb.column, tb.command, tb.record, tb.rowIndex);
                    }
                }

            }
            tasksPressed = !tasksPressed;
            

        }
    Last edited by blueworld; Jun 14, 2013 at 2:42 PM.
  4. #4
    Jun 14, 2013, 11:19 PM
    Hello!

    Can we close this thread?
  5. #5
    Jun 17, 2013, 7:32 AM
    yes this one can be closed

Similar Threads

  1. [CLOSED] Hot to fire a a grid command on client-side including toggle
    By blueworld in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 17, 2012, 1:53 PM
  2. How to toggle a group in groupingview grid from code behind?
    By feanor91 in forum 1.x Help
    Replies: 14
    Last Post: Jan 30, 2012, 4:21 PM
  3. Toggle GridPanel Paging On/Off
    By kumbahara in forum 1.x Help
    Replies: 0
    Last Post: Nov 17, 2010, 8:42 PM
  4. [CLOSED] Multiple commandcolumns in gridpanel
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 15, 2010, 11:34 AM

Posting Permissions