cancel
Showing results for 
Search instead for 
Did you mean: 

Check all/uncheck all on button press event in sapui5

arindam_samanta
Participant
0 Kudos

Hi Experts,

I have a table for mobile application. Table contains 4 fields for storing business data and one field which is actually check box. Now in table header there is two buttons for check all and unchecked all. I want to check all or unchecked all for corresponding button press. How to write the piece of code to achieve this requirement?

Below is my table with check box and two buttons for checked/unchecked-

Thanks & Regards,

Arindam Samanta.

Accepted Solutions (1)

Accepted Solutions (1)

Former Member

I know it is an old post but,

i think that the best way select / unselect table (list row) is

// in your table contruction phase

sap.ui.getCore().byId('yourTable').setMode('MultiSelect');

// select all items

sap.ui.getCore().byId('yourTable').selectAll();

// unselect all items

sap.ui.getCore().byId('yourTable').removeSelections();

mahmood_hammood
Participant
0 Kudos

hi,

I added your code after <Table> aggregation but I ngot only white page. can you tell me where should I add this code exactly please

Answers (3)

Answers (3)

arindam_samanta
Participant
0 Kudos

Hi Experts,

I have found one solution for the above problem. I don't know whether it is right or wrong approach but it is working as per my requirement.

The solution is below:

$("#homePage--cB-homePage--tab-0-CbBg").addClass("sapMCbMarkChecked");

("#homePage--cB-homePage--tab-0-CbBg") - this is my id for the check box.

("sapMCbMarkChecked") - This is the class for checked.


So above code is working for select all.

Now I also need to implement the deselect all. In this case I don't have the reverse solution.


Could it be possible to deselect all through above approach which I have mentioned in this post?


Thanks in advanced..

Regards,

Arindam Samanta

former_member182372
Active Contributor
0 Kudos

why dont just bind the selected property

<CheckBox id="cB" selected={selectedPropertyName}/>



$.each(dataBoundToTheTableAggregationItems, function(i, object) {

  object.selectedPropertyName = true;

  });

arindam_samanta
Participant
0 Kudos

Hi,

I have already tried your suggestion. It is also not working. So I am now going with addClass & removeClass. It is working.

Regards,

Arindam Samanta.

Former Member
0 Kudos

Hi Arindam,


then you can use removeClass() to deselect checked.


$("#homePage--cB-homePage--tab-0-CbBg").removeClass("sapMCbMarkChecked");


Regards

Sakthivel

arindam_samanta
Participant
0 Kudos

Hi Sakthivel,

Now I am using addClass and removeClass. Other methods not working in my case.

Thanks for everything..

Regards,

Arindam Samanta.

Former Member
0 Kudos

Hi Arindam,

Can you please mark answers which all were useful to you ? Hope your select & deselect issue is resolved now ? What's not working now ?

Regards

Sakthivel

former_member182372
Active Contributor
0 Kudos

not smart long term

api hides css specifis :

sap.m.CheckBox.prototype.setSelected = function(bSelected) {

  jQuery.sap.byId(this.getId()+'-CbBg').toggleClass("sapMCbMarkChecked", bSelected);

what if SAP changes name of the style in next release?

rauf_shaikh
Active Participant
0 Kudos

Hi Arindam,

Try following on select all button event :

$('#htmlGeneratedID input:checkbox').each(function() {

               $(this).attr('checked', 'checked');

});




arindam_samanta
Participant
0 Kudos

Hi Rauf,

How to get the html generated id for the input check box?

Regards,

Arindam Samanta.

arindam_samanta
Participant
0 Kudos

Hi Experts,

Does anyone have faced the same situation? Kindly provide the some suggestion or solution to get out from this requirement..

Regadrs,

Arindam Samanta.

rauf_shaikh
Active Participant
0 Kudos

you can get the html id by doing Right Click->Inspect Element in chrome.

Former Member
0 Kudos

On Select All, set the enable : true property for all the checkbox. Do the vice-versa for Select None.

arindam_samanta
Participant
0 Kudos

Hi,

I have tried as you suggested. Below is my code:

$("#cB").enabled="true";

But it is not working.

I tried with this code also:$("#cB").selected="true";

This is also not working.

Another code:

this.getView().byId("cB").setSelected(true);

This is working in normal case like as screen input. But when the check box inside the table, the above piece of code is not working. Here cB  is the check box.

Any idea on this scenario!!!

Regards,

Arindam Samanta.

Former Member
0 Kudos

If you're going with jQuery, then it should be


$('#id of CheckBox').prop('checked', true);
$
('#id of CheckBox').prop('checked', false);


// id of checkbox must be the one generated by UI5, not the id you specify.



this.getView().byId("cB").setSelected(true);   should work in all the cases. Maybe, you're going wrong somewhere. Possible i guess your context of this might point to the table. Post your code.

arindam_samanta
Participant
0 Kudos

Hi,

In for check box in side table:

<Table id="tab" showSeparators="All" items="-------" inset="false">

            <headerToolbar>

            <Toolbar>

                <!--  <Label design="Bold" text="CBPassing"/> -->

                <Button text="Select All" type="Default" press="checkAll" icon="sap-icon://multi-select"/>

                <Button text="Select None" type="Default" press="uncheckAll" icon="sap-icon://decline"/>

            </Toolbar>

            </headerToolbar>

            <columns>

               ------------------

            </columns>

            <items>

            <ColumnListItem>

            <cells>

               

                <Text text="{Exbed}"/>

                <tv:TextField value="{Exaed}"/>

                <Text text="{Ecs}"/>

                <Text text="{Exaddtax1}"/>

                <CheckBox id="cB"/>

            </cells>

            </ColumnListItem>

            </items>

</Table>



This is the code for method on button press event:

checkAll:function(oEvent)

    {

         this.getView().byId("cB").setSelected(true);

       

        },


Regards,

Arindam Samanta.

Former Member
0 Kudos

can you put a break point in your checkAll function and provide the value of this ?

arindam_samanta
Participant
0 Kudos

Hi,

Below is the screen shot:

For this:

For this.getView().byId("cB");-


Regards,

Arindam.

Former Member

What you're doing is correct! this.getView().byId('cB').setSelected(true); should work fine.

Maybe, you're overriding the selected property somewhere.