Using checkbox filtering data in datagrid

StackOverflow https://stackoverflow.com/questions/14868528

Question

on selecting a checkbox data in datagrid must filter and on deselecting checkbox the default data in datagrid must appear .

Was it helpful?

Solution

It is just an issue of logic.

You should not mix the intermediate results of the three groups by means of disjunction. At first you should do disjunction inside of each factor and then conjunction of the three intermediate results.

If one of three factors has no selected variants it may not have an impact on the overall result, so you need to set the initial values to true.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
            layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]public var DGcoll:ArrayCollection;
        private var DGarray:Array;

        private function init():void
        {
            DGarray = [
                {Gametype: '101P00l',   Bet: 500,   MaxPlayers:2, TotalPlayers:2, Status:"ok", RegTable:"rt"}, 
                {Gametype: '201P00l',   Bet: 1000,  MaxPlayers:6, TotalPlayers:5, Status:"ok", RegTable:"rt"},
                {Gametype: '201P00l',   Bet: 500,   MaxPlayers:2, TotalPlayers:2, Status:"ok", RegTable:"rt"},
                {Gametype: '101P00l',   Bet: 4000,  MaxPlayers:6, TotalPlayers:3, Status:"ok", RegTable:"rt"},
                {Gametype: 'Bestof3',   Bet: 5000,  MaxPlayers:6, TotalPlayers:2, Status:"ok", RegTable:"rt"},
                {Gametype: 'Bestof3',   Bet: 4000,  MaxPlayers:6, TotalPlayers:6, Status:"ok", RegTable:"rt"},
                {Gametype: '201P00l',   Bet: 500,   MaxPlayers:2, TotalPlayers:2, Status:"ok", RegTable:"rt"},
                {Gametype: '201P00l',   Bet: 500,   MaxPlayers:2, TotalPlayers:2, Status:"ok", RegTable:"rt"},
                {Gametype: '201P00l',   Bet: 500,   MaxPlayers:2, TotalPlayers:2, Status:"ok", RegTable:"rt"},
                {Gametype: '201P00l',   Bet: 500,   MaxPlayers:2, TotalPlayers:2, Status:"ok", RegTable:"rt"}
            ];

            addData();
        }

        public function addData():void
        {
            DGcoll = new ArrayCollection(DGarray);
            DGcoll.filterFunction=filterFunction;
        }

        public function filterFunction(item:Object):Boolean
        {
            if (checkAll.selected)
                return true;

            if(check101 && check201 && check3 && check2players && check6players && checklow && checkmedium && checkhigh)
            {
                if(!check101.selected && !check201.selected && !check3.selected && !check2players.selected && !check6players.selected && !checklow.selected && !checkmedium.selected && !checkhigh.selected)
                {
                    return true;
                }
                else
                {
                    var gametypeFactor:Boolean = true;

                    if (check101.selected || check201.selected || check3.selected)
                    {
                        var Fcheck101:Boolean =check101.selected ? item.Gametype == '101P00l' : false;
                        var Fcheck201:Boolean =check201.selected ? item.Gametype == '201P00l' : false;
                        var Fcheck3:Boolean =check3.selected ? item.Gametype == 'Bestof3' : false;

                        gametypeFactor = Fcheck101 || Fcheck201 || Fcheck3;
                    }

                    var maxPlayersFactor:Boolean = true;

                    if (check2players.selected || check6players.selected)
                    {
                        var Fcheck2players:Boolean=check2players.selected ?item.MaxPlayers=='2':false;
                        var Fcheck6players:Boolean=check6players.selected ?item.MaxPlayers=='6':false;

                        maxPlayersFactor = Fcheck2players || Fcheck6players;
                    }

                    var betFactor:Boolean = true;

                    if (checklow.selected || checkmedium.selected || checkhigh.selected)
                    {
                        var Fchecklow1:Boolean=checklow.selected ?item.Bet=='500':false;
                        var Fchecklow2:Boolean=checklow.selected ?item.Bet=='1000':false;

                        var Fcheckmedium1:Boolean=checkmedium.selected ?item.Bet=='1000':false;
                        var Fcheckmedium2:Boolean=checkmedium.selected ?item.Bet=='2000':false;
                        var Fcheckmedium3:Boolean=checkmedium.selected ?item.Bet=='3000':false;

                        var Fcheckhigh1:Boolean=checkhigh.selected ?item.Bet=='3000':false;
                        var Fcheckhigh2:Boolean=checkhigh.selected ?item.Bet=='4000':false;
                        var Fcheckhigh3:Boolean=checkhigh.selected ?item.Bet=='5000':false;
                        var Fcheckhigh4:Boolean=checkhigh.selected ?item.Bet=='10000':false;

                        betFactor = Fchecklow1 || Fchecklow2 || Fcheckmedium1 ||Fcheckmedium2 ||Fcheckmedium3 || Fcheckhigh1 || Fcheckhigh2 || Fcheckhigh3 || Fcheckhigh4;
                    }

                    return gametypeFactor && maxPlayersFactor && betFactor;
                }
            }
            else 
            {
                return true;   
            } 
        }

        private function onCbAllClick(evt:Event):void
        {
            check101.enabled = !checkAll.selected;
            check201.enabled = !checkAll.selected;
            check3.enabled = !checkAll.selected;
            check2players.enabled = !checkAll.selected;
            check6players.enabled = !checkAll.selected;
            checklow.enabled = !checkAll.selected;
            checkmedium.enabled = !checkAll.selected;
            checkhigh.enabled = !checkAll.selected;

            DGcoll.refresh();
        }

        private function onAnyCbClick(evt:Event):void
        {
            DGcoll.refresh();
        }
    ]]>
</mx:Script>

<mx:Canvas width="648" height="347" x="162" y="40">

    <mx:HBox x="30">
        <mx:Label text="Show all infos" fontSize="12"/>
        <mx:CheckBox id="checkAll" click="onCbAllClick(event)"/>
    </mx:HBox>

    <mx:Label x="95" y="21" text="Gametype" fontSize="12" width="140"/>
    <mx:Label x="311" y="21" text="Players" fontSize="12" width="98"/>
    <mx:Label x="468" y="21" text="Bet" fontSize="12" width="123"/>
    <mx:HBox height="47" y="49" width="608" x="30">
        <mx:CheckBox id="check101"  x="30" y="48" click="onAnyCbClick(event)" />
        <mx:Label text="101Pool" x="42" y="48"/>
        <mx:CheckBox id="check201"  x="67" y="48" click="onAnyCbClick(event)" />
        <mx:Label  text="201pool" x="79" y="48"/>
        <mx:CheckBox id="check3"  x="125" y="48" click="onAnyCbClick(event)"/>
        <mx:Label text=" Bestof3" x="147" y="48"/>
        <mx:CheckBox id="check2players"  x="214" y="48" click="onAnyCbClick(event)"/>
        <mx:Label text="2 Players" x="228" y="48"/>
        <mx:CheckBox id="check6players"  x="292" y="48" click="onAnyCbClick(event)"/>
        <mx:Label text="6 Players" x="307" y="48"/>
        <mx:CheckBox id="checklow"  x="371" y="48" click="onAnyCbClick(event)"/>
        <mx:Label text="Low" x="393" y="48"/>
        <mx:CheckBox id="checkmedium"  x="421" y="48" click="DGcoll.refresh();"/>
        <mx:Label text="Medium" x="443" y="48"/>
        <mx:CheckBox id="checkhigh" x="498" y="48" click="onAnyCbClick(event)"/>
        <mx:Label text="High" x="520" y="48"/>
    </mx:HBox>
    <mx:DataGrid  id="dg"  dataProvider="{DGcoll}" sortArrowSkin="mx.skins.ProgrammaticSkin" x="30" y="104" width="608" height="217">
        <mx:columns>
            <mx:DataGridColumn dataField="Gametype"/>
            <mx:DataGridColumn dataField="Bet"/>
            <mx:DataGridColumn dataField="MaxPlayers"/>
            <mx:DataGridColumn dataField="TotalPlayers"/>
            <mx:DataGridColumn dataField="Status"/>
            <mx:DataGridColumn dataField="RegTable"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Canvas>
</mx:Application>

OTHER TIPS

        [Bindable] 
        public var DGcoll:ArrayCollection;

        public function addData():void
        {
            DGcoll=new ArrayCollection(DGarray);
            DGcoll.filterFunction=filterFunction;
             trace(filterFunction(DGcoll)); 
        }

        public function filterFunction(item:Object):Boolean
        {

            if(check101 && check201 && check3 && check2players && check6players && checklow && checkmedium && checkhigh)
            {
                if(!check101.selected && !check201.selected && !check3.selected && !check2players.selected && !check6players.selected && !checklow.selected && !checkmedium.selected && !checkhigh.selected)
                {
                return true;
                }
                else
                {
                        trace(" if filterfunction");
                var Fcheck101:Boolean =check101.selected ? item.Gametype == '101P00l' : false;
                var Fcheck201:Boolean =check201.selected ? item.Gametype == '201P00l' : false;
                var Fcheck3:Boolean =check3.selected ? item.Gametype == 'Bestof3' : false;
                var Fcheck2players:Boolean=check2players.selected ?item.MaxPlayers=='2':false;
                var Fcheck6players:Boolean=check6players.selected ?item.MaxPlayers=='6':false;
                var Fchecklow1:Boolean=checklow.selected ?item.Bet=='500':false;
                var Fchecklow2:Boolean=checklow.selected ?item.Bet=='1000':false;
                var Fcheckmedium1:Boolean=checkmedium.selected ?item.Bet=='1000':false;
                var Fcheckmedium2:Boolean=checkmedium.selected ?item.Bet=='2000':false;
                var Fcheckmedium3:Boolean=checkmedium.selected ?item.Bet=='3000':false;
                var Fcheckhigh1:Boolean=checkhigh.selected ?item.Bet=='3000':false;
                var Fcheckhigh2:Boolean=checkhigh.selected ?item.Bet=='4000':false;
                var Fcheckhigh3:Boolean=checkhigh.selected ?item.Bet=='5000':false;
                var Fcheckhigh4:Boolean=checkhigh.selected ?item.Bet=='10000':false;

                return Fcheck101 || Fcheck201 || Fcheck3 || Fcheck2players || Fcheck6players ||Fchecklow1 || Fchecklow2 || Fcheckmedium1 ||Fcheckmedium2 ||Fcheckmedium3 || Fcheckhigh1 || Fcheckhigh2 || Fcheckhigh3 || Fcheckhigh4;
                }

            }
            else 
            {
                trace("else");
                return true;   
            } 

        }


    ]]>
</mx:Script>
<mx:Canvas width="648" height="347" x="162" y="10">

    <mx:Label x="95" y="21" text="Gametype" fontSize="12" width="140"/>
    <mx:Label x="311" y="21" text="Players" fontSize="12" width="98"/>
    <mx:Label x="468" y="21" text="Bet" fontSize="12" width="123"/>
    <mx:HBox height="47" y="49" width="608" x="30">
    <mx:CheckBox id="check101"  x="30" y="48"  click="DGcoll.refresh();" />
    <mx:Label text="101Pool" x="42" y="48"/>
    <mx:CheckBox id="check201"  x="67" y="48" click="DGcoll.refresh();" />
    <mx:Label  text="201pool" x="79" y="48"/>
    <mx:CheckBox id="check3"  x="125" y="48" click="DGcoll.refresh();"/>
    <mx:Label text=" Bestof3" x="147" y="48"/>
    <mx:CheckBox id="check2players"  x="214" y="48" click="DGcoll.refresh();"/>
    <mx:Label text="2 Players" x="228" y="48"/>
    <mx:CheckBox id="check6players"  x="292" y="48" click="DGcoll.refresh();"/>
    <mx:Label text="6 Players" x="307" y="48"/>
    <mx:CheckBox id="checklow"  x="371" y="48" click="DGcoll.refresh();"/>
    <mx:Label text="Low" x="393" y="48"/>
    <mx:CheckBox id="checkmedium"  x="421" y="48" click="DGcoll.refresh();"/>
    <mx:Label text="Medium" x="443" y="48"/>
    <mx:CheckBox id="checkhigh" x="498" y="48" click="DGcoll.refresh();"/>
    <mx:Label text="High" x="520" y="48"/>
    </mx:HBox>
    <mx:DataGrid  id="dg"  dataProvider="{DGcoll}" sortArrowSkin="mx.skins.ProgrammaticSkin" x="30" y="104" width="608" height="217">
    <mx:columns>
        <mx:DataGridColumn dataField="Gametype"/>
        <mx:DataGridColumn dataField="Bet"/>
        <mx:DataGridColumn dataField="MaxPlayers"/>
        <mx:DataGridColumn dataField="TotalPlayers"/>
        <mx:DataGridColumn dataField="Status"/>
        <mx:DataGridColumn dataField="RegTable"/>
        <!--<mx:DataGridColumn dataField="Join"/>-->
    </mx:columns>
    </mx:DataGrid>
</mx:Canvas>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top