[CLOSED] issue with grid panel header check box in CheckboxSelectionModel.

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] issue with grid panel header check box in CheckboxSelectionModel.

    My requirement is that, once user clicks on header check box then all the rows should get selected except few. i found a sample code for the same, once i click on header check box it works but the header check box remains unchecked. please help.

    <%@ 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[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
            }
        }
    </script>
      
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.Net Example</title>
      
        <script>
            var getRowClass = function (record, index) {
                if (index === 0 || index === 2) {
                    return "my-disabled";
                }
            }
        </script>
      
        <style>
            .my-disabled .x-grid-row-checker {
                filter: alpha(opacity=60);
                opacity: 0.6;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
     
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                        <GetRowClass Fn="getRowClass" />
                    </ext:GridView>
                </View>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
                        <Listeners>
                            <BeforeSelect Handler="return index !== 0 && index !== 2;" />
                        </Listeners>
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 31, 2014 at 3:00 PM. Reason: [CLOSED]
  2. #2
    Hi @Prasoon,

    i found a sample code for the same
    Could you, please, share the link? I would like to review.
  3. #3

    please find the find.

  4. #4
    Thank you. I think it needs to override the CheckboxSelectionModel's updateHeaderState method to ignore the disabled rows.
    http://docs.sencha.com/extjs/4.2.1/#...ateHeaderState
  5. #5
    Thanks, please share a sample code.
  6. #6
    Unfortunately, I don't have a sample code. Please clarify have you tried to override?
  7. #7
    No, is didn't tried, please let me know the syntax for overriding updateHeaderState, logic i will try.
  8. #8
    Here is an example of overriding.
    http://forums.ext.net/showthread.php...l=1#post220551
  9. #9
    Hello,

    Chris Wolcott (@cwolcott) pointed to this thread asking us if we had some news on how to implement this. So I felt like trying something.

    I believe this should do; although it is just a visual effect, the real handling of checked/unchecked should be done in code behind, as anyone could change javascript code online to manipulate what is shown on screen. So I thought this was a valid alternative to attain your objective.

    Before I show the reviewed code, let me explain what is happening:
    1. I've implemented a renderer to selectively manipulate the checkbox to make it unselectable and disabled. The effect is only CSS, so for the selection model the cell is selected. I believe you can check validity once the request is sent. Rather, I encourage you to do that, as this is the safest method to avoid the user to taint and forcibly check a row by his own will using javascript console.
    2. Once the selection is made, the checkbox will keep its 'unchecked' picture, although selected (as explained above).
    3. As a result, you will get both: disabled checkboxes visually unchecked, header checkbox checked.

    I hope this is a feasible alternative for this. Credits for the override: namodev05.
    <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[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
            }
        }
    </script>
      
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.Net Example</title>
      
        <script>
            var getRowClass = function (record, index) {
                if (index === 0 || index === 2) {
                    return "my-disabled";
                }
            };
    
            var renderCheckBoxes = function (value, metaData, record, rowIndex, colIndex, store, view) {
                metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
                var cbClass = Ext.baseCSSPrefix + 'grid-row-checker';
                var retval = '<div class="' + cbClass + '"';
                if (rowIndex === 0 || rowIndex === 2) {
                    retval = retval + 'style="background-position: 0 0px; opacity: 0.3"';
                }
                retval = retval + '></div>';
                return retval;
            }
        </script>
      
        <style>
            .my-disabled .x-grid-row-checker {
                display: none;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="true" />
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <%--<ext:GridView ID="GridView1" runat="server">
                        <GetRowClass Fn="getRowClass" />
                    </ext:GridView>--%>
                </View>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
                        <%--<Listeners>
                            <BeforeSelect Handler="return index !== 0 && index !== 2;" />
                        </Listeners>--%>
                        <Renderer Fn="renderCheckBoxes" />
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
            </ext:GridPanel>
            <ext:Checkbox runat="server" Html="bleh1" ID="ck1" />
            <ext:Checkbox runat="server" Html="bleh2" ID="ck2" />
        </form>
    </body>
    </html>
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Thank you for the feedback, suggestion and interesting points about javascript, but the suggestion doesn't work for me visually.

    • Even though the 1st and 3rd checkboxes are disabled, the rows are highlighted when the header checkbox is selected.
    • After checking the header checkbox, I can uncheck the 2nd item, but the 1 and 3rd are still highlighted.



    Highlighting a row is interpreted by the user as selected. One alternate approach would be to hide the header checkbox and implement my own Select All and DeSelect all buttons. I have already implemented the buttons and javacript code.

    How can I hide the header checkbox?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Aug 08, 2014, 1:12 PM
  2. Replies: 1
    Last Post: Sep 27, 2013, 4:06 PM
  3. Replies: 23
    Last Post: Nov 04, 2011, 5:19 PM
  4. Replies: 3
    Last Post: Sep 23, 2010, 2:45 PM
  5. Replies: 2
    Last Post: Mar 21, 2010, 1:18 PM

Posting Permissions