Ext.Net.GridPanel with CheckboxSelectionModel - select multiple records via checkbox or Ctrl+Click, otherwise, single-select

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Ext.Net.GridPanel with CheckboxSelectionModel - select multiple records via checkbox or Ctrl+Click, otherwise, single-select

    How can configure GridPannel so that it allows selection of multiple rows by selecting them via checkboxes or by Ctr+Click?
    Clicking on any other cell in the row should select just that one row (and deselect all other rows) a la File Explorer.
  2. #2
    Could this thread be moved to Ext 1.x forum as it relates to that version of the framework?
  3. #3
    Hello @DanGarkusha!

    Moved your topic to 1.x help (remember 1.x premium help is read-only? we still have to put some thought on that, but for the time being, let's do it with 1.x community help, okay?)

    You should try using the checkbox selection model's SingleSelect setting. But this probably is not what you want. I'm afraid you'd need to extend the selection model to allow it to work the way you want.

    It would be a mixture of the CheckboxSelectionModel's "usual" checkOnly setting (without singleSelect), and the RowSelectionModel's default behavior (it supports ctrl+click selecting to multi select, and just by clicking, it does single selection).

    You can check out the examples explorer for examples using both the checkbox selection model and row selection model examples to base the extension on.

    As an alternative to extending the selection model class, you can just replace the grid's selModel.onMouseDown() method to perform the multi selection if clicked in the checkbox, and single selection otherwise.

    As yet another alternative, you can just go with the row selection model example above, add a check column, and bind the selected/deselected state of the checkboxes to the selection of the grid. You'd need, in this approach, to either create the header checkbox to toggle select all, or add a top/bottom button to the grid implementing the ability.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Thanks, Farbicio,


    I've looked through the links you've provided. Unfortunately, I was unable to piece together a working solution.

    As an alternative to extending the selection model class, you can just replace the grid's selModel.onMouseDown() method to perform the multi selection if clicked in the checkbox, and single selection otherwise.

    As yet another alternative, you can just go with the row selection model example above, add a check column, and bind the selected/deselected state of the checkboxes to the selection of the grid. You'd need, in this approach, to either create the header checkbox to toggle select all, or add a top/bottom button to the grid implementing the ability.
    Could you give an example of how either of these solutions would look like in code?

    Here is some pseudocode that I came up with that I would like to be translated to EXT.Net (SenchaJS):

    When grid-row-checkbox is clicked, 
      if the checkbox is now checked, add this row to the selection pool
      if the checkbox is now unchecked, remove this row from the selection pool
    
    When grid-row is clicked,
      if Ctrl key is down, 
         if this row was already selected, remove this row from selection pool and set grid-row-checkbox to unchecked
         if this row was not selected, add this row to selection pool and set grid-row-checkbox to checked
      else, unselect all rows in the grid, add this row to selection pool and set grid-row-checkbox to checked
  5. #5
    Hello, DanGarkusha!

    The code below, based on the Grid with Checkbox Selection Model example, uses the RowSelect and RowDeselect events to intercept the selection event when not done via the checkboxes and select the clicked row, clearing any other selection is saved, no matter what:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <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();
            }
       }
    
        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 runat="server">
        <title>GridPanel with Checkbox Selection Model - Ext.NET Examples</title>
        
        <script type="text/javascript">
            var handleRowSelection = function (selModel, rowId, record) {
                var selLen = selModel.isSelected(rowId) ? 1 : 0;
    
                if (event !== undefined) {
                    var target = event.target;
    
                    if (target !== undefined && target.classList !== undefined) {
                        for (var i = 0; i < target.classList.length; i++) {
                            if (target.classList[i] === "x-grid3-row-checker") {
                                return;
                            }
                        }
                    }
                }
    
                if (selModel.selections.length > selLen) {
                    selModel.selections.clear();
                    selModel.selections.add(record);
                    selModel.grid.view.refresh();
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager 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">
                <ColumnModel 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" />
                        <ext:Column Header="Change" Width="75" DataIndex="Change" />
    		        </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1" DisplayInfo="false" />
                </BottomBar>
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server">
                        <Listeners>
                            <RowDeselect Fn="handleRowSelection" />
                            <RowSelect Fn="handleRowSelection" />
                        </Listeners>
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
            </ext:GridPanel>
        </form>
      </body>
    </html>
    This is a similar approach to replacing the grid's selModel.onMouseDown() event. In fact, instead of binding the two events, I could just replace the single mouse down event with this. Little -- to no -- modification should be needed to be 100% that approach.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Thanks, Fabricio,

    I am still unable to reproduce the behaviour that I was looking for when I plugged handleRowSelection function into my project (added it into a separate JS file where I keep all my grid event handlers).

    Here are my observations:
    1. The event object is always undefined. Any idea why?
    2. Clicking on a grid-row-checkbox selects that row only and clears the rest - unexpected
    3. Clicking anywhere else on the grid-row selects that row only and clears the rest - great!.
    However, grid.selectedIds collection maintains all previously selected records - unexpected.
    4. [Ctr]+Clicking on the grid-row selects that row only and clears the rest - unexpected
    5. Switching between pages brings back previously selected rows - unexpected

    As an alternative to extending the selection model class, you can just replace the grid's selModel.onMouseDown() method to perform the multi selection if clicked in the checkbox, and single selection otherwise.
    Could you provide an example of what this would look like in code and what implications this might have on the default behavior of selModel.onMouseDown event handler?
    Last edited by DanGarkusha; Oct 09, 2018 at 9:07 PM.

Similar Threads

  1. Replies: 5
    Last Post: Oct 06, 2018, 12:44 AM
  2. Replies: 7
    Last Post: Jun 26, 2013, 9:25 AM
  3. [CLOSED] GridPanel with CheckboxSelectionModel: select records
    By Leonid_Veriga in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 09, 2012, 11:41 AM
  4. [CLOSED] GridPanel with CheckboxSelectionModel: select and deselect records
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 09, 2012, 11:40 AM
  5. Replies: 5
    Last Post: Mar 24, 2010, 5:15 PM

Posting Permissions