Question

59

How to bind property (checked) from checkbox in dialog with label on the column table, SAPui5

rated 0 times [ 65] [ 6] / answers: 1 / hits: 8468 / 11 Years ago, mon, february 3, 2014, 12:00:00

i have a view, which contains table; with onclick event dialog pops up with checkboxes in it. When user checkes boxes, the same columns(as checkboxes) should be added to the table. How to bind properties of checkbox (checked: true) with column(setVisible) ?
Thank you!

ex of checkbox:

var tv3 = new sap.ui.commons.CheckBox({

    text : 'Equipment Tag',

    checked: false,

});

one of the tablecolumn

table.addColumn(new sap.ui.table.Column({

    label : new sap.ui.commons.Label({

        text : Functional Location

    })

}));

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cristinadomoniquel

Add To Favorites

Follow

Total Points: 320

Total Questions: 94

Total Answers: 94

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

cristinadomoniquel questions

1 find() vs map() in JavaScript

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Get POST request body with express and fetch

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Module parse failed: Unexpected token when using webpack 5

Mon, Nov 23, 20, 00:00, 4 Years ago

1 How to reset vuetify's v-input-file

Mon, Aug 17, 20, 00:00, 4 Years ago

1 Jest and ESLint: Expect must have a corresponding matcher call

Fri, Jul 31, 20, 00:00, 4 Years ago

View All

answered 11 Years ago elainaw · Accepted Answer

You're asking how to bind checkbox selections in a dialog with visibility of columns in a table. You can use a JSON model to achieve this:

have visibility properties for each of the columns you want bind

those model properties to the visible property of each column control

bind those model properties also to the checkbox control's selected
property

The two-way binding will mean that the effect is achieved. I've written a working example with a JSON model, commons Table, Columns and CheckBox controls in a Dialog for you to see.

Here are the salient parts:

Visibility in JSON model:

sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel({

    visibleColumns: {

        firstName: true,

        lastName: true

    },

    names: [

        { firstName: DJ, lastName: Adams },

        { firstName: Joseph, lastName: Adams }

    ] 

}));

Visibility binding on Column:

new sap.ui.table.Column({

    visible: {/visibleColumns/firstName},

    label: new sap.ui.commons.Label({ text: First Name }),

    template: new sap.ui.commons.TextView({ text: {firstName} })

}),

Visibility binding on CheckBox:

new sap.ui.commons.CheckBox({

    text: First Name,

    checked: {/visibleColumns/firstName}

})

Bonus: You may be interested in the TablePerso* mechanism set in the sap.m library which does a similar thing for column visibility.