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

Page 1 of 2 12 LastLast
  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.
  7. #7
    Hello DanGarkusha!

    We'll show you below how to override the onMouseDown event code, with the current code it runs. Please try to adapt that code to your needs. Let us know if you get into issues with that.

    I've changed the default behavior just adding an output to the Browser's developer tools' console every time one row on the grid is clicked. This should be all you need to know in order to override the function and implement the specific behavior you want.

    Let me clarify that you want a feature not supported by this version of Ext.NET, and the only way out is really making it work by changing the code.

    <%@ 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>
        
        <%-- This is required so that the code below has 'Ext' available in its context. --%>
        <ext:ResourcePlaceHolder runat="server" />
    
        <script type="text/javascript">
            Ext.override(Ext.grid.CheckboxSelectionModel, {
                onMouseDown: function (e, t) {
                    console.log("onMouseDown is overridden. Make your changes below.");
    
                    if (e.button !== 0 || this.isLocked()) {
                        return;
                    }
    
                    if (this.checkOnly && t.className !== "x-grid3-row-checker") {
                        return;
                    }
    
                    if (this.ignoreTargets) {
                        var i = 0;
    
                        for (i; i < this.ignoreTargets.length; i++) {
                            if (e.getTarget(this.ignoreTargets[i])) {
                                return;
                            }
                        }
                    }
    
                    if (e.button === 0 &&
                        (this.keepSelectionOnClick === "always" || t.className === "x-grid3-row-checker") &&
                        t.className !== "x-grid3-row-expander" &&
                        !Ext.fly(t).hasClass("x-grid3-td-expander")) {
    
                        e.stopEvent();
                        var row = e.getTarget(".x-grid3-row"),
                            index;
    
                        if (!row) {
                            return;
                        }
    
                        index = row.rowIndex;
    
                        if (this.keepSelectionOnClick === "withctrlkey") {
                            if (this.isSelected(index)) {
                                this.deselectRow(index);
                            } else {
                                this.selectRow(index, true);
                            }
                        } else {
                            if (this.isSelected(index)) {
                                if (!this.grid.enableDragDrop) {
                                    if (this.allowDeselect === false) {
                                        return;
                                    }
    
                                    this.deselectRow(index);
                                } else {
                                    this.deselectingFlag = true;
                                }
                            } else {
                                if (this.grid.enableDragDrop) {
                                    this.deselectingFlag = false;
                                }
    
                                this.selectRow(index, true);
                            }
                        }
                    }
                }
            });
        </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" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
      </body>
    </html>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Oh, and I forgot this bit:

    Quote Originally Posted by DanGarkusha
    1. The event object is always undefined. Any idea why?
    In my tests here, the event object was not defined when the select/deselect code is triggered by something not an event, like calling GridPanel1.getSelectionModel().selectRow(2); from the console.

    The first trigger its event is always defined when I actually clicked the row. It may have following calls to select/deselect events (after this one) that would be derived but not directly from the event, maybe by clicking the 'select all' checkbox on the top of the column; but I couldn't really reproduce this here.

    The code didn't implement logic to accept ctrl+click, for that you should check the event's ctrl key is marked as pressed and add it to the tests before performing the single select behavior.

    On my tests here, clicking on the checkbox resulted in multi selection, using chrome browser. Maybe some browser-specific code is needed, or check just against target.className instead of trying to traverse target.classList. As you can see in the code in the last post, the original code relies in just checking against target.className while checking for the click in or out the checkbox.

    Hope this clarifies that issue.

    EDIT: This improves a little the code of the function handler (amending to the first example, the event handling approach); if event is not defined, it uses the checkbox selection behavior; also if the ctrl key is pressed during the event.

    var handleRowSelection = function (selModel, rowId, record) {
        var selLen = selModel.isSelected(rowId) ? 1 : 0;
    
        if (event === undefined || event.ctrlKey === true) {
            return
        } else {
            var target = event.target;
    
            if (target !== undefined && target.className !== undefined) {
                if (target.className === "x-grid3-row-checker") {
                    return;
                }
            }
        }
    
        if (selModel.selections.length > selLen) {
            selModel.selections.clear();
            selModel.selections.add(record);
            selModel.grid.view.refresh();
        }
    }
    Last edited by fabricio.murta; Oct 09, 2018 at 10:09 PM.
  9. #9
    Thanks Fabricio,

    I was able to combine both the code you provided in onMouseDown override and the code in handleRowSelection function to produce a working solution.

    Here is what I've got in the end:

    <%@ 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>
        
        <%-- This is required so that the code below has 'Ext' available in its context. --%>
        <ext:ResourcePlaceHolder runat="server" />
    
        <script type="text/javascript">
    
            Ext.override(Ext.grid.CheckboxSelectionModel, {
                handleRowSelection: function(e, t) {
    
                    if (e.button !== 0 || this.isLocked()) {
                        return;
                    }
                    if (this.checkOnly && t.className !== "x-grid3-row-checker") {
                        return;
                    }
    
                    if (this.ignoreTargets) {
                        var i = 0;
    
                        for (i; i < this.ignoreTargetthis.length; i++) {
                            if (e.getTarget(this.ignoreTargets[i])) {
                                return;
                            }
                        }
                    }
    
                    if (e.button === 0 &&
                        (this.keepSelectionOnClick === "always" || t.className === "x-grid3-row-checker") &&
                        t.className !== "x-grid3-row-expander" &&
                        !Ext.fly(t).hasClass("x-grid3-td-expander")) {
    
                        e.stopEvent();
                        var row = e.getTarget(".x-grid3-row");
    
                        if (!row) {
                            return;
                        }
    
                        var index = row.rowIndex;
    
                        if (this.keepSelectionOnClick === "withctrlkey") {
                            if (this.isSelected(index)) {
                                this.deselectRow(index);
                            } else {
                                this.selectRow(index, true);
                            }
                        } else {
                            if (this.isSelected(index)) {
                                if (!this.grid.enableDragDrop) {
                                    if (this.allowDeselect === false) {
                                        return;
                                    }
    
                                    this.deselectRow(index);
                                } else {
                                    this.deselectingFlag = true;
                                }
                            } else {
                                if (this.grid.enableDragDrop) {
                                    this.deselectingFlag = false;
                                }
    
                                this.selectRow(index, true);
                            }
                        }
    
                    }
                },
                onMouseDown: function (e, t) {
                    var row = e.getTarget(".x-grid3-row");
    
                    if (!row) {
                        this.handleRowSelection(e, t);
                        return;
                    }
    
                    var rowIndex = row.rowIndex;
    
                    var selLen = this.isSelected(rowIndex) ? 1 : 0;
    
                    if (e.ctrlKey === true) {
                        this.handleRowSelection(e, t);
                        return;
                    } else {
                        var target = e.target;
                        if (target && target.className && target.className === "x-grid3-row-checker") {
                            this.handleRowSelection(e, t);
                            return;
                        }
                    }
    
                    var selectedRowCount = 0;
                    for (var i in this.grid.selectedIds) {selectedRowCount++;}
    
                    if (selectedRowCount === 0 || selectedRowCount > selLen) {
                        this.grid.selectedIds = {};
                        this.selections.clear();
                        this.selectRow(rowIndex, true);
                        this.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" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
      </body>
    </html>
  10. #10
    Let me clarify that you want a feature not supported by this version of Ext.NET, and the only way out is really making it work by changing the code.
    Is this feature (behaviour) supported in any other version of Ext.Net?
Page 1 of 2 12 LastLast

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 Premium Help
    Replies: 4
    Last Post: Oct 09, 2012, 11:41 AM
  4. Replies: 2
    Last Post: Oct 09, 2012, 11:40 AM
  5. Replies: 5
    Last Post: Mar 24, 2010, 5:15 PM

Posting Permissions