Groupcommand ExtraParams

Page 1 of 2 12 LastLast
  1. #1

    Groupcommand ExtraParams - Multi Row Selection

    I have been trying to use a DirectEvent on the GroupCommand of a GridView. I can not seem to get the group records to pass where i need them, or even the group name. I have searched around and only found a mention of using the extra parameter of "records[0].data.whatever", which was confirmed by Daniil in this post http://stackoverflow.com/questions/1...am-record-data. This however does not work. I still get the error message that "records is undefined". Can anyone shed some light on what I am doing wrong?

    <ext:GridPanel HideHeaders="True" Scroll="Vertical" AutoScroll="true"
                                    ID="gpMonitors"
                                    runat="server"
                                    Region="Center"
                                    MinHeight="200">
                                    <Store>
                                        <ext:Store ID="storeMonitors" runat="server" GroupField="CATEGORY">
                                            <Model>
                                                <ext:Model runat="server" IDProperty="MONITORID">
                                                    <Fields>
                                                        <ext:ModelField Name="MONITORID" />
                                                        <ext:ModelField Name="DESCRIPTION" />
                                                        <ext:ModelField Name="CATEGORY" />
                                                        <ext:ModelField Name="SELECTED" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel runat="server">
                                        <Columns>
                                            <ext:Column runat="server" Hidden="true" DataIndex="MONITORID" Text="MONITORID" Flex="1" />
                                            <ext:Column runat="server" DataIndex="DESCRIPTION" Text="DESCRIPTION" Flex="1" />
                                            <ext:CheckColumn runat="server" Hidden="true" DataIndex="SELECTED" Text="SELECTED"></ext:CheckColumn>
                                            <ext:CommandColumn ID="CommandColumn1" runat="server" Hidden="true">
                                                <GroupCommands>
                                                    <ext:GridCommand Icon="TableRow" CommandName="SelectMonitorGroup">
                                                        <ToolTip Title="Select" Text="Select all rows of the group" />
                                                    </ext:GridCommand>
                                                </GroupCommands>
                                                <DirectEvents>
                                                    <GroupCommand OnEvent="GroupSelected">
                                                        <ExtraParams>
                                                            <ext:Parameter Value="records[0].data.category" Mode="Raw" Name="recordvalue">
                                                            </ext:Parameter>
                                                        </ExtraParams>
                                                    </GroupCommand>
                                                </DirectEvents>
                                            </ext:CommandColumn>
                                        </Columns>
                                    </ColumnModel>
                                    <SelectionModel>
                                        <ext:CheckboxSelectionModel ShowHeaderCheckbox="false" runat="server" Mode="Multi"></ext:CheckboxSelectionModel>
                                    </SelectionModel>
                                    <Features>
                                        <ext:Grouping ID="grpMonitor" StartCollapsed="true" runat="server"
                                            GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'>
                                        </ext:Grouping>
                                    </Features>
                                </ext:GridPanel>
    Last edited by pmaidlow; Aug 06, 2015 at 2:38 PM. Reason: clearer title for searching
  2. #2
    Hi @pmaidlow,

    Please review the arguments of a CommandColumn's GroupCommand event.
    https://examples2.ext.net/#/Events/Listeners/Arguments

    There is no records arguments, so it fails.
  3. #3
    So there really is no way to use GroupCommand as a DirectEvent? I am trying to select all the records within a group and used the below code. The problem is some groups have well over 400 records and when trying to select all in the group, it takes almost a minute and any movement in IE will give the "script is not responding" error. I have also tried applying a LoadMask so the user knows to wait but the mask is shown only after the selection of the group is completed which defeats the purpose.

      var onGroupCommand = function (column, command, group) {
                    if (command === 'SelectMonitor') {
                        var isSelected = #{gpMonitors}.getSelectionModel().isSelected(group.children[0]);}
                  
                    if (!isSelected) {
                        column.grid.getSelectionModel().select(group.children, true);
                    } else {
                        column.grid.getSelectionModel().deselect(group.children, true);
                    };
                };
    
    <ext:CommandColumn ID="CommandColumn3" runat="server" Hidden="true">
                                                <GroupCommands>
                                                    <ext:GridCommand Icon="TableRow" CommandName="SelectMonitor">
                                                        <ToolTip Title="Select" Text="Select all rows of the group" />
                                                    </ext:GridCommand>
                                                </GroupCommands>
                                                <Listeners>
                                                    <GroupCommand Fn="onGroupCommand" />
                                                </Listeners>
                                            </ext:CommandColumn>
  4. #4
    So there really is no way to use GroupCommand as a DirectEvent?
    There is a way. Sorry, I am not sure why you assume that.

    The problem is some groups have well over 400 records and when trying to select all in the group, it takes almost a minute and any movement in IE will give the "script is not responding" error.
    Yes, selecting 400 records at once might be a problem. What IE version are you testing with? Legacy IE are especially slow.

    Could you, please, try in Chrome to see how it works?

    There is something to try. I doubt it'll help, but there is a chance.
    Ext.suspendLayouts();
    
    if (!isSelected) {
        column.grid.getSelectionModel().select(group.children, true);
    } else {
        column.grid.getSelectionModel().deselect(group.children, true);
    };
    
    Ext.resumeLayouts();
    I have also tried applying a LoadMask so the user knows to wait but the mask is shown only after the selection of the group is completed which defeats the purpose.
    A LoadMask is mostly for asynchronous operations (requests to server). In single-thread JavaScript it doesn't work very well. But if you provide a test case to reproduce the issue, I would attempt to correct it to show a mask before selection.
  5. #5
    Could you, please, try in Chrome to see how it works?
    IE 11.0.600.17631 <-- very slow
    Chrome 42.0.2311.152 <-- faster, but still takes long
    Firefox 37.0.2 <-- almost no slowness

    I actually have the mask working now (though the animation does not spin) by using the code below. I have also incorporated your previous suggestion. You are correct in that it did not help. This code has almost no hesitation in Firefox when the group contains 425 records. It would be great if it worked in IE as that is what most of my clients use.

    <ext:XScript runat="server">
            <script>
                var onGroupCommand = function (column, command, group) {
                    Ext.getBody().mask('Please wait while your selection is made.');
                    Ext.defer(function() { SelectDeselectRows(column, command, group); Ext.getBody().unmask(); }, 10);
                };
    
                function SelectDeselectRows(column, command, group)
                {
                    if (command === 'SelectMonitor') {
                        var isSelected = #{gpMonitors}.getSelectionModel().isSelected(group.children[0]);}
    
                    Ext.suspendLayouts();
    
                    if (!isSelected) {
                        column.grid.getSelectionModel().select(group.children, true);
                    } else {
                        column.grid.getSelectionModel().deselect(group.children, true);
                    }; 
    
                    Ext.resumeLayouts();
                }
     </script>
        </ext:XScript>
    
    <ext:GridPanel HideHeaders="True" Scroll="Vertical" AutoScroll="true"
                                    ID="gpMonitors"
                                    runat="server"
                                    Region="Center"
                                    MinHeight="200">
                                    <Store>
                                        <ext:Store ID="storeMonitors" runat="server" GroupField="CATEGORY">
                                            <Model>
                                                <ext:Model runat="server" IDProperty="MONITORID">
                                                    <Fields>
                                                        <ext:ModelField Name="MONITORID" />
                                                        <ext:ModelField Name="DESCRIPTION" />
                                                        <ext:ModelField Name="CATEGORY" />
                                                        <ext:ModelField Name="SELECTED" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel runat="server">
                                        <Columns>
                                            <ext:Column runat="server" Hidden="true" DataIndex="MONITORID" Text="MONITORID" Flex="1" />
                                            <ext:Column runat="server" DataIndex="DESCRIPTION" Text="DESCRIPTION" Flex="1" />
                                            <ext:CheckColumn runat="server" Hidden="true" DataIndex="SELECTED" Text="SELECTED"></ext:CheckColumn>
                                            <ext:CommandColumn ID="CommandColumn1" runat="server" Hidden="true">
                                                <GroupCommands>
                                                    <ext:GridCommand Icon="TableRow" CommandName="SelectMonitor">
                                                        <ToolTip Title="Select/DeSelect" Text="Select/DeSelect all rows of the group" />
                                                    </ext:GridCommand>
                                                </GroupCommands>
                                                <Listeners>
                                                    <GroupCommand Fn="onGroupCommand" />
                                                </Listeners>
                                            </ext:CommandColumn>
                                        </Columns>
                                    </ColumnModel>
                                    <SelectionModel>
                                        <ext:CheckboxSelectionModel ShowHeaderCheckbox="False" runat="server" Mode="Multi"></ext:CheckboxSelectionModel>
                                    </SelectionModel>
                                    <Features>
                                        <ext:Grouping ID="grpMonitor" StartCollapsed="true" runat="server"
                                            GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'>
                                        </ext:Grouping>
                                    </Features>
                                </ext:GridPanel>
  6. #6
    IE 11.0.600.17631 <-- very slow
    Chrome 42.0.2311.152 <-- faster, but still takes long
    Firefox 37.0.2 <-- almost no slowness
    Any advice or fix for this?
  7. #7
    If you post a runnable test case, I could investigate a little bit more, but I doubt I will be able to find a solution.
  8. #8

    Working Test Case

    Sorry for the late response. I had to work on a few other things. I have a working example for you. You will be able to see that the group selection for the big group takes a long...long...time.

    The XML Data File is attached. Just rename to "Data.xml" Data.txt

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                XElement document = XElement.Load(Server.MapPath("Data.xml"));
    
                IEnumerable<object> query = from g in document.Elements("Monitor")
                                            select new
                                            {
                                                DESCRIPTION = g.Attribute("DESCRIPTION") != null ? g.Attribute("DESCRIPTION").Value : "",
                                                CATEGORY = g.Attribute("CATEGORY") != null ? g.Attribute("CATEGORY").Value : "",
                                                MONITORID = g.Attribute("MONITORID") != null ? g.Attribute("MONITORID").Value : ""
                                            };
    
                this.storeMonitors.DataSource = query;
                this.storeMonitors.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <ext:XScript runat="server">
            <script>
                var onGroupCommand = function (column, command, group) {
                    Ext.getBody().mask('Please wait while your selection is made.');
                    Ext.defer(function() { SelectDeselectRows(column, command, group); Ext.getBody().unmask(); }, 10);
                };
    
                function SelectDeselectRows(column, command, group)
                {
                    if (command === 'SelectMonitor') {
                        var isSelected = #{gpMonitors}.getSelectionModel().isSelected(group.children[0]);}
    
                    Ext.suspendLayouts();
    
                    if (!isSelected) {
                        column.grid.getSelectionModel().select(group.children, true);
                    } else {
                        column.grid.getSelectionModel().deselect(group.children, true);
                    }; 
    
                    Ext.resumeLayouts();
                }
     </script>
        </ext:XScript>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
            <div>
                <ext:GridPanel HideHeaders="False" Scroll="Vertical" AutoScroll="true"
                    ID="gpMonitors"
                    runat="server"
                    MinHeight="200">
                    <Store>
                        <ext:Store ID="storeMonitors" runat="server" GroupField="CATEGORY">
                            <Model>
                                <ext:Model runat="server" IDProperty="MONITORID">
                                    <Fields>
                                        <ext:ModelField Name="MONITORID" />
                                        <ext:ModelField Name="DESCRIPTION" />
                                        <ext:ModelField Name="CATEGORY" />
                                        <ext:ModelField Name="SELECTED" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" Hidden="True" DataIndex="MONITORID" Text="MONITORID" Flex="1" />
                            <ext:Column runat="server" DataIndex="DESCRIPTION" Text="DESCRIPTION" Flex="4" />
                            <ext:CommandColumn ID="CommandColumn1" runat="server" Hidden="true">
                                <GroupCommands>
                                    <ext:GridCommand Icon="TableRow" CommandName="SelectMonitor">
                                        <ToolTip Title="Select/DeSelect" Text="Select/DeSelect all rows of the group" />
                                    </ext:GridCommand>
                                </GroupCommands>
                                <Listeners>
                                    <GroupCommand Fn="onGroupCommand" />
                                </Listeners>
                            </ext:CommandColumn>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel ShowHeaderCheckbox="False" runat="server" Mode="Multi"></ext:CheckboxSelectionModel>
                    </SelectionModel>
                    <Features>
                        <ext:Grouping ID="grpMonitor" StartCollapsed="true" runat="server"
                            GroupHeaderTplString='{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'>
                        </ext:Grouping>
                    </Features>
                </ext:GridPanel>
            </div>
        </form>
    </body>
    </html>
  9. #9
    Thank you for the test case. I am excited how slow it is in Chrome and how Firefox is way better in performance in this scenario.

    I discovered a need to do selModel.suspendChanges(); for bulk selection and deselection. Please try the function bellow.

    function SelectDeselectRows(column, command, group) {
        var selModel,
            isSelected;
    
        if (command === 'SelectMonitor') {
            selModel = column.grid.getSelectionModel();
            isSelected = selModel.isSelected(group.children[0]);
    
            selModel.suspendChanges();
    
            if (!isSelected) {
                selModel.select(group.children, true, true);
            } else {
                selModel.deselect(group.children, true, true);
            }; 
    
            selModel.resumeChanges();
            //selModel.updateHeaderState(); // Please uncomment if you change ShowHeaderCheckbox="False" to true.
        }
    }
  10. #10
    Thanks Daniil!

    Your solution worked great!
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] GroupCommand and GroupHeaderTpl
    By pgodwin in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 20, 2014, 7:10 AM
  2. [CLOSED] Gridpanel GroupCommand Example
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Dec 31, 2011, 8:23 AM
  3. Replies: 6
    Last Post: Aug 01, 2011, 4:53 PM
  4. [CLOSED] GroupCommand on a row with an ampersand in the name...
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 19, 2011, 10:58 AM
  5. groupcommand handler parameters
    By wp_joju in forum 1.x Help
    Replies: 4
    Last Post: Feb 16, 2011, 9:22 AM

Tags for this Thread

Posting Permissions