[CLOSED] Sort checked records in GridPanel with CheckboxSelectionModel (CheckColumn)

  1. #1

    [CLOSED] Sort checked records in GridPanel with CheckboxSelectionModel (CheckColumn)

    Hello,

    Is there any way to sort checked records in GridPanel with CheckboxSelectionModel (or at least with CheckColumn).
    Also it would be great to keep the CheckAll option in the header.

    I found the next solutions (but they both are not perfect):

    1) With CheckboxSelectionModel we can handle HeaderClick event and manually set sort icon:
    #{GridName}.getView().updateSortIcon(0, 'ASC');
    But checkbox click also will be a header click here.

    2) Do not use CheckboxSelectionModel, but add CheckColumn.
    I've found an example with addition row in the header, where we can place CheckAll option.
    But header becomes too big in this case.

    Could you please suggest any solution?

    Thanks in advance.
    Last edited by Daniil; Sep 12, 2012 at 5:58 AM. Reason: [CLOSED]
  2. #2
    Hi,

    An interesting request. I am curious why I never met such requirement before.

    As far as I can see there is no built-in functionality to achieve the requirement. Needs some override and codding.

    What about the following?

    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>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script type="text/javascript">
            var myGetHeaderConfig = function () {
                var me = this,
                    showCheck = me.showHeaderCheckbox !== false;
    
                return {
                    isCheckerHd: showCheck,
                    text: "&#160;",
                    width: 40,
                    sortable: true,
                    draggable: false,
                    resizable: false,
                    hideable: false,
                    menuDisabled: false,
                    dataIndex: "",
                    cls: showCheck ? Ext.baseCSSPrefix + "column-header-checkbox " : "",
                    renderer: Ext.Function.bind(me.renderer, me),
                    editRenderer: me.editRenderer || me.renderEmpty,
                    locked: me.hasLockedHeader(),
                    listeners: {
                        headertriggerclick : {
                            fn : function () {
                                alert("Here show any menu you wish");
                                return false; //to prevent the default menu from appearing
                            }
                        }
                    }
                }
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server">
                    <CustomConfig>
                        <ext:ConfigItem Name="getHeaderConfig" Value="myGetHeaderConfig" Mode="Raw" />
                    </CustomConfig>
                </ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>
  3. #3
    Hi Daniil,

    Thank you for the solution! I was able to adjust it and make it similar to other columns' menu.
    But there is the only problem I can't solve:

    Ext.Net 1 had the special function to update sort Icon:
    #{Grid}.getView().updateSortIcon(0, 'ASC');
    For Ext.Net 2 I found the next way:
    #{Grid}.headerCt.getGridColumns()[0].setSortState('DESC');
    But it works with the regular columns and does not work with the CheckColumn (using CheckboxSelectionModel).
    Could you please help with the way to show the sort direction for that column?

    Thank you!
  4. #4
    Unfortunately, the setSortState method won't work as you need for the CheckboxSelectionModel column.

    I can suggest to try applying respective CSS classes for DESC and ASC with respective background images.

Similar Threads

  1. Replies: 0
    Last Post: Sep 26, 2011, 12:20 PM
  2. CheckColumn Checked
    By Maia in forum 1.x Help
    Replies: 7
    Last Post: Jan 14, 2010, 9:30 AM
  3. CheckColumn and CheckboxSelectionModel
    By Satyanarayana murthy in forum 1.x Help
    Replies: 6
    Last Post: Nov 25, 2009, 12:47 AM
  4. Dynamic CheckColumn is not checked
    By alco in forum 1.x Help
    Replies: 4
    Last Post: Oct 01, 2009, 9:52 AM
  5. how to set CheckboxSelectionModel checked?
    By mine1202 in forum 1.x Help
    Replies: 2
    Last Post: Jan 04, 2009, 11:19 AM

Posting Permissions