[CLOSED] checkbox selection model

[majestic]

hi,

I have a requirement to display total amount in a label, on click of header check box of the grid.
when the header check box is clicked, the amount displayed in the child rows - selected child check boxes of the grid need to be added up
with the amount in entered in a text box out side of the grid and finally the grand total amount
need to be displayed in the label which is outside of the grid


currently we use RowSelect event. So when ever the header check box is clicked, the row select event gets called as many times the number of rows.
I need this to be called only one time when the header check box is clicked and i should be able to loop the values.
Your help is greatly appreciated.

<ext:GridPanel ID="clgrvpnlBilling" AutoHeight="true" AutoWidth="true" AutoExpandColumn="CompanyName" runat="server" StoreID="clstrBilling" StripeRows="true"
                                                        Title="Billing Summary">
                                                        <ColumnModel ID="clcmBilling" runat="server">
                                                            <Columns>
                                                                <ext:Column Header="LnkBillingManagerPK" DataIndex="LnkBillingManagerPK" Sortable="true"
                                                                    Hidden="true" />
                                                                <ext:Column Header="Ctpt_ID" DataIndex="Ctpt_ID" Sortable="true" Hidden="true" />
                                                                <ext:Column Header="CompanyName" ColumnID="CompanyName" DataIndex="CompanyName" Sortable="true" Hidden="true" />
                                                                <ext:Column Header="FXID" DataIndex="FXID" Sortable="true">
                                                                    <Renderer Fn="Edit" />
                                                                </ext:Column>
                                                                <ext:Column Header="FocusID" DataIndex="FocusID" Sortable="true" Hidden="true" />
                                                                <ext:Column Header="Due to IGC -(Buy Amount)" DataIndex="SellAmount" Sortable="true" Align="Right"/>                                                               
                                                                <ext:Column Header="Requested Value Date" DataIndex="ReqValueDate" Sortable="true" >
                                                                <Renderer Fn="Ext.util.Format.dateRenderer('M d, Y ')" />
                                                                </ext:Column>
                                                                <ext:Column Header="Requester" DataIndex="Requester" Sortable="true" Hidden="true" />
                                                                <ext:Column Header="PaidDate" DataIndex="PaidDate" Sortable="true" Hidden="true" >
                                                                <Renderer Fn="Ext.util.Format.dateRenderer('M d, Y ')" />
                                                                </ext:Column>
                                                                 <ext:Column Header="Anticipated Value Date"  DataIndex="AnticipatedValueDate" Sortable="true">
                                                                 <Renderer Fn="Ext.util.Format.dateRenderer('M d, Y ')" />
                                                                 </ext:Column>
                                                                <ext:Column Header="Account Name" DataIndex="AccountName" ColumnID="Accountname"
                                                                    Sortable="true" />
                                                                <ext:Column Header="Rate" DataIndex="RateEntered" Sortable="true" Align="Right"/>
                                                                <ext:Column Header="Sell Amount" DataIndex="BuyAmount" Sortable="true" Align="Right"/>
                                                            </Columns>
                                                        </ColumnModel>
                                                        <SelectionModel>
                                                            <ext:CheckboxSelectionModel>
                                                                <AjaxEvents>
                                                                    <RowSelect ViewStateMode="Include" OnEvent="RowSelect_Select">
                                                                        <ExtraParams>
                                                                            <ext:Parameter Name="RowSelect" Value="Ext.encode(#{clgrvpnlBilling}.getRowsValues())"
                                                                                Mode="Raw" />
                                                                                
                                                                        </ExtraParams>
                                                                        <EventMask  ShowMask="true" />
                                                                    </RowSelect>
                                                                    <RowDeselect OnEvent="RowDeselect_Select">
                                                                        <ExtraParams>
                                                                            <ext:Parameter Name="RowDeSelect" Value="Ext.encode(#{clgrvpnlBilling}.getRowsValues())"
                                                                                Mode="Raw" />
                                                                        </ExtraParams>
                                                                    </RowDeselect>
                                                                </AjaxEvents>
                                                            </ext:CheckboxSelectionModel>
                                                        </SelectionModel>
                                                        <Plugins>
                                                            <ext:GridFilters ID="clgfBilling" runat="server">
                                                                <Filters>
                                                                    <ext:NumericFilter DataIndex="FXID" />
                                                                    <ext:DateFilter DataIndex="ReqValueDate" />
                                                                    <ext:StringFilter DataIndex="AccountName" />
                                                                    <ext:StringFilter DataIndex="BuyAmount" />
                                                                    <ext:NumericFilter DataIndex="RateEntered" />
                                                                    <ext:StringFilter DataIndex="SellAmount" />
                                                                    <ext:DateFilter DataIndex="AnticipatedValueDate" />
                                                                </Filters>
                                                            </ext:GridFilters>
                                                        </Plugins>
                                                        <BottomBar>
                                                            <ext:PagingToolbar ID="clpgtbBilling"  runat="server" StoreID="clstrBilling" PageSize="100"
                                                                AutoDataBind="true" HideMode="Visibility">  
                                                                <Listeners>                                                             
                                                                <Render Handler="this.loading.hide();" />
                                                                </Listeners>                                                              
                                                            </ext:PagingToolbar>
                                                        </BottomBar>
                                                    </ext:GridPanel>

[Daniil]

Hi,

There are BeforeCheckAllClick, AfterCheckAllClick events.

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[] {"test11", "test12", "test13"},
                                         new object[] {"test12", "test22", "test23"},
                                         new object[] {"test13", "test32", "test33"}
                                };
            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>
</head>
<body>
    <form runat="server">
    <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">
                <Listeners>
                    <BeforeCheckAllClick Handler="alert('BeforeCheckAllClick');" />
                    <AfterCheckAllClick Handler="alert('AfterCheckAllClick');" />
                </Listeners>
            </ext:CheckboxSelectionModel>
        </SelectionModel>
    </ext:GridPanel>
    </form>
</body>
</html>

[majestic]

We use dll version 0.8 but Aftercheckall, BeforeCheckall events are available only in 1.0.
How do we go about it?

Also, we have a case where in we need to select the multiple child check boxes. In this case, we won't be selecting the header check box.

We need an event similar to row selection event .. As far i understand Aftercheckall, BeforeCheckall won't handle individual check box selection (child rows selected without header) . These events are only for header check box.

It would be great if you could send me a sample handling all of my cases?


Thanks
Ram

[Daniil]

I would suggest you to add these events.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            Store store = this.Store1;
            store.DataSource = new object[] { 
                                         new object[] {"test11", "test12", "test13"},
                                         new object[] {"test21", "test22", "test23"},
                                         new object[] {"test31", "test32", "test33"}
                                };
            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>Coolite 0.8.X Example</title>
    <ext:ScriptContainer runat="server" />

    <script type="text/javascript">
        Ext.grid.CheckboxSelectionModel.override({
            onHdMouseDown: function(e, t) {
                if (t.className == "x-grid3-hd-checker") {
                    e.stopEvent();
                    var hd = Ext.fly(t.parentNode);
                    var isChecked = hd.hasClass("x-grid3-hd-checker-on");

                    if (this.fireEvent("beforecheckallclick", this, isChecked) === false) {
                        return;
                    }

                    if (isChecked) {
                        hd.removeClass("x-grid3-hd-checker-on");
                        this.clearSelections();
                    } else {
                        hd.addClass("x-grid3-hd-checker-on");
                        this.selectAll();
                    }

                    this.fireEvent("aftercheckallclick", this, !isChecked);
                }
            }
        });

        var beforeCheckAllClickHandler = function(sm, cheked) {
            sm.lockSelect = true;
        }

        var afterCheckAllClickHandler = function(sm, cheked) {
            Label1.getEl().update("Total: " + (cheked ? sm.grid.getStore().getCount() : 0));
            sm.lockSelect = false;
        }

        Ext.onReady(function() {
            GridPanel1.getSelectionModel().on("beforecheckallclick", beforeCheckAllClickHandler);
            GridPanel1.getSelectionModel().on("aftercheckallclick", afterCheckAllClickHandler);
        });
    </script>

</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="test1" />
                    <ext:RecordField Name="test2" />
                    <ext:RecordField Name="test3" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        StoreID="Store1" 
        AutoHeight="true">
        <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">
                <Listeners>
                    <RowSelect Handler="if (!this.lockSelect) {
                                            Label1.getEl().update('Total: ' + this.getCount());    
                                        }" />
                    <RowDeselect Handler="if (!this.lockSelect) {
                                            Label1.getEl().update('Total: ' + this.getCount());    
                                        }" />
                </Listeners>
            </ext:CheckboxSelectionModel>
        </SelectionModel>
    </ext:GridPanel>
    <ext:Label ID="Label1" runat="server" Text="Total: 0" />
    </form>
</body>
</html>