[CLOSED] GridPanel CheckboxSelectionModel & contiguous selection

  1. #1

    [CLOSED] GridPanel CheckboxSelectionModel & contiguous selection

    Currently, if I use a RowSelectionModel with a GridPanel (singleSelect=false), I can select a contiguous range of rows, by clicking on the first row, then Shift+clicking on the last row.

    With the CheckboxSelectionModel, I can only select/deselect individual rows or select/deselect all rows by clicking on the header checkbox. Is it possible to select a range of rows in the same way it's done with the RowSelectionModel. Shift+Clicking doesn't seem to have the same effect as it has when I use the RowSelectionModel.

    Thanks!
    Last edited by Daniil; May 18, 2012 at 4:45 PM. Reason: [CLOSED]
  2. #2
    Hi Bogdan,

    There is no such functionality in CheckboxSelectionModel.

    But you can implement it manually. I can suggest to override the CheckboxSelectionModel onMouseDown function adding the following piece of code:
    //start of selecting range with shift functionality
    if (e.shiftKey && !this.singleSelect && this.last !== false){
        var last = this.last;
        this.selectRange(last, index, e.ctrlKey);
        this.last = last; // reset the last
        return;
    }
    //end of selecting range with shift functionality
    Here is the full example.

    Example
    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                store.DataBind();
            }
        }
    </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>Ext.NET Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            Ext.grid.CheckboxSelectionModel.override({
                onMouseDown: function (e, t) {
                    /* 
                    If you want make selections only by checking the checkbox,
                    add "&& t.className == 'x-grid3-row-checker'" to next if statement
               
                    If you want to make selection only with Ctrl key pressed, add
                    "&& e.ctrlKey" to next if statement
                    */
            
                    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;
    
                        //start of selecting range with shift functionality
                        if (e.shiftKey && !this.singleSelect && this.last !== false){
                            var last = this.last;
                            this.selectRange(last, index, e.ctrlKey);
                            this.last = last; // reset the last
                            return;
                        }
                        //end of selecting range with shift functionality
    
                        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>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>

Similar Threads

  1. Replies: 3
    Last Post: Oct 05, 2012, 11:44 AM
  2. Replies: 0
    Last Post: Jul 31, 2012, 5:07 PM
  3. [CLOSED] GridPanel and CheckBoxSelectionModel
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 25, 2012, 2:51 PM
  4. [CLOSED] GridPanel and CheckBoxSelectionModel
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 25, 2012, 11:45 AM
  5. GridPanel CheckboxSelectionModel
    By winner0819 in forum 1.x Help
    Replies: 2
    Last Post: Dec 12, 2011, 3:00 AM

Posting Permissions