[CLOSED] Multiselect on grid with context menu

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Multiselect on grid with context menu

    Hi Guys,

    Is possible select many itens in the grid with context menu?
    When I click the right button on the selected items only one item is selected.

    Any suggestion?
    Last edited by Daniil; Mar 27, 2012 at 4:31 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Well, there is not built-in functionality to select rows on right click.

    You could select in manually within the RowContextMenu listener.
    http://docs.sencha.com/ext-js/3-4/#!...rowcontextmenu
  3. #3
    Hi Daniil,

    Please, you can provide an example?
  4. #4
    Could you provide your example which would demonstrate the requirement and which we could use as a start point?
  5. #5
    Hi Daniil,

    This can serve as an example:

    I need to recover the three selected lines, for example.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script type="text/javascript">
        function showMenu(node, e) {
            var menu = RowContextMenu;
            if (node.browserEvent) {
                this.menuNode = this.getRootNode();
                menu.nodeName = "";
                this.getSelectionModel().clearSelections();
                e = node;
            }
            else {
                this.menuNode = node;
                menu.nodeName = node.text;
                node.select();
            }
    
            menu.showAt([e.getXY()[0], e.getXY()[1] + 18]);
            e.stopEvent();
        }
    
    </script>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new List<Company> 
                { 
                    new Company(0, "3m Co", 71.72, 0.02, 0.03),
                    new Company(1, "Alcoa Inc", 29.01, 0.42, 1.47),
                    new Company(2, "Altria Group Inc", 83.81, 0.28, 0.34),
                    new Company(3, "American Express Company", 52.55, 0.01, 0.02),
                    new Company(4, "American International Group, Inc.", 64.13, 0.31, 0.49),
                    new Company(5, "AT&T Inc.", 31.61, -0.48, -1.54),
                    new Company(6, "Boeing Co.", 75.43, 0.53, 0.71),
                    new Company(7, "Caterpillar Inc.", 67.27, 0.92, 1.39),
                    new Company(8, "Citigroup, Inc.", 49.37, 0.02, 0.04),
                    new Company(9, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                    new Company(10, "Exxon Mobil Corp", 68.1, -0.43, -0.64),
                    new Company(11, "General Electric Company", 34.14, -0.08, -0.23),
                    new Company(12, "General Motors Corporation", 30.27, 1.09, 3.74),
                    new Company(13, "Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                    new Company(14, "Honeywell Intl Inc", 38.77, 0.05, 0.13),
                    new Company(15, "Intel Corporation", 19.88, 0.31, 1.58),
                    new Company(16, "International Business Machines", 81.41, 0.44, 0.54),
                    new Company(17, "Johnson & Johnson", 64.72, 0.06, 0.09),
                    new Company(18, "JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                    new Company(19, "McDonald\"s Corporation", 36.76, 0.86, 2.40),
                    new Company(20, "Merck & Co., Inc.", 40.96, 0.41, 1.01),
                    new Company(21, "Microsoft Corporation", 25.84, 0.14, 0.54),
                    new Company(22, "Pfizer Inc", 27.96, 0.4, 1.45),
                    new Company(23, "The Coca-Cola Company", 45.07, 0.26, 0.58),
                    new Company(24, "The Home Depot, Inc.", 34.64, 0.35, 1.02),
                    new Company(25, "The Procter & Gamble Company", 61.91, 0.01, 0.02),
                    new Company(26, "United Technologies Corporation", 63.26, 0.55, 0.88),
                    new Company(27, "Verizon Communications", 35.57, 0.39, 1.11),
                    new Company(28, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
                };
    
                this.Store1.DataBind();
    
                if (!IsPostBack)
                {
                    RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
                                    
                    sm.SelectedRows.Add(new SelectedRow(1));
                    sm.SelectedRows.Add(new SelectedRow(2));
                    sm.SelectedRows.Add(new SelectedRow(3)); 
                }
              
            }
       }
    
        protected void DeleteRowGridDocumento_Clique(object sender, DirectEventArgs e)
        {
            X.MessageBox.Show(new MessageBoxConfig() { Title = "Teste", Message = e.ExtraParams["documentoId"].ToString() });
        }
    
        public class Company
        {
            public Company(int id, string name, double price, double change, double pctChange)
            {
                this.ID = id;
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public double PctChange { get;set; }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>GridPanel with Checkbox Selection Model - Ext.NET Examples</title>
        
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
           
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>GridPanel with Checkbox Selection Model</h1>
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Price" />
                            <ext:RecordField Name="Change" />
                            <ext:RecordField Name="PctChange" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1"
                StripeRows="true"
                Title="Company List"
                AutoExpandColumn="Company" 
                Collapsible="true"
                Width="600"
                Height="350"
                ContextMenuID="RowContextMenu">
                <Listeners>
                    <RowContextMenu Handler="e.preventDefault(); #{RowContextMenu}.dataRecord = this.store.getAt(rowIndex);#{RowContextMenu}.showAt(e.getXY()); this.getSelectionModel().selectRow(rowIndex);" />
                </Listeners>
                <ColumnModel ID="ColumnModel1" runat="server">
    		        <Columns>
                        <ext:Column ColumnId="Company" Header="Company" Width="160" DataIndex="Name" Resizable="false" MenuDisabled="true" Fixed="true" />
                        <ext:Column Header="Price" Width="75" DataIndex="Price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="Change">                        
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="PctChange">                      
                        </ext:Column>
    		        </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1" DisplayInfo="false" />
                </BottomBar>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
                </SelectionModel>           
            </ext:GridPanel>
            
            <div style="width:590px; border:1px solid gray; padding:5px;">
                <ext:Label ID="Label1" runat="server" />
            </div>
    
            <ext:Menu ID="RowContextMenu" runat="server">
                <Items>                         
                    <ext:MenuItem ID="MenuItemExcluir" runat="server" Text="Excluir" Icon="Cross">
                        <DirectEvents>
                            <Click
                                Success=""                                          
                                OnEvent="DeleteRowGridDocumento_Clique">                            
                                <ExtraParams>
                                    <ext:Parameter 
                                        Name="documentoId"
                                        Value="#{RowContextMenu}.dataRecord.data.ID"                                                           
                                        Mode="Raw"/>                                                                      
                                </ExtraParams> 
                                <EventMask ShowMask="true" Msg="Aguarde ..." MinDelay="600" />                                                                              
                            </Click>
                        </DirectEvents>
                    </ext:MenuItem>
                </Items>
            </ext:Menu>
        </form>
      </body>
    </html>
  6. #6
    Thanks for the sample.

    Please replace
    this.getSelectionModel().selectRow(rowIndex);
    with
    this.getSelectionModel().selectRow(rowIndex, true);
    within the RowContextMenu listener.

    See also
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.RowSelectionModel-method-selectRow
  7. #7
    Hi Daniil,

    Thanks for your help.

    Yes, this work well, but in my context not work.

    When I click the right button on the selected items only one item is selected.

    Thanks.
  8. #8
    Please provide a sample to reproduce.
  9. #9
    Hi,

    This example. Click right button for you to see.
  10. #10
    Unfortunately, I can't see any new example.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: Mar 26, 2012, 6:11 PM
  2. Replies: 11
    Last Post: Feb 29, 2012, 3:57 PM
  3. Replies: 1
    Last Post: Feb 17, 2012, 12:38 PM
  4. Context menu on tree grid
    By Mr.Techno in forum 1.x Help
    Replies: 20
    Last Post: Nov 17, 2011, 10:18 AM
  5. [CLOSED] Remove sort Asc/Desc from grid header context menu
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 29, 2009, 2:59 PM

Tags for this Thread

Posting Permissions